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.
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 |
The components provided by this library require the official CSS files. See Get started with Fabric Core.
npm install --save-dev @johannes-z/office-ui-fabric-vueyarn add -D @johannes-z/office-ui-fabric-vueOffice 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>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)Showcasing components is done using https://github.com/vuejs/vuepress.
See ./docs for an example how to add new pages.
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
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.
All components should be compatible with at least IE11.
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.