An EcmaScript Module Version of this package is in active development. Checkout this link for more information.

Office UI Fabric for Vue

A Vue.js implementation of Office UI Fabric

Demo

This small demo gives an overview of all supported components.

Information

The goal of this project is to build a fully functional Vue.js implementation of the Office UI Fabric components. It should behave just like the official Office Fabric for React library, provided by Microsoft.

In contrast to other Office Fabric implementations in Vue.js this library tries to use as many of the original unmodified source code from the Office Fabric React library as possible.

This is achieved by utilizing the @uifabric/merge-styles library together with some of the source code of @uifabric/utilities, @uifabric/styling and @uifabric/icons. This allows us utilize the same Theme as the official react library, meaning all colors, fonts, animations, ... are exactly the same and will always be up-2-date! In addition this library uses the same CSS styling functions as the official ones. This eliminates the effort required to convert the styling from the @uifabric/merge-styles format into plain CSS classes or Vue.js inline styles and any human error that could have occurred during that process.

This library is in early alpha stage. The list of supported components is pretty small right now, but it will expand constantly.

Usage

Install using npm or yarn

npm install --save office-vue-fabric

or

yarn add office-vue-fabric

Then simply import the library to have global access to the Office Fabric components.

<template>
  <OfficeButton label="TestButton" primary></OfficeButton>
  <OfficeCheckbox label="TestCheckbox"></OfficeCheckbox>
  <OfficeIcon iconName="BingLogo"></OfficeIcon>
</template>

<script>
import "office-vue-fabric";

export default { name: 'app' }
</script>

Supported Components

Take a look at the Component Progress Issue to see which components are still missing!

• Checkbox
  • Model: :checked / @change
  • Props: disabled, label
• Button
  • Props: disabled, checked, primary, label
  • Info: <button> is exposed, so all events and props can be used
• Label
  • Props: disabled, required
  • Slot: text
• Icon
  • Props: iconName
• Image
  • Info: Take a look at the Official Documentation. I implemented all features and the syntax is very similar!
• TextField
  • Model: :text / @input
  • Props: label, disabled, multiline, borderless, required, resizable, underlined, inputClassName, iconProps, errorMessage, suffix, prefix, autoAdjustHeight, onChange, onFocus, onBlur
• ChoiceGroup
  • Props: TODO
  • Model: TODO
• Toggle
  • Model: :checked / @change
  • Props: label, onText, offText, disabled
• Link
  • Props: disabled, href
  • Info: <button> or <a> is exposed, so all events and props can be used
• Slider
  • Model: :value / @change
  • Props: disabled, vertical, showValue, min, max, step, label
• FocusTrapZone
  • Info: Take a look at the Official Documentation
• Overlay
  • Props: visible, isDarkThemed
• Layer
  • Info: Take a look at the Official Documentation
• Spinner
  • Props: size, label, labelPosition
• ProgressIndicator
  • Props: indeterminate, progressHidden, barHeight, percentageComplete
  • Slots: label, description

CI / CD

For information about Continuous Integration (CI) and Continuous Delivery (CD) take a look at the public Azure DevOps project.

Contribution

Feel free to contribute to this project.
Make sure to take a look at the React implementation provided by Microsoft.

License

This library is published under the MIT license. Usage of the fonts and icons referenced in Office UI Fabric is subject to the terms of the Microsoft Assets License Agreement. Some parts of the libraries @uifabric/utilities, @uifabric/styling and @uifabric/icons are copied into this repository and modified. These can be found in the folders /src/icons, /src/utility and /src/styling and have their own license, which can be found in the directories. In addition some code is taken from the Office UI Fabric React library and slightly modified. These files have a header with their respective license.