Sliding drawer and main panel. In closed state, only the main area is visible.
Visibility of the drawer is controlled via modifiers. The margin of the content must be set programmatically according to the width of the drawer.
The slide in/ out of the drawer is animated.
In this example, the drawer panel is open via the
and the inline style
margin-left: 256px; on the
This rule makes the main panel appear below the drawer panel. This is intended for narrow viewports.
In this example, the drawer is closed and only the main panel is visible.
The drawer panel can also be laid out to the right of the main panel
vclDrawerOpen: To open the panel.
vclDrawerBackdropVisible: Must be toggled for backdrop animation
vclDrawerRight: Drawer is rendered on the right side
vclDrawerAnimations: Enables drawer animations
example.html on GH-pages.