Sliding drawer panel and main panel. In closed state, only the main area is visible.
Visibility of the drawer is explicitly controlled via modifiers, no implicit media-query magic.
The slide in/ out of the drawer is animated.
In this example, the drawer is closed and only the main panel is visible.
In this example, the drawer panel is open via the
and the inline style
left: 0; on the
This rule makes the main panel appear below the drawer panel.
This is intended for narrow viewports.
For wide viewports, the drawer can be shown next to the main panel just by removing the rule as in the example below.
There are no modifier classes for this as it requires highly dynamic control and should better handled programmatically in the web component.
The drawer panel can also be laid out to the right of the main panel
vclOpen: To open the panel.
vclClose: Must be toggled with
vclCloseto play animations properly.
vclDrawerRight: To lay-out the panel to the right of the main panel.
example.html on GH-pages.