Presents content by sliding over the rest of the application, which is covered by a partially-transparent overlay. Best used for experiences that do not require explicit context for heavy-weight creation/edit/management tasks such as settings, multi-field forms, and permissions. For containers used for complex tasks that requires context, use a separate Pane alongside the existing experience such as a List/Details layout.
Panel
Medium Panel
Large panel
Large panel
Extra large panel
Extra extra large panel
State | Applied to | Result |
---|---|---|
.is-open |
.ms-Panel |
The panel is closed by default. Apply this class to open it. |
<head>
<link rel="stylesheet" href="fabric.min.css">
<link rel="stylesheet" href="fabric.components.min.css">
<script src="jquery-2.2.1.min.js"></script>
<script src="jquery.fabric.min.js"></script>
</head>
<script>
tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Dialog components on the page: <script>
$(document).ready(function() {
if ($.fn.Panel) {
$('.ms-Panel').Panel();
}
});
</script>