Office UI Fabric in Office Add-ins
If you are building an add-in, we encourage you to use Office UI Fabric to create your user experience. Using Office UI Fabric is optional.
The following sections explain how to get started using Fabric to meet your requirements.
Use Fabric Core: icons, fonts, colors
Fabric Core contains basic elements of the design language such as icons, colors, type, and grid. Fabric core is framework independent. Both Fabric React and Fabric JS use Fabric Core.
To get started using Fabric Core:
Add the CDN reference to the HTML on your page.
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css">
Use Fabric icons and fonts.
To use a Fabric icon, include the "i" element on your page, and then reference the appropriate classes. You can control the size of the icon by changing the font size. For example, the following code shows how to make an extra-large table icon that uses the themePrimary (#0078d7) color.
<i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>
To find more icons that are available in Office UI Fabric, use the search feature on the Icons page. When you find an icon to use in your add-in, be sure to prefix the icon name with
Use Fabric Components
Fabric provides a variety of UX components that you can use to build your add-in, including the following types of components:
- Input components - for example, Button, Checkbox, and Toggle
- Navigation components - for example, Pivot and Breadcrumb
- Notification components - for example, MessageBar and Callout
Not all Fabric components are recommended for use in add-ins. Here is a list of Fabric React UX components that we recommend for use in an add-in:
|React||Using Office UI Fabric React in Office Add-ins|
|Angular||See ngOfficeUIFabric, which is a community project with Angular 1.5 directives, and Consider wrapping Fabric components with Angular 2 components|