Repository files navigation

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

A Vue.js implementation of Office UI Fabric

This small demo gives an overview of all supported components.

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

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

This is achieved by utilizing the@uifabric/merge-styles librarytogether with some of the source code of@uifabric/utilities,@uifabric/styling and@uifabric/icons. This allows us utilize the sameTheme as theofficial 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 toconvert the styling from the@uifabric/merge-styles format intoplain 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.

Install using npm or yarn

npm install --save office-vue-fabricoryarn add office-vue-fabric

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

<template>  <OfficeButtonlabel="TestButton"primary></OfficeButton>  <OfficeCheckboxlabel="TestCheckbox"></OfficeCheckbox>  <OfficeIconiconName="BingLogo"></OfficeIcon></template><script>import"office-vue-fabric";exportdefault { name:'app' }</script>

Take a look at theComponent 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 theOfficial 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 theOfficial Documentation
• Overlay
  • Props: visible, isDarkThemed
• Layer
  • Info: Take a look at theOfficial Documentation
• Spinner
  • Props: size, label, labelPosition
• ProgressIndicator
  • Props: indeterminate, progressHidden, barHeight, percentageComplete
  • Slots: label, description

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

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

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 theMicrosoft 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 theOffice UI Fabric React library and slightly modified. These files have a header with their respective license.