spfx-ui-fabric-vue
Office ui fabric components made specific for SPFx.
Component status - Done
| Component | Uses ui-fabric-js | Uses ui-fabric-vue | Uses ui-fabric-core styles | Notes |
|---|---|---|---|---|
| Button | Yes | Yes | Yes | |
| Callout | Yes | Yes | Yes | icons changed to svgs |
| Checkbox | Yes | Yes | Yes | icons changed to svgs |
| ChoiceFieldGroup | Yes | Yes | Yes | |
| Commandbar* | Yes | Yes | Yes | Not to happy about the implementation, consider using the react version instead. *Contextual menu, when items get collapsed, is not working as intended yet! TESTS MISSING |
| CommandButton | Yes | Yes | Yes | icon is no longer a property, but instead a slot called "icon" |
| ContextualMenu | Yes | Yes | Yes | icons changed to svgs |
| Dialog | Yes | Yes | Yes | icons changed to svgs |
| Dropdown | Yes | Yes | Yes | icons changed to svgs |
| Icons | No | No | No | |
| Messagebar | Yes | Yes | Yes | icon is no longer a property, but instead a slot called "icon" |
| Label | Yes | Yes | Yes | |
| Link | Yes | Yes | Yes | |
| List | Yes | Yes | Yes | |
| ListItem | Yes | Yes | Yes | |
| Overlay | Yes | Yes | Yes | |
| Panel | Yes | Yes | Yes | |
| Persona | Yes | Yes | Yes | |
| Searchbox | Yes | Yes | Yes | icons changed to svgs |
| Spinner | Yes | Yes | Yes | TESTS MISSING, moving, so not possible to test with screenshots! |
| Textfield | Yes | Yes | Yes | |
| Pivot | Yes | Yes | Yes | |
| Toggle | Yes | Yes | Yes | |
| ProgressIndicator | Yes | Yes | Yes | |
| MessageBanner | Yes | No | Yes | icon changed to svg |
Component status - Todo
| Component | Notes |
|---|
Facepile | PeoplePicker | PersonaCard | Table | OrgChart | Breadcrumb |
Bonus components
No part of the normal ui fabric, but used by multiple wizdom components
| Component | Implemented | Notes |
|---|---|---|
| Imageuploader | No | Needs a wizdom context, see wiki for more info |
| Richtexteditor | No | Needs a license key, see wiki for more info |
| TemplateSwitcher | No | |
| Typeahead | Yes | |
| Multiselect | No | |
| Timepicker | Yes | |
| DatePicker | Yes | |
| DynamicIcon | Yes |
Changes, compared to https://aidewoode.github.io/office-ui-fabric-vue/#/
Dialog, has an extra property to show dark overlay, called useDarkOverlay (Boolean)
Features
- ES Modules! every component can be used indivudually. No need to load a huge bundle, just to show ex. a button
- Styles are automatically loaded and respect SPFX themes
- Font files are only needed for the Icon component. All other components uses svgs instead for their icons
Todo:
Maybe use small inline fonts instead of SVG's? http://stephenscaff.com/articles/2013/09/font-face-and-base64-data-uri/