English
Basic Drawer
Below is a drawer example that is shown by default (via show on drawer). Drawer includes support for a header with a close button and an optional body and footer classes for some initial padding. We recommand that you include drawer headers with dismiss button whenever possible, or provide an explicit dismiss button.
Basic Drawer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.
Drawer Without Backdrop
Use [--overlay-backdrop:false] attribute to disable the default backdrop of drawer.
Drawer With Static Backdrop
Change the data-backdrop attribute to static to disable the backdrop close functionality.
Drawer Placements
Use drawer-left, drawer-right, drawer-top and drawer-bottom modifier classes to set the drawer placement. Default is drawer-left
Drawer Start
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.
Drawer End
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.
Drawer Top
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.
Drawer Bottom
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.
Controlled Drawer
To control the drawer via javascript, use createDrawer() global function to initialize the drawer with default options.
Controlled Drawer
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.
Disable Drawer Keypress
Set data-keyboard attribute to false to disable the ESC close functionality of drawer.
Disable Drawer Keypress
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iure tempora a blanditiis inventore voluptatibus cupiditate, consectetur maiores architecto deleniti omnis voluptatem facilis officiis odio harum quasi quae atque necessitatibus.