How To Create A Fabric JS Component In SharePoint Online

Blog

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>