Grid in Office UI fabric js

Office UI fabric js library embedded a very old Fabric Core 5.0.1, so the grid example from Fabric Core will not work. All you have to do is change the class from “ms-lg2” to “ms-u-lg2”. Just go to https://github.com/OfficeDev/office-ui-fabric-core/releases , download the source and check all the class names you need.

<html>
<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>
<body class="ms-Fabric">

<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-u-lg2" style="background-color: #a6a6a6;">A</div>
<div class="ms-Grid-col ms-u-lg10" style="background-color: #a6a6a6;">B</div>
</div>
</div>

</body>
</html>

Post Views: 2,616

2017/12/17 by admin