{ "HTML Shell": { "prefix": "htmlShell", "description": "", "body": [ "", "", "", "", "", "", "", "", "", "" ] } /****************** Office UI Fabric, VS Code Snippets Based on Fabric JS release 1.2.0 and Fabric Core release 4.1.0 Provided by: Sector 43 Software (David Mann) Info: s43.io/FabricSnippets All HTML, JavaScript, CSS (c) Microsoft. Adapted from GitHub source files. */ /*******************CDN References*************************/ ,"CDN References": { "prefix": "uifCdn", "description": "Add Fabric CSS CDN link and JS script tag", "body": [ "", "", "" ] } ,"Local References": { "prefix": "uifLocalRef", "description": "Add Fabric local link tags", "body": [ "", "", "", "", "", "" ] } ,"snippet name": { "prefix": "jqueryCDN", "description": "Add JQuery 2.2.4 CDN script tag", "body": [ "" ] } /*******************Minimum Page*************************/ ,"Fabric Minimum Page": { "prefix": "uifMinPage", "description": "Inserts the minimum markup necessary for a Fabric page", "body": [ "", "", "", "", "", "", "", "", "", "", "", "", "", "" ] } /*******************Breadcrumb*************************/ ,"Fabric Breadcrumb": { "prefix": "uifBread", "description": "Standard Fabric Breadcrumb", "body": [ "
", "
", "
", "
", "
    ", "
", "
", "
", " ", "
", "" ] } ,"Breadcrumb Item": { "prefix": "uifBreadItem", "description": "Markup for a single breadcrumb item", "body": [ "
  • ", " Item Text", " ", "
  • " ] } /*******************Buttons*************************/ ,"Fabric Button": { "prefix": "uifButton", "body": [ "" ], "description": "Standard Fabric button" }, "Fabric Button Primary": { "prefix": "uifButtonPrimary", "body": [ "" ], "description": "Primary Fabric button" }, "Fabric Button Command": { "prefix": "uifButtonCommand", "body": [ "" ], "description": "Command Fabric button - shows designated icon to left of button label" }, "Fabric Button Hero": { "prefix": "uifButtonHero", "body": [ "" ], "description": "Hero Fabric button - shows styled button label and designated icon" } /*******************Callout*************************/ ,"Fabric Callout": { "prefix": "uifCallout", "description": "Standard Fabric Callout", "body": [ "", " ", "" ] } /*******************Checkbox Field*************************/ ,"Fabric Checkbox": { "prefix": "uifCheck", "description": "Fabric styled checkbox", "body": [ "
    ", " ", " ", "
    ", "" ] } /*******************Choice Field Group *************************/ ,"Fabric Choice Field Group": { "prefix": "uifChoice", "description": "Fabric styled radio button group", "body": [ "
    ", "
    ", " ", "
    ", " ", "
    ", "" ] } ,"Fabric Radio": { "prefix": "uifRadioItem", "description": "Radio button for a Choice Field Group", "body": [ "
    ", " ", " ", "
    " ] } /*******************CommandBar*************************/ ,"Fabric Command Bar": { "prefix": "uifCommandBar", "description": "", "body": [ "
    ", "
    ", "
    ", " ", "
    ", "
    ", "
    ", " ", " ", "
    ", " ", "
      ", "
    • ", " ", " ", "
    • ", "
    ", "
    ", "
    ", "
    ", "" ] } ,"Fabric CommandBar Button": { "prefix": "uifCommandBarButton", "description": "An individual button within a CommandBar", "body": [ "
    ", " ", "
    " ] } ,"Fabric CommandBar ContextMenu": { "prefix": "uifCommandBarContextMenu", "description": "A dropdown menu shown inside a CommandBar", "body": [ "
    ", " ", " ", "
    " ] } ,"Fabric CommandBar Contextual Menu Item": { "prefix": "uifCommandBarContextualMenuItem", "description": "An individual item to go within a Contextual Menu of a Commandbar. Supports icons", "body": [ "
  • ", " ", " Item Text", " ", "
  • " ] } /*******************Contextual Menu*************************/ ,"Fabric Contextual Menu": { "prefix": "uifContextMenu", "description": "A context menu, showing options for dividers, sub-menus and disabled and selected items", "body": [ "Open Menu", "", "" ] } ,"Fabric Contextual Menu Item": { "prefix": "uifContextualMenuItem", "description": "An individual item to go within a Contextual Menu. Does not support icons", "body": [ "
  • ", " ", " Item Text", "
  • " ] } ,"Fabric Contextual Menu Item With SubMenu": { "prefix": "uifContextualMenuSubMenu", "description": "A menu item set up to contain child menu items", "body": [ "
  • ", " Has Sub-items", " ", " " ] } ,"Fabric Contextual Menu Divider": { "prefix": "uifContextualMenuDivider", "description": "", "body": [ "
  • " ] } /*******************DatePicker*************************/ ,"DatePicker": { "prefix": "uifDatePicker", "description": "", "body": [ "", "", "", "
    ", "
    ", " ", " ", " ", "
    ", "
    ", " ", " ", "
    ", "
    ", "Go to today", "
    ", "
    ", "
    ", " ", " ", "
    ", "
    ", "
    ", "
    ", " Jan", " Feb", " Mar", " Apr", " May", " Jun", " Jul", " Aug", " Sep", " Oct", " Nov", " Dec", "
    ", "
    ", "
    ", "
    ", " ", " ", "
    ", "
    ", "
    ", "", "", ] } /*******************Dialog*************************/ ,"Standard Fabric Dialog": { "prefix": "uifDialog", "description": "Markup for standard dialog, with support for open/close actions", "body": [ "
    ", "
    Header Goes Here
    ", "
    ", "

    Content Goes Here

    ", "
    ", "
    ", " ", " ", "
    ", "
    ", "" ] } /*******************Dropdown*************************/ ,"Fabric Dropdown": { "prefix": "uifDropdown", "description": "Fabric dropdown", "body": [ "
    ", " ", " ", " ", "
    ", "" ] } /*******************Facepile*************************/ ,"Fabric Facepile": { "prefix": "uifFacepile", "description": "Sample markup for the Facepile component", "body": [ "
    ", " ", "", " ", "", " ", "
    ", "", "" ] } /*******************Icon*************************/ ,"Fabric Icon": { "prefix": "uifIcon", "description": "Markup for a Fabric icon", "body": [ " ", " Label Text", "" ] } /*******************Link*************************/ ,"Fabric Link": { "prefix": "uifLink", "description": "Basic hyperlink", "body": [ "Text/a>" ] } /*******************List *************************/ ,"Fabric List": { "prefix": "uifList", "description": "Shell for a Fabric List. Items are placed as indicated in comments", "body": [ "", "" ] } /*******************ListItem*************************/ ,"Fabric ListItem": { "prefix": "uifListItem", "description": "Individual items for display in a List", "body": [ "
  • ", " Primary Text", " Secondary Text", " Tertiary Text", " Meta Text", "
    ", "
    ", "
    ", "
    ", "
  • " ] } /******************* MessageBanner *************************/ ,"Fabric Message Banner": { "prefix": "uifMessageBanner", "description": "Presents a message to the user, with an optional call to action. The message is typically an error, update, or alert.", "body": [ "", " ", "", "", "" ] } /*******************MessageBar*************************/ ,"Fabric Message Bar": { "prefix": "uifMessageBar", "description": "Displays a colored informational/warning/error message to the user", "body": [ "
    ", " ", "
    " ] } /******************* Org Chart *************************/ ,"Fabric Org Chart": { "prefix": "uifOrgChart", "description": "A component embedded within the PersonaCard component that displays hierarchical information about an individual within an organization.", "body": [ "
    ", "
    ", "
    Group Name
    ", "
      ", " ", "
    ", "
    ", "
    " ] } ,"Fabric Org Chart Person": { "prefix": "uifOrgPerson", "description": "An individual person for the Org Chart", "body": [ "
  • ", " ", "
  • " ] } /******************* Overlay *************************/ ,"Fabric Overlay": { "prefix": "uifOverlay", "description": "Standard white overlay", "body": [ "
    ", "", "" ] } /******************* Panel *************************/ ,"Fabric Panel": { "prefix": "uifPanel", "description": "Container attached to side of page to support additional actions/information", "body": [ "", "
    ", " ", "
    ", "

    Panel Header

    ", "
    ", " Content goes here", "
    ", "
    ", "
    ", "", "" ] } /******************* People Picker *************************/ ,"Fabric PeoplePicker": { "prefix": "uifPeoplePicker", "description": "Sample markup for the PeoplePicker component", "body": [ "
    ", " ", "
    ", "
    ", "
    ", " Contacts", "
    ", " ", " ", "
    ", "
    ", "", "" ] } ,"Fabric PeoplePicker Result": { "prefix": "uifPeoplePickerResult", "description": "A single person result for the PeoplePicker", "body": [ "
    ", " ", " ", "
    " ] } /******************* Persona *************************/ ,"Fabric Persona": { "prefix": "uifPersona", "description": "A responsive control for showing user information", "body": [ "
    ", "
    ", "
    DM
    ", " ", "
    ", "
    ", "
    ", "
    David Mann
    ", "
    Secondary Text
    ", "
    Tertiary Text
    ", "
    Optional Text
    ", "
    ", "
    " ] } /******************* Persona Card *************************/ ,"Fabric Persona Card": { "prefix": "uifPersonaCard", "description": "Details of an individual presented in a card format", "body": [ "
    ", " ", "
      ", "
    • ", "
    • ", "
    • ", "
    • ", "
    • View profile
    • ", "
    • ", "
    ", "
    ", " ", "
    ", " ", "
    ", "
    ", "
    ", "
    Details
    ", "
    Personal: 555.206.2443
    ", "
    Work: 555.929.8240
    ", "
    ", "
    ", " ", "
    ", " ", "
    ", " ", "
    ", "
    ", "
    ", "", "" ] } /******************* Pivot *************************/ ,"Fabric Pivot": { "prefix": "uifPivot", "description": "A navigational, layout component that allows users to switch between different sets of content.", "body": [ "
    ", " ", "
    ", " Content for first tab...", "
    ", "
    ", " Content for second tab...", "
    ", " ", "
    ", "", "" ] } /******************* Progress Indicator *************************/ ,"Fabric Progress Indicator": { "prefix": "uifProgress", "description": "Progress indicator showing activity status.", "body": [ "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "
    ", "", "" ] } /******************* Search Box *************************/ ,"Fabric SearchBox": { "prefix": "uifSearch", "description": "Basic Office 365 Search field", "body": [ "", "" ] } /******************* Spinner *************************/ ,"Fabric Spinner": { "prefix": "uifSpinner", "description": "An indeterminate progress/loading indicator", "body": [ "
    ", "
    ", "
    ", "", "" ] } /******************* Table *************************/ ,"Fabric Table Shell": { "prefix": "uifTable", "description": "Fabric Table", "body": [ "", " ", "
    ", "", "" ] } /******************* TextField *************************/ ,"Fabric Text Field": { "prefix": "uifTextField", "description": "A standard text input", "body": [ "
    ", " ", " ", "
    ", "", "" ] } /******************* Toggle *************************/ ,"Fabric Toggle": { "prefix": "uifToggle", "description": "A boolean visualization that allows for users to select between two states, typically on and off", "body": [ "
    ", " Description", " ", " ", "
    ", "", ] } /******************* Grid *************************/ ,"Fabric Grid Shell": { "prefix": "uifGridShell", "description": "", "body": [ "
    ", " ", "
    " ] } ,"Fabric Grid Row": { "prefix": "uifGridRow", "description": "An individual row in the Fabric grid", "body": [ "
    ", " ", "
    " ] } ,"Fabric Grid Column": { "prefix": "uifGridCol", "description": "An individual column in the Fabric grid", "body": [ "
    Text
    " ] } ,"Fabric Grid Row Classes": { "prefix": "uifGridClasses", "description": "Inserts a cheatsheet of grid styles as a comment", "body": [ "" ] } }