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.
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.
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.
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
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Panel
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
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.
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.
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!
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.
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.