Office UI Fabric JS
Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend using the newer version Office UIĀ Fabric React as your front-end framework.

Overview

Panels are modal UI overlays that provide contextual app information. They often request some kind of creation or management action from the user. Panels are paired with the Overlay component, also known as a Light Dismiss. The Overlay blocks interactions with the app view until dismissed either through clicking or tapping on the Overlay or by selecting a close or completion action within the Panel.

Examples of experiences that use Panels

  • Member or group list creation or management
  • Document list creation or management
  • Permissions creation or management
  • Settings creation or management
  • Multi-field forms

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-PanelExample">
      <button class="ms-Button">
        <span class="ms-Button-label">Open Panel</span> 
      </button>
      <div class="ms-Panel">
        <button class="ms-Panel-closeButton ms-PanelAction-close">
          <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
        </button>
        <div class="ms-Panel-contentInner">
          <p class="ms-Panel-headerText">Panel</p>
          <div class="ms-Panel-content">
            <span class="ms-font-m">Content goes here</span> 
          </div>
        </div>
      </div>
    </div>
  3. Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all Panel components on the page:

    <script type="text/javascript">
      var PanelExamples = document.getElementsByClassName("ms-PanelExample");
      for (var i = 0; i < PanelExamples.length; i++) {
        (function() {
          var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
          var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
          PanelExampleButton.addEventListener("click", function(i) {
            new fabric['Panel'](PanelExamplePanel);
          });
        }());
      }
    </script>
  4. Replace the sample HTML content with your content.

Variants

Default Panel
<div class="ms-PanelExample">
  <button class="ms-Button">
    <span class="ms-Button-label">Open Panel</span> 
  </button>
  <div class="ms-Panel">
    <button class="ms-Panel-closeButton ms-PanelAction-close">
      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
    </button>
    <div class="ms-Panel-contentInner">
      <p class="ms-Panel-headerText">Panel</p>
      <div class="ms-Panel-content">
        <span class="ms-font-m">Content goes here</span> 
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
  for (var i = 0; i < PanelExamples.length; i++) {
    (function() {
      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
      PanelExampleButton.addEventListener("click", function(i) {
        new fabric['Panel'](PanelExamplePanel);
      });
    }());
  }
</script>

Panel

Content goes here
Medium Panel
<div class="ms-PanelExample">
  <button class="ms-Button">
    <span class="ms-Button-label">Open Panel</span> 
  </button>
  <div class="ms-Panel ms-Panel--md">
    <button class="ms-Panel-closeButton ms-PanelAction-close">
      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
    </button>
    <div class="ms-Panel-contentInner">
      <p class="ms-Panel-headerText">Medium Panel</p>
      <div class="ms-Panel-content">
        <span class="ms-font-m">Content goes here</span> 
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
  for (var i = 0; i < PanelExamples.length; i++) {
    (function() {
      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
      PanelExampleButton.addEventListener("click", function(i) {
        new fabric['Panel'](PanelExamplePanel);
      });
    }());
  }
</script>

Medium Panel

Content goes here
Large Panel
<div class="ms-PanelExample">
  <button class="ms-Button">
    <span class="ms-Button-label">Open Panel</span> 
  </button>
  <div class="ms-Panel ms-Panel--lg">
    <button class="ms-Panel-closeButton ms-PanelAction-close">
      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
    </button>
    <div class="ms-Panel-contentInner">
      <p class="ms-Panel-headerText">Large panel</p>
      <div class="ms-Panel-content">
        <span class="ms-font-m">Content goes here</span> 
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
  for (var i = 0; i < PanelExamples.length; i++) {
    (function() {
      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
      PanelExampleButton.addEventListener("click", function(i) {
        new fabric['Panel'](PanelExamplePanel);
      });
    }());
  }
</script>

Large panel

Content goes here
Large Fixed Panel
<div class="ms-PanelExample">
  <button class="ms-Button">
    <span class="ms-Button-label">Open Panel</span> 
  </button>
  <div class="ms-Panel ms-Panel--lg ms-Panel--fixed">
    <button class="ms-Panel-closeButton ms-PanelAction-close">
      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
    </button>
    <div class="ms-Panel-contentInner">
      <p class="ms-Panel-headerText">Large panel</p>
      <div class="ms-Panel-content">
        <span class="ms-font-m">Content goes here</span> 
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
  for (var i = 0; i < PanelExamples.length; i++) {
    (function() {
      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
      PanelExampleButton.addEventListener("click", function(i) {
        new fabric['Panel'](PanelExamplePanel);
      });
    }());
  }
</script>

Large panel

Content goes here
Extra Large Panel
<div class="ms-PanelExample">
  <button class="ms-Button">
    <span class="ms-Button-label">Open Panel</span> 
  </button>
  <div class="ms-Panel ms-Panel--xl">
    <button class="ms-Panel-closeButton ms-PanelAction-close">
      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
    </button>
    <div class="ms-Panel-contentInner">
      <p class="ms-Panel-headerText">Extra large panel</p>
      <div class="ms-Panel-content">
        <span class="ms-font-m">Content goes here</span> 
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
  for (var i = 0; i < PanelExamples.length; i++) {
    (function() {
      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
      PanelExampleButton.addEventListener("click", function(i) {
        new fabric['Panel'](PanelExamplePanel);
      });
    }());
  }
</script>

Extra large panel

Content goes here
Extra Extra Large Panel
<div class="ms-PanelExample">
  <button class="ms-Button">
    <span class="ms-Button-label">Open Panel</span> 
  </button>
  <div class="ms-Panel ms-Panel--xxl">
    <button class="ms-Panel-closeButton ms-PanelAction-close">
      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
    </button>
    <div class="ms-Panel-contentInner">
      <p class="ms-Panel-headerText">Extra extra large panel</p>
      <div class="ms-Panel-content">
        <span class="ms-font-m">Content goes here</span> 
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
  for (var i = 0; i < PanelExamples.length; i++) {
    (function() {
      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
      PanelExampleButton.addEventListener("click", function(i) {
        new fabric['Panel'](PanelExamplePanel);
      });
    }());
  }
</script>

Extra extra large panel

Content goes here
Left Panel
<div class="ms-PanelExample">
  <button class="ms-Button">
    <span class="ms-Button-label">Open Panel</span> 
  </button>
  <div class="ms-Panel ms-Panel--left">
    <button class="ms-Panel-closeButton ms-PanelAction-close">
      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
    </button>
    <div class="ms-Panel-contentInner">
      <p class="ms-Panel-headerText">Left Panel</p>
      <div class="ms-Panel-content">
        <span class="ms-font-m">Content goes here</span> 
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
  for (var i = 0; i < PanelExamples.length; i++) {
    (function() {
      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
      PanelExampleButton.addEventListener("click", function(i) {
        new fabric['Panel'](PanelExamplePanel);
      });
    }());
  }
</script>

Left Panel

Content goes here

States

State Applied to Result
.is-open .ms-Panel
The panel is closed by default. Apply this class to open it.

Methods

Name Parameters Description
dismiss(callback)

callback: {Function} Optional callback function

Dismisses the component and executes callback function