Skip to content

Latest commit

 

History

History
226 lines (194 loc) · 8.48 KB

README.md

File metadata and controls

226 lines (194 loc) · 8.48 KB

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 alt text

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

Button

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

Contextual Menu

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.