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>
© 2024 Better Solutions Limited. All Rights Reserved. © 2024 Better Solutions Limited TopPrevNext