Fluent Design Web Components

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

Available Components:

• Acrylic
• Content
• Button

Coming Soon:

• Input
• Navigation View

Getting started

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;
}

Components

Acrylic

• Creates a container for child elements with the Fluent Acrylic effect applied.

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). |

Button

• 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.

Content

• 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. |