Fabric JS

Overview

Presents a number of related items, either as a vertical list or in a grid.

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:

    <ul class="ms-List">
      <li class="ms-ListItem is-unread is-selectable" tabindex="0">
        <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
        <span class="ms-ListItem-secondaryText">Meeting notes</span> 
        <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
        <span class="ms-ListItem-metaText">2:42p</span> 
        <div class="ms-ListItem-selectionTarget"></div>
        <div class="ms-ListItem-actions">
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Mail"></i>
          </div>
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Delete"></i>
          </div>
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Flag"></i>
          </div>
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Pinned"></i>
          </div>
        </div>
      </li>
      <li class="ms-ListItem is-unread is-selectable" tabindex="0">
        <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
        <span class="ms-ListItem-secondaryText">Meeting notes</span> 
        <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
        <span class="ms-ListItem-metaText">2:42p</span> 
        <div class="ms-ListItem-selectionTarget"></div>
        <div class="ms-ListItem-actions">
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Mail"></i>
          </div>
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Delete"></i>
          </div>
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Flag"></i>
          </div>
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Pinned"></i>
          </div>
        </div>
      </li>
      <li class="ms-ListItem is-selectable" tabindex="0">
        <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
        <span class="ms-ListItem-secondaryText">Meeting notes</span> 
        <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
        <span class="ms-ListItem-metaText">2:42p</span> 
        <div class="ms-ListItem-selectionTarget"></div>
        <div class="ms-ListItem-actions">
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Mail"></i>
          </div>
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Delete"></i>
          </div>
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Flag"></i>
          </div>
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Pinned"></i>
          </div>
        </div>
      </li>
      <li class="ms-ListItem is-selectable" tabindex="0">
        <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
        <span class="ms-ListItem-secondaryText">Meeting notes</span> 
        <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
        <span class="ms-ListItem-metaText">2:42p</span> 
        <div class="ms-ListItem-selectionTarget"></div>
        <div class="ms-ListItem-actions">
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Mail"></i>
          </div>
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Delete"></i>
          </div>
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Flag"></i>
          </div>
          <div class="ms-ListItem-action">
            <i class="ms-Icon ms-Icon--Pinned"></i>
          </div>
        </div>
      </li>
    </ul>
  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all List components on the page:

    <script type="text/javascript">
      var ListElements = document.querySelectorAll(".ms-List");
      for (var i = 0; i < ListElements.length; i++) {
        new fabric['List'](ListElements[i]);
      }
    </script>
  4. Replace the sample HTML content with your content.

Variants

Default List
<ul class="ms-List">
  <li class="ms-ListItem is-unread is-selectable" tabindex="0">
    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
    <span class="ms-ListItem-metaText">2:42p</span> 
    <div class="ms-ListItem-selectionTarget"></div>
    <div class="ms-ListItem-actions">
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Mail"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Delete"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Flag"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Pinned"></i>
      </div>
    </div>
  </li>
  <li class="ms-ListItem is-unread is-selectable" tabindex="0">
    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
    <span class="ms-ListItem-metaText">2:42p</span> 
    <div class="ms-ListItem-selectionTarget"></div>
    <div class="ms-ListItem-actions">
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Mail"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Delete"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Flag"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Pinned"></i>
      </div>
    </div>
  </li>
  <li class="ms-ListItem is-selectable" tabindex="0">
    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
    <span class="ms-ListItem-metaText">2:42p</span> 
    <div class="ms-ListItem-selectionTarget"></div>
    <div class="ms-ListItem-actions">
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Mail"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Delete"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Flag"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Pinned"></i>
      </div>
    </div>
  </li>
  <li class="ms-ListItem is-selectable" tabindex="0">
    <span class="ms-ListItem-primaryText">Alton Lafferty</span> 
    <span class="ms-ListItem-secondaryText">Meeting notes</span> 
    <span class="ms-ListItem-tertiaryText">Today we discussed the importance of a, b, and c in regards to d.</span> 
    <span class="ms-ListItem-metaText">2:42p</span> 
    <div class="ms-ListItem-selectionTarget"></div>
    <div class="ms-ListItem-actions">
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Mail"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Delete"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Flag"></i>
      </div>
      <div class="ms-ListItem-action">
        <i class="ms-Icon ms-Icon--Pinned"></i>
      </div>
    </div>
  </li>
</ul>
<script type="text/javascript">
  var ListElements = document.querySelectorAll(".ms-List");
  for (var i = 0; i < ListElements.length; i++) {
    new fabric['List'](ListElements[i]);
  }
</script>
  • Alton Lafferty Meeting notes Today we discussed the importance of a, b, and c in regards to d. 2:42p
  • Alton Lafferty Meeting notes Today we discussed the importance of a, b, and c in regards to d. 2:42p
  • Alton Lafferty Meeting notes Today we discussed the importance of a, b, and c in regards to d. 2:42p
  • Alton Lafferty Meeting notes Today we discussed the importance of a, b, and c in regards to d. 2:42p