HTML Controls

In the html file you need to reference the Fabric UI libraries using the link tags.
Referencing the "fabric.min.css" will mean
Referencing the "fabric.components.min.css" will mean


index.html

<!DOCTYPE html> 
<html>
<head>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.css"
                       type="text/css"/>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.components.min.css"
                       type="text/css"/>
</head>

  <body>
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-ChoiceField" style="padding-left:15px">
  <input id="demo-checkbox1" class="ms-ChoiceField-input" type="checkbox">
  <label for="demo-checkbox1" class="ms-ChoiceField-field">
     <span class="ms-Label">Print on every page</span>
  </label>
</div>
<div class="ms-ChoiceField" style="padding-left:15px">
  <input id="demo-checkbox2" class="ms-ChoiceField-input" type="checkbox">
  <label for="demo-checkbox2" class="ms-ChoiceField-field"><span class="ms-Label">Selected</span></label>
</div>
<div class="ms-ChoiceField" style="padding-left:15px">
  <input id="demo-checkbox3" class="ms-ChoiceField-input" type="checkbox">
  <label for="demo-checkbox3" class="ms-ChoiceField-field"><span class="ms-Label">Selected</span></label>
</div>
<div class="ms-ChoiceField" style="padding-left:15px">
  <input id="demo-checkbox4" class="ms-ChoiceField-input" type="checkbox">
  <label for="demo-checkbox4" class="ms-ChoiceField-field"><span class="ms-Label">Selected</span></label>
</div>
</div>
</div>
<div style="padding-left:15px">
<button class="ms-Button ms-Button--primary" style="width:200px">
  <span class="ms-Button-label">Create account</span>
  <span class="ms-Button-description">Description of the action this button takes</span>
</button>
</div>
  </body>
</html>


© 2020 Better Solutions Limited. All Rights Reserved. © 2020 Better Solutions Limited TopPrevNext