Skip to content

Latest commit

 

History

History
47 lines (38 loc) · 1.87 KB

README.md

File metadata and controls

47 lines (38 loc) · 1.87 KB

fluent_design.js

A JavaScript library offering Custom Elements based on Microsoft's new Fluent Design system

Installation

<script type="module" src="path/to/fluent_design.js/src/design.js">

And that's it! You're ready to start using Fluent elements in your pages.

Usage

<fl-icon>

Using a Fluent Icon allows you to use any icon available in the UWP icon font only available on Windows 10. For a full list of icons see Microsoft's Fluent documentation.

Attributes

[icon]
Any of the IDs from the above docs such as Camera or Calendar
[char]
Any unicode code point to be set in the Segoe MDL2 Assets font

<fl-titlebar>

The Fluent TitleBar provides a way to have a Win10 looking top nav that includes a history back button as well as the minimize, maximize, and close <fl-icon>s

Attributes

[title]
Set the top title brand text with this attribute
[color]
Set the background color of the title bar here. Color correction for making the title text black or white is done automatically.
Default: #FFB900
[back]
Determines whether the history back button is shown
Default: true
[window]
Determines whether the minimize, maximize, and close fl-icon window controls are shown
Default: true

Acknowledgements

License

This project is licensed under the Apache 2 License - see the LICENSE file for details