fluent-web-components

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.