Introduction of Office UI Fabric JS
Fabric JS is a JavaScript front-end framework, which provides visuals-focused components to extend, re-work and use in your Office and Office 365 experiences. Fabric JS uses styles from Office UI Fabric Core project. Fabric JS is a collection of responsive, mobile-first styles and tools designed to make it quick and simple for you to create Web experiences, using Office Design language.
Steps to create a Fabric JS component in SharePoint Online are given below.
-
Navigate to SharePoint Online site.
-
Edit the page and add Script Editor Webpart.
-
Add the code snippet given below and save the page.
- <link href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.min.css" rel="stylesheet"/>
- <link href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.components.min.css" rel="stylesheet"/>
- <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/js/fabric.min.js"></script>
- <button class="ms-Button ms-Button--primary"><span class="ms-Button-label">Create Account</span></button>
- <script type="text/javascript">
- var ButtonElements = document.querySelectorAll(".ms-Button");
- for (var i = 0; i < ButtonElements.length; i++) {
- new fabric['Button'](ButtonElements[i], function() {
- alert("Clicked Create Account Button"); });
- }
- </script>
Result
Button component is displayed, as shown below,
![]()
Summary
In this blog, you have seen Fabric JS component in SharePoint Online.
Reference
- https://dev.office.com/fabric-js/Components/Button/Button.html