office-ui-fabric-vue DEPRECATED
Please consider contributing to https://github.com/johannes-z/office-fabric. office-fabric borrows as much code as possible from office-ui-fabric-react, which results in better maintainability, feature parity, and less work overall.
Browser support
Fabric Vue supports all evergreen browsers, with IE 11 as the min-bar version of Internet Explorer.
Fabric Vue supports many commonly used web browsers such as Internet Explorer, Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge. For browsers outside of this matrix, proper behavior of the components may be good but is not guaranteed.
| Browser | Supported | Not supported |
|---|---|---|
| Microsoft Edge | X | |
| Internet Explorer 11 | X | |
| Internet Explorer 10 | X | |
| Internet Explorer 9 | X | |
| Google Chrome (latest 2 versions) | X | |
| Mozilla Firefox (latest 2 versions) | X | |
| Apple Safari (latest 2 versions) | X |
Requirements
Office UI Fabric Core
The components provided by this library require the official CSS files. See Get started with Fabric Core.
Installation
npm install --save-dev @johannes-z/office-ui-fabric-vueyarn add -D @johannes-z/office-ui-fabric-vueGetting Started
Prepare HTML
Office UI Fabric styles require two things:
- The
dirattribute on the container has to be set for some icons and styles, e.g.dir="ltr". - The class
ms-Fabrichas to be set on the container, e.g.<body class="ms-Fabric"></body>
The template for the docs looks as follows:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
</head>
<body class="ms-Fabric">
<div id="app"></div>
</body>
</html>Install Plugin
After this step all components will be registered globally. You can use any of the currently available components in your application (see docs for a list of available components).
import Vue from 'vue'
import Fabric from '@johannes-z/office-ui-fabric-vue'
import '@johannes-z/office-ui-fabric-vue/dist/office-ui-fabric-vue.css'
Vue.use(Fabric)Showcase
Showcasing components is done using https://github.com/vuejs/vuepress.
See ./docs for an example how to add new pages.
Components
This is a list to keep track of the progress of the components:
- Basic inputs
- Button
- Checkbox
- ChoiceGroup
- Label
- Link
- Slider
- SpinButton
- Tag*
- TextField
- Toggle
- Navigation
- SearchBox
- Content
- ActivityItem
- Icon
- Persona
- Pickers
- Progress & Validation
- MessageBar
- ProgressIndicator
- Shimmer
- Spinner
- Surfaces
- Utilities
Contributing
Any contributions are welcome, as long as they follow the project's file/folder
structure and styles provided by the .editorconfig file and eslint.
Important: Keep dependencies of external libraries to a minimum.
Compatibility
All components should be compatible with at least IE11.
License
All files on the Office UI Fabric Vue GitHub repository are subject to the MIT license, unless otherwise noted. Please read the License file at the root of the project.
Usage of the fonts and icons referenced in Office UI Fabric is subject to the terms of the assets license agreement.