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.

Panel

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

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-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>

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>

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