Drawer
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 data-backdrop="false" attribute to disable the default backdrop of drawer.
Drawer Without Backdrop
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 With Static Backdrop
Change the data-backdrop attribute to static to disable the backdrop close
functionality.
Static Backdrop
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 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.