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