Skip to content

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

License

Notifications You must be signed in to change notification settings

nektro/fluent_design.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

17 Commits
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published