@vcl/drawer v0.6.3
VCL drawer
Sliding sidebar.
Features
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.
Usage
In this example, the drawer is closed and only the main panel is visible.
In this example, the drawer panel is open via the vclOpen
modifier
and the inline style left: 0;
on the vclDrawerMainPanel
.
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
using the vclDrawerRight
modifier.
Classes
vclDrawer
vclDrawerDrawerPanel
vclDrawerMainPanel
vclDrawerMainPanelContent
vclDrawerMainPanelCover
Modifiers
vclOpen
: To open the panel.vclClose
: Must be toggled withvclClose
to play animations properly.vclDrawerRight
: To lay-out the panel to the right of the main panel.
Variables
--drawer-drawer-panel-color
--drawer-drawer-panel-bg-color
--drawer-drawer-panel-width
--drawer-main-panel-cover-bg-color
Demo
example.html on GH-pages.
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago