--- name: panel url: /panel title: Panel ---

Panels

Panels are frames that slide in from the top, left, bottom, or right of the screen and appear over the interface. Grid blocks can also transform into panels, allowing you to hide content off-canvas on smaller screens.



Basic HTML

Create a panel using the zf-panel directive. Each panel should have a unique ID you can use to target it.

×

This is a basic panel.

Basic Panel

Creating Panel Triggers

Panels use the same trigger directives used to open and close other components. Add the directive zf-open, zf-toggle, or zf-close to an element to create a trigger. The value of the directive should be the ID of the panel you want to target.

Open Panel Close Panel Toggle Panel
Close Panel

zf-close is a special case; if the element is inside the panel, you don't need to manually set the ID of the panel.

Links (any element with an href or ui-sref attribute) inside panels automatically close the panel when clicked.

Where Does it Go?

Panels should always anchor to blocks (.grid-block), not content blocks (.grid-content). To create a panel that sits on top of a scrolling chunk of content, position the panel adjacent the block, not inside.

Panel

Main Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Panel

Main Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit.


Panel Position

By default, panels anchor to the left by default, but they can also anchor to the top, right, or bottom as well. Add the position attribute to your panel to define a direction.

×

This is a top panel.

Top Right Bottom Left

Fixed Position

Panels are position: absolute, which means they anchor to the closest parent element that has a non-static position. Add the class panel-fixed to the panel to instead anchor it to the entire window.

×

This is a fixed panel.

Fixed Panel

If you'd rather not have the extra class, you can also just add position: fixed to an existing panel; that's all the class does!


Transforming Panel

A panel can transform into a standard grid-block on larger screens. This allows you to have sections of your app that hide off-canvas only on smaller devices, using the same HTML. To transition a panel to a block, use the standard grid-block and grid-content classes, but add in a breakpoint keyword.

To see this concept in action, resize your browser window to a smaller size. The sidebar to the left will collapse into a panel and hide off-screen. It can be opened and closed with a button at the top of every page.

× Toggle Sidebar

Note in the above example that we're hiding the "Toggle Sidebar" button on medium screens and larger. This is because at those sizes the sidebar is always visible, making the toggle button unnecessary.


Sass Mixins

Use these mixins to write a panel with a custom class.

.custom-panel { // Extend the panel selector to get basic structural styles @extend %panel-base; // Use the layout mixin to set the position and sizing @include panel-layout( $position: left, // Can be top, right, bottom, or left $size: default, // Can be any unit, or "default" to use the settings variables $shadow: 0 4px 10px black // The shadow will be auto-adjusted based on the position of the panel ); // Use the style mixin to define visual styles @include panel-style( $padding: 1rem, $background: #fff ); &.fixed { // Add position: fixed to anchor the panel to the window instead of the panel's parent position: fixed; } }

Sass Variables

You can customize panels with these variables in the _settings.scss file: