Components - Office UI Fabric JS
This package is no longer being updated
Also known as Office UI Fabric JavaScript or Office UI Fabric JS.
These are JQuery plugins that have been available since August 2015.
Most of the components have an accompanying javascript file that is required to make them work.
Instead of using these components you should use the Core Framework alongside either React, AngularJS or Fabric iOS.
Nuget Package Name - OfficeUIFabricJS
NPM Package Name - office-ui-fabric-js
This package is no longer being updated on Nuget or NPM and the last version was released in February 2017 (1.4.0).
github.com/OfficeDev/office-ui-fabric-js
npm install office-ui-fabric-js
Latest Version - 2017 February (1.4.0)
The latest version is 1.4.0 although this only available for backwards compatibility and is not being updated.
This latest version uses Core Framework 5.0.1.
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css"
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/5.0.1/css/fabric.min.css"
List Of Components
Some of the components used JQuery.
All of these component filenames have JQuery prefixes, except for two of them, Breadcumb and Spinner.
src="https://code.jquery.com/jquery.2.1.4.min.js"
src="https://code.jquery.com/fabric/jquery.fabric.min.js"
2017 February - 1.4.0
Uses Core Framework 5.0.1
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css"
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/5.0.1/css/fabric.min.css"
2016 December - 1.3.0
Uses Core Framework 5.0.1
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.3.0/css/fabric.components.min.css"
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/5.0.1/css/fabric.min.css"
2016 November - 1.2.0
Uses Core Framework 5.0.1
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.components.min.css"
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/5.0.1/css/fabric.min.css"
2016 September - 1.1.0
Uses Core Framework 5.0.1
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.1.0/css/fabric.components.min.css"
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/5.0.1/css/fabric.min.css"
2016 August - 1.0.0
The core styles have been removed so the library now only contains the JQuery components.
The version numbers were reset because there is now a dependency on the Core Framework.
Uses Core Framework 4.0.0
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.0.0/css/fabric.components.min.css"
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/4.0.0/css/fabric.min.css"
2016 May - 2.6.1
2.6.3 - Released February 2017 (Patch)
2.6.2 - Released October 2016 (Patch)
2.6.0 - Released May 2016
2.5.0 - Released May 2016
This was the last version of the OfficeUIFabric which combined core styles and JQuery components.
href="https://appsforoffice.microsoft.com/fabric/2.6.3/fabric.min.css"
href="https://appsforoffice.microsoft.com/fabric/2.6.3/fabric.components.min.css"
npm install office-ui-fabric
2016 April - 2.4.1
2.4.0 - Released April 2016
2.3.0 - Released April 2016
href="https://appsforoffice.microsoft.com/fabric/2.4.1/fabric.min.css"
href="https://appsforoffice.microsoft.com/fabric/2.4.1/fabric.components.min.css"
2016 March - 2.2.0
href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.css"
href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.components.min.css"
2016 March - 2.1.0
href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css"
href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css"
2016 February - 2.0.1
2.0.0 - Released February 2016
href="https://appsforoffice.microsoft.com/fabric/2.0.1/fabric.min.css"
href="https://appsforoffice.microsoft.com/fabric/2.0.1/fabric.components.min.css"
2016 January - 1.2.1
1.2.0 - Released January 2016
href="https://appsforoffice.microsoft.com/fabric/1.2.1/fabric.min.css"
href="https://appsforoffice.microsoft.com/fabric/1.2.1/fabric.components.min.css"
2015 October - 1.1.3
href="https://appsforoffice.microsoft.com/fabric/1.1.3/fabric.min.css"
href="https://appsforoffice.microsoft.com/fabric/1.1.3/fabric.components.min.css"
2015 August - 1.0.0
href="https://appsforoffice.microsoft.com/fabric/1/0/fabric.min.css"
href="https://appsforoffice.microsoft.com/fabric/1/0/fabric.components.min.css"
ms-Button
<button id="ID_button" class="ms-Button">
<span id="ID_label" class="ms-Button-label">label text</span>
<span id="ID_description" class="ms-Button-description">description text</span>
</button>
Primary Button
<button class="ms-Button--primary">
Command Button
Includes an icon
<button class="ms-Button--command">
Compound Button
Includes an extra descriptive line below
<button class="ms-Button--compound">
Hero Button
<button class="ms-Button--hero">
aria-hidden
This attribute prevents screen readers from reading the icon.
If you are using an icon-only navigation bar, you should apply an aria-label to the button
ms-ChoiceField
ms-ChoiceField - radio
Also known as a radio button.
<div class="ms-ChoiceField">
<input type="radio" id="better_radio1">
<label for="ms-ChoiceField-field">
<span class="ms-Label"
my text
</span>
</label>
</div>
To display a radio button that is disabled and cannot be enabled use
<input class="ms-ChoiceField-input" type="radio" id="better_radio1" disabled>
ms-ChoiceField - checkbox
<div class="ms-ChoiceField">
<input type="checkbox" id="better_checkbox1">
<label for="ms-ChoiceField-field">
<span class="ms-Label">
my text
</span>
</label>
</div>
To display a checked box that cannot be unchecked use
<input class="ms-ChoiceField-input" type="checkbox" id="better_checkbox1" checked="">
Disabled Attribute
<input class="ms-ChoiceField-input">
<input type="checkbox disabled">
Is Required Class
This adds a red star
<label for="ms-ChoiceField-field">
<span class="ms-Label is-required">
mytext
</span>
</label>
ms-CommandBar
<div class="ms-CommandBar">
<div class="ms-CommandBarSearch">
<div class="ms-CommandBar-SideCommands">
<div class="ms-CommandBarItem">
ms-DatePicker
requires PickADate.js or PickerDate.js ?
http://amsul.ca/pickadate.js/date/
<div class="ms-DatePicker" id="ID_datepicker">
** insert **
</div>
<script type="text/javascript" src="picker.date.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {};
if ($.fn.DatePicker) {
$('.ms-DatePicker'}.DatePicker(options);
}
});
</script>
ms-Dialog
<button class="ms-Button js-DialogAction--open" data-target=".ms-Dialog--sample">
<span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
<span class="ms-Button-label">Open Dialog</span>
<span class="ms-Button-description">Opens the Sample Dialog</span>
</button>
<div class="ms-Dialog ms-Dialog--sample">
<div class="ms-Overlay ms-Overlay--dark js-DialogAction--close"></div>
<div class="ms-Dialog-main">
<button class="ms-Dialog-button ms-Dialog-button--close js-DialogAction--close">
<i class="ms-Icon ms-Icon--x"></i>
</button>
<div class="ms-Dialog-header">
<p class="ms-Dialog-title">All emails together</p>
</div>
<div class="ms-Dialog-inner">
<div class="ms-Dialog-content">
<p class="ms-Dialog-subText">Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.</p>
<div class="ms-ChoiceField">
<input class="ms-ChoiceField-input" id="demo-checkbox-unselected1" type="checkbox">
<label class="ms-ChoiceField-field" for="demo-checkbox-unselected1"><span class="ms-Label">Option1</span></label>
</div>
<div class="ms-ChoiceField">
<input class="ms-ChoiceField-input" id="demo-checkbox-unselected2" type="checkbox">
<label class="ms-ChoiceField-field" for="demo-checkbox-unselected2"><span class="ms-Label">Option2</span></label>
</div>
</div>
<div class="ms-Dialog-actions">
<div class="ms-Dialog-actionsRight">
<button class="ms-Dialog-action ms-Button ms-Button--primary">
<span class="ms-Button-label">Save</span>
</button>
<button class="ms-Dialog-action ms-Button">
<span class="ms-Button-label">Cancel</span>
</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
if ($.fn.Dialog) {
$('.ms-Dialog'}.Dialog();
}
});
</script>
Modal vs Modeless
ms-Dropdown
<div class="ms-Dropdown" id="ID_dropdown" tabindex="0">
<label class="ms-Label">My Label</label>
<i class="ms-Dropdown-caretDown ms-Icon ms-Icon--caretDown"></i>
<select class="ms-Dropdown-select">
<option>Option 1</option>
<option selected>Option 2</option>
<option>Option 3</option>
</select>
</div>
<script type="text/javascript">
$(document).ready(function() {
if ($.fn.Dropdown) {
$('.ms-Dropdown'}.Dropdown();
}
});
</script>
ms-Label
why is it wrapped in a ms-TextField ?
<div class="ms-TextField">
<label id="ID_label" class="ms-Label">MyLabel</label>
</div>
<div class="ms-TextField is-disabled">
<div class="ms-TextField is-required">
ms-Link
<a class="ms-Link" id="ID_link" href="www.bettersolutions.com">Office Development</a>
<a class="ms-Link ms-Link--hero" id="ID_link" href="www.bettersolutions.com">Hero Link</a>
ms-List
<ul class="ms-List" id="ID_list">
<li class="ms-ListItem is-selectable is-selected ">
<span class="ms-ListItem-primaryText">Item 1</span>
</li>
<li class="ms-ListItem is-selectable">
<span class="ms-ListItem-primaryText">Item 2</span>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
if ($.fn.ListItem) {
$('.ms-ListItem'}.ListItem();
}
});
</script>
ms-MessageBanner
bottom of the taskpane
<div class="ms-MessageBanner"
style="position:absolute; bottom:0">
<div class="ms-MessageBanner-content">
<div class="ms-MessageBanner-text">
<div class="ms-MessageBanner-clipper">
<div class="ms-font-m-plus ms-fontWeight-semibold"
id="---"></div>
<div class="ms-font-m ms-fontWeight-semilight"
id="---"></div>
</div>
</div>
<button class="ms-MessageBanner-expand"
style="display:none">
<i class="ms-Icon ms-Icon--chevronsDown"></i>
</button>
</div class="ms-MessageBanner-action"> </div>
</div>
<button class="ms-MessageBanner-close"
<i class="ms-Icon ms-Icon--x"></i>
</button>
</div>
<script type="text/javascript">
function showBanner(id) {
if typeof( fabric !=="undefined") {
if ('MessageBanner' in fabric) {
var elm=document.getElementById(id);
var component = new fabric['MessageBanner'](elm);
component.showBanner();
}
}
}
</script>
ms-Pivot
Also known as a Tab
'https://codepen.io/phillipharding/pen/ONVRXR
<ul class="ms-Pivot">
<li class="ms-Pivot-link is-selected">Step 1</li>
<li class="ms-Pivot-link">Step 2</li>
<li class="ms-Pivot-link">Step 3</li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
if ($.fn.Pivot) {
$('.ms-Pivot'}.Pivot();
}
});
</script>
ms-Table
<div class="ms-Table" id="ID_table">
<div class="ms-Table-row">
<span class="ms-Table-cell">CheckBox</span>
<span class="ms-Table-cell">Header 1</span>
<span class="ms-Table-cell">Header 2</span>
</div>
<div class="ms-Table-row">
<span class="ms-Table-rowcheck"></span>
<span class="ms-Table-cell">Text 1</span>
<span class="ms-Table-cell">Text 2</span>
</div>
</div>
ms-TextField
Also known as Text Box
The span-description is optional
<div class="ms-TextField">
<input class="ms-TextField-field" type="text" id="ID_textbox">
<label>mytext</label>
<span>description</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
if ($.fn.TextField) {
$('.ms-TextField'}.TextField();
}
});
</script>
Multi Line
ms-TextField--multiline
Placeholder
ms-TextField--placeholder
Underline
ms-TextField--underlined
ms-Toggle
<div class="ms-Toggle">
<input type="checkbox" Id="ID_toggle" class="ms-Toggle-input"/>
<label for="something" class="ms-Toggle-field">
<span class="ms-Label ms-Label--off">My Off Text</span>
<span class="ms-Label ms-Label--on">My On Text</span>
</label>
</div>
© 2024 Better Solutions Limited. All Rights Reserved. © 2024 Better Solutions Limited TopPrev