Fluent Elements

Fluent Design is the design guideline for Universal Windows Platform applications. Using the Custom Elements in this package it is possible to use many of the UWP components in your web apps.

Make sure to check the browser compatibility for Web Components in your tests!

• Custom Elements v1
• Shadow DOM v1
• HTML Imports (Recommended)(Polyfill)

📘 = link to Fluent Design documentation

Elements (Coverage)

Layout

• 📘 <fl-listview>
• 📘 <fl-navigationview>
• 📘 <fl-splitview>
• 📘 <fl-pivot>
• 📘 <fl-treeview>

Input

• 📘 <fl-button> (<button is="fl-button">)
• 📘 <fl-checkbox>
• 📘 <fl-colorpicker>
• 📘 <fl-calendardatepicker>
• 📘 <fl-datepicker>
• 📘 <fl-timepicker>
• 📘 <fl-autosuggestbox
• 📘 <fl-radiobutton>
• 📘 <fl-ratingscontrol>
• 📘 <fl-searchbox>
• 📘 <fl-slider>
• 📘 <fl-textbox>
• 📘 <fl-passwordbox>
• 📘 <fl-toggleswitch>
• 📘 <fl-combobox>

Other

• 📘 <fl-hyperlink>
• 📘 <fl-image>
• 📘 <fl-icon> (*Requires Windows 10)
• 📘 <fl-calendarview>
• 📘 <fl-personpicture>
• 📘 <fl-progressbar>
• 📘 <fl-progressring>
• 📘 <fl-inprogressbar>

Notes

• Default font on body is set to Segoe UI
• todo Style the Scroll Bar to Windows UWP style
• todo Add ToolTips

Colors Cheatsheet

• #cfcfcf - light gray
• #7f7f7f - basic border
• #0078cf - accent blue
• #afafaf - dark gray