Fluent Design Web Components
Microsoft's Fluent Design system implemented for the web using Stencil.
Available Components:
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. |