Overview
A Dropdown is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop-down button. They are used to simplify the design and make a choice within the UI. When closed, only the selected item is visible. When users click the drop-down button, all the options become visible. To change the value, users open the list and click another value or use the arrow keys (up and down) to select a new value.
Using this Component
-
Confirm that you have references to Fabric's CSS and JavaScript on your page:
<link rel="stylesheet" href="fabric.min.css" /> <link rel="stylesheet" href="fabric.components.min.css" /> <script src="fabric.min.js"></script>
-
Copy the HTML from one of the samples below into your page. For example:
<div class="ms-Dropdown" tabindex="0"> <label class="ms-Label">Dropdown label</label> <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i> <select class="ms-Dropdown-select"> <option>Choose a sound&hellip;</option> <option>Dog barking</option> <option>Wind blowing</option> <option>Duck quacking</option> <option>Cow mooing</option> </select> </div>
-
Add the following
<script>
tag to your page, below the references to Fabric's JS, to instantiate all Dropdown components on the page:<script type="text/javascript"> var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown'); for (var i = 0; i < DropdownHTMLElements.length; ++i) { var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]); } </script>
-
Replace the sample HTML content with your content.
Variants
<div class="ms-Dropdown" tabindex="0">
<label class="ms-Label">Dropdown label</label>
<i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
<select class="ms-Dropdown-select">
<option>Choose a sound&hellip;</option>
<option>Dog barking</option>
<option>Wind blowing</option>
<option>Duck quacking</option>
<option>Cow mooing</option>
</select>
</div>
<script type="text/javascript">
var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
for (var i = 0; i < DropdownHTMLElements.length; ++i) {
var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
}
</script>
<div class="ms-Dropdown is-disabled" tabindex="0">
<label class="ms-Label">Dropdown label</label>
<i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
<select class="ms-Dropdown-select">
<option>Choose a sound&hellip;</option>
<option>Dog barking</option>
<option>Wind blowing</option>
<option>Duck quacking</option>
<option>Cow mooing</option>
</select>
</div>
<script type="text/javascript">
var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
for (var i = 0; i < DropdownHTMLElements.length; ++i) {
var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
}
</script>
States
State | Applied to | Result |
---|---|---|
.is-disabled | .ms-Dropdown |
Disables the dropdown.
|