Use Office UI Fabric JS in Office Add-ins
This article walks you through the basics of using Fabric JS.
Add the Fabric CDN references
To reference Fabric from the CDN, add the following HTML code to your page.
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css"> <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css"> <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
Use Fabric JS UX components
Fabric JS provides several UX components, like buttons or checkboxes, that you can use in your add-in. The following is a list of the Fabric JS UX components that we recommend for use in an add-in. To use one of the Fabric components in your add-in, follow the link to the Fabric documentation, and then follow the instructions in Using this component.
- Button (Consider using the small button variant in your add-in. Add 16px of padding to small buttons to ensure a 40px minimum touch target on touch devices.)
- Date Picker (For an example that shows how to implement the Date Picker in an add-in, see the Excel Sales Tracker code sample.)
- List (Consider changing the component's default styles in the CSS.)
Updating your add-in to use Fabric JS
If you've been using a previous version of Office UI Fabric and you'd like to move to Fabric JS, make sure that you learn about, incorporate, and test the new components in your add-in. Keep the following points in mind to help you plan for your updates:
<Script>reference. All you need to do is initialize the Fabric component.
- Several components now provide functions that control the behavior of the UX component. For example, the checkbox control has a
togglefunction that switches between the checked and unchecked states.
- Some icon class names and styles have been updated.
- The most notable change is the use of the
<label>element in many components. The
<label>element controls the style of the component. You might have to update your UX code to use the
<label>element. For example, changing the value of the
<input>element's checked attribute on a Fabric JS checkbox has no effect on the checkbox. Instead, you use the
If you're looking for an end-to-end code sample that shows you how to use Fabric JS, we've got you covered. See the following resource:
If you're looking for code samples or documentation about a previous release of Fabric, see the following: