Fluent-web-components NPM

Fluent Design Web Components

Microsoft's Fluent Design system implemented for the web using Stencil.

Install from npm: npm i --save fluent-web-components

If you don't already have the body set to have no margin & padding, make sure you do.

body {
  margin: 0;
  padding: 0;
}

Tag: fluent-acrylic

Property	Type	Default	Description
padding	`boolean`	`false`	Gives acrylic children some room to breathe.
tint-opacity	`[1-10]`	`5`	Opacity from 1 to 9 of the background of the acrylic
tint-color	css color	color scheme	Changes the tinit color of the acrylic from the default color scheme specified.
background-source	`"host-backdrop"` or `"backdrop"`	`"host-backdrop"`	Which background source to use as the background of the acrylic. `"host-backdrop"` uses the image set for the `--background-image` variable, while `"backdrop"` uses the content behind the element (right now this uses backdrop-filter so it may not work in all browsers yet).

A simple button component with support for custom styling as specified in the UWP docs.

Tag: fluent-button

Property	Type	Default	Description
background	`string`	based on theme	Changes the default background of the button
foreground	`string`	based on theme	Changes the default text color of the button

...and several other properties. See Microsoft's specs on UWP button styling for more info.

A content wrapper for an application using Fluent for Web. It is optional but recommended.

Tag: fluent-content

Property	Type	Default	Description
no-image	`boolean`	`false`	Disables a page-wide background image, instead opting for a solid background.
theme	`"light"` or `"dark"`	`"light"`	Apply the selected theme to all fluent elements that are children of this content.
background-image	`string`	`undefined`	Set the host backdrop of the content.

6 years ago

6 years ago