Office UI Fabric Snippets
A set of Office UI Fabric Snippets for Visual Studio Code. Create a new HTML document and type 'fabric' to see all available snippets.
Office UI Fabric Documentation
Supported Version: Office UI Fabric 3.0.0 Beta 2
####Please submit issues or suggestion to Office UI Fabric Snippets
Available Snippets
Breadcrumb
| Snippet |
Description |
| fabric-breadcrumb-script |
To instantiate all Breadcrumbs on the page. Insert this snippet in the header tag. |
| fabric-breadcrumb |
Breadcrumb |
| fabric-breadcrumb-item |
Breadcrumb Item |
| Snippet |
Description |
| fabric-button |
Default Button |
| fabric-button-primary |
Primary Button |
| fabric-button-command |
Command Button. For more icons |
| fabric-button-compound |
Compound Button |
| fabric-button-hero |
Hero Button |
Callout
| Snippet |
Description |
| fabric-callout |
Callout |
| fabric-callout-action |
Includes buttons to take action |
| fabric-callout-close |
Callout with close icon |
| fabric-callout-oobe |
Draws attention to one aspect of the application during a product tour |
| fabric-callout-peek |
A smaller callout with an action |
Choice Field / Checkbox / Choice Field Group
| Snippet |
Description |
Dependency Snippet |
| fabric-choicefield |
Radio option |
|
| fabric-checkbox |
Checkbox option |
|
| fabric-choicefield-group |
Multiple options |
fabric-choicefield, fabric-checkbox |
Command Bar
| Snippet |
Description |
Dependency Snippet |
| fabric-commandbar-script |
To instantiate all Command Bar components on the page. Insert this snippet in the header tag. |
|
| fabric-commandbar |
Command Bar |
fabric-commandbar-search-item, fabric-commandbar-item |
| fabric-commandbar-search-item |
|
|
| fabric-commandbar-item |
|
|
| Snippet |
Description |
Dependency Snippet |
| fabric-contextual-menu-script |
To instantiate all Contextual Menu components on the page. Insert this snippet in the header tag. |
|
| fabric-contextual-menu |
Default Contextual Menu |
fabric-contextual-menu-{header-item, item, divider-item, submenu-item} |
| fabric-contextual-menu-multi-select |
Default Contextual Menu |
fabric-contextual-menu-{header-item, item, divider-item, submenu-item} |
| fabric-contextual-menu-item |
|
|
| fabric-contextual-menu-divider-item |
|
|
| fabric-contextual-menu-header-item |
|
|
| fabric-contextual-menu-submenu-item |
|
|
###Date Picker
Snippet | Description | Dependency Snippet
--- | --- | ---
fabric-datepicker-script | To instantiate all Date Picker components on the page. Insert this snippet in the header tag. |
fabric-datepicker | Default Date Picker |
###Dialog
Snippet | Description | Dependency Snippet
--- | --- | ---
fabric-dialog-script | To instantiate all Dialog components on the page. Insert this snippet in the header tag. |
fabric-dialog | Default Dialog |
fabric-dialog:blocking | Blocking Dialog |
###Dropdown
Snippet | Description | Dependency Snippet
--- | --- | ---
fabric-dropdown-script | To instantiate all Dropdown components on the page. Insert this snippet in the header tag. |
fabric-dropdown | Default Dropdown |
###Label
Snippet | Description | Dependency Snippet
--- | --- | ---
fabric-label | Default Label |
###Link
Snippet | Description | Dependency Snippet
--- | --- | ---
fabric-link | Default Link |
List
| Snippet |
Description |
Dependency Snippet |
| fabric-list |
Presents a number of related items as a list |
fabric-list-item, :document, :image, :selectable, :selected, :unread, :unseen |
| fabric-list-grid |
Presents a number of related items as a grid |
fabric-list-item, :document, :image, :selectable, :selected, :unread, :unseen |
ListItem
| Snippet |
Description |
Dependency Snippet |
| fabric-list-item |
List item |
|
| fabric-list-item:document |
|
|
| fabric-list-item:image |
|
|
| fabric-list-item:selectable |
|
|
| fabric-list-item:selected |
|
|
| fabric-list-item:unread |
|
|
| fabric-list-item:unseen |
|
|
Message Banner
| Snippet |
Description |
Dependency Snippet |
| fabric-message-banner |
Presents a message to the user |
|
| fabric-message-banner-script |
To instantiate all Message Banner components on the page. Insert this snippet in the header tag. |
|
Message Bar
| Snippet |
Description |
Dependency Snippet |
| fabric-message-banner |
Default Message Bar |
|
| fabric-message-banner:error |
Message Bar (error) |
|
| fabric-message-banner:severe-warning |
Message Bar (Severe Warning) |
|
| fabric-message-banner:success |
Message Bar (Success) |
|
| fabric-message-banner:warning |
Message Bar (Warning) |
|
Nav Bar
| Snippet |
Description |
Dependency Snippet |
| fabric-navbar-script |
To instantiate all Nav Bar components on the page. Insert this snippet in the header tag. |
|
| fabric-navbar |
Default Nav Bar |
fabric-navbar-item, fabric-navbar-right-item, fabric-navbar-menu-item |
| fabric-navbar-item |
Nav Item |
|
| fabric-navbar-right-item |
Nav Item with right align |
|
| fabric-navbar-menu-item |
Nav Item with dropdown menu |
|
Org Chart
| Snippet |
Description |
Dependency Snippet |
| fabric-orgchart |
Displays multiple Persona components in groups with headers in order to show the hierarchy of an organization or team |
|
| fabric-orgchart-group |
To group the members in the OrgChart |
fabric-orgchart-list-item |
| fabric-orgchart-list-item |
Each item in the OrgChart group. |
fabric-persona |
###Overlay
Snippet | Description | Dependency Snippet
--- | --- | ---
fabric-overlay | Default Overlay |
fabric-overlay:dark | Overlay (Dark) |
fabric-overlay:none | Overlay (None) |
People Picker
| Snippet |
Description |
Dependency Snippet |
| fabric-peoplepicker-script |
To instantiate all People Picker components on the page. Insert this snippet in the header tag. |
|
| fabric-peoplepicker |
Default PeoplePicker. |
fabric-peoplepicker:result-group |
| fabric-peoplepicker:result-group |
To group the members in the PeoplePicker dropdown list. |
fabric-peoplepicker:result |
| fabric-peoplepicker:result |
PeoplePicker Item |
fabric-persona |
Persona
| Snippet |
Description |
| fabric-persona |
Profile image with presence indicator. |
| fabric-persona:available |
Persona (Available) |
| fabric-persona:away |
Persona (Away) |
| fabric-persona:busy |
Persona (Blocked) |
| fabric-persona:dnd |
Persona (Do not distrub) |
| fabric-persona:offline |
Persona (Offline) |
| fabric-persona:large |
Persona (Large) |
| fabric-persona:extra-large |
Persona (Extra Large) |
| fabric-persona:small |
Persona (Small) |
| fabric-persona:extra-small |
Persona (Extra Small) |
| fabric-persona:tiny |
Persona (tiny) |
| fabric-persona:initials |
Persona (Initials) |
Persona Card
| Snippet |
Description |
Dependency Snippet |
| fabric-persona-card-script |
To instantiate all PersonaCard components on the page. Insert this snippet in the header tag. |
|
| fabric-personacard |
Default PersonaCard |
fabric-persona |
Pivot
| Snippet |
Description |
| fabric-pivot-script |
To instantiate all Pivot components on the page. Insert this snippet in the header tag. |
| fabric-pivot |
Default Pivot |
| fabric-pivot:large |
Large Pivot |
| fabric-pivot:tabs |
Pivot (Tabs style) |
| fabric-pivot:large-tabs |
Large Pivot (Tabs style) |
Progress Indicator
| Snippet |
Description |
| progress-indicator |
Default Progress Indicator |
Search Box
| Snippet |
Description |
| fabric-searchbox-script |
To instantiate all SearchBox components on the page. Insert this snippet in the header tag. |
| fabric-searchbox |
Input field that allows for the input of search text. |
Spinner
| Snippet |
Description |
| fabric-spinner |
Default Spinner. |
| fabric-spinner:large |
Large Spinner. |
| fabric-spinner:message |
Spinner with message. |
| fabric-spinner:large-message |
Large Spinner with message. |
Table
| Snippet |
Description |
| fabric-table |
Default Table. |
| fabric-table:fixed |
Table with fixed columns. |
| fabric-table:row-selectable |
Table with selectable rows. |
Text Field
| Snippet |
Description |
| fabric-textfield |
Single line input of text. |
| fabric-textfield:multiline |
Multiple line input of text. |
| fabric-textfield:placeholder |
Single line input of text with placeholder. |
| fabric-textfield:underlined |
Single line input of text with underlined. |
Toggle
| Snippet |
Description |
| fabric-toggle |
Toggle with label on above (default). |
| fabric-toggle:text-left |
Toggle with label on left |
In the current release, Code snippets are not available for both Facepile and Panel components.
