Fabric JS

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

  1. 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>
    		
  2. 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&amp;hellip;</option>
        <option>Dog barking</option>
        <option>Wind blowing</option>
        <option>Duck quacking</option>
        <option>Cow mooing</option>
      </select>
    </div>
  3. 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>
  4. Replace the sample HTML content with your content.

Variants

Default Dropdown
<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&amp;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>
Disabled Dropdown
<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&amp;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.