Overview
Bootstrap Drawer is an exclusive plugin of Metronic that provides a simple, smooth and lightweight option for hidden sidebars that are most used for navigations, shopping carts and a whole lot more.
Usage
Bootstrap Drawer's global style and scripts bundles and are globally included in all pages.
<link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/js/scripts.bundle.js"></script>Initialization
- Bootstrap Drawer's Javascript is globally initialized and added into our script bundle.
- To initialize it, the drawer view component needs to be added within the page with a button trigger to toggle it.
- Bootstrap Drawer instances can also be created programmatically. See below for more info.
Basic
There are 2 parts when adding in a drawer component. There's the trigger and the view component. The trigger can be anything with a specific
The view component will then have a few HTML attributes that will set it's configuration options. The key attributes are:
id which needs to be defined in the view component.The view component will then have a few HTML attributes that will set it's configuration options. The key attributes are:
data-kt-drawerdata-kt-drawer-activatedata-kt-drawer-toggledata-kt-drawer-closedata-kt-drawer-width
<!--begin::Trigger button-->
<button id="kt_drawer_example_basic_button" class="btn btn-primary">Toggle basic drawer</button>
<!--end::Trigger button-->
<!--begin::View component-->
<div
id="kt_drawer_example_basic"
class="bg-white"
data-kt-drawer="true"
data-kt-drawer-activate="true"
data-kt-drawer-toggle="#kt_drawer_example_basic_button"
data-kt-drawer-close="#kt_drawer_example_basic_close"
data-kt-drawer-width="500px"
>
...
</div>
<!--end::View component-->Advanced
Bootstrap Drawer component can be easily configured by adding additional HTML attributes to the view component. For example, adding
Adding
Click here for more info on the options.
data-kt-drawer-direction
will indicate which side the drawer will slide out from (start for left and end for right).Adding
data-kt-drawer-width will set the drawer view component's width and it's also very responsive and uses
Bootstrap's default breakpoints to switch widths on certain screen sizes. For example: {default:'300px', 'md': '500px'}
indicates that the drawer view component has 500px width on screens larger than md and 300px for every other screen size.Click here for more info on the options.
<!--begin::Trigger button-->
<button id="kt_drawer_example_basic_button" class="btn btn-primary">Toggle advanced drawer</button>
<!--end::Trigger button-->
<!--begin::View component-->
<div
id="kt_drawer_example_advanced"
class="bg-white"
data-kt-drawer="true"
data-kt-drawer-activate="true"
data-kt-drawer-toggle="#kt_drawer_example_advanced_button"
data-kt-drawer-close="#kt_drawer_example_advanced_close"
data-kt-drawer-name="docs"
data-kt-drawer-overlay="true"
data-kt-drawer-width="{default:'300px', 'md': '500px'}"
data-kt-drawer-direction="start"
>
...
</div>
<!--end::View component-->Adhoc Dismiss
Add a button or link within Bootstrap Drawer view component with the HTML attributes
data-kt-drawer-dismiss="true" to close the current drawer.
<!--begin::Trigger button-->
<button id="kt_drawer_example_dismiss_button" class="btn btn-primary">Toggle drawer with dismiss button</button>
<!--end::Trigger button-->
<!--begin::View component-->
<div
id="kt_drawer_example_dismiss"
class="bg-white"
data-kt-drawer="true"
data-kt-drawer-activate="true"
data-kt-drawer-toggle="#kt_drawer_example_dismiss_button"
data-kt-drawer-close="#kt_drawer_example_dismiss_close"
data-kt-drawer-overlay="true"
data-kt-drawer-width="{default:'300px', 'md': '500px'}"
>
...
<!--begin::Dismiss button-->
<button class="btn btn-light-danger" data-kt-drawer-dismiss="true">Dismiss drawer</button>
<!--end::Dismiss button-->
...
</div>
<!--end::View component-->Permanent
Use
data-kt-drawer-permanent="true" option to prevent drawer from closing on overlay click.
<!--begin::Drawer-->
<div
id="kt_drawer_example_permanent"
class="bg-white"
data-kt-drawer="true"
data-kt-drawer-activate="true"
data-kt-drawer-toggle="#kt_drawer_example_permanent_toggle"
data-kt-drawer-close="#kt_drawer_example_permanent_close"
data-kt-drawer-overlay="true"
data-kt-drawer-permanent="true"
data-kt-drawer-width="{default:'300px', 'md': '500px'}"
>
<!--begin::Card-->
<div class="card rounded-0 w-100">
<!--begin::Card header-->
<div class="card-header pe-5">
<!--begin::Title-->
<div class="card-title">
Permanent Drawer
</div>
<!--end::Title-->
<!--begin::Card toolbar-->
<div class="card-toolbar">
<!--begin::Close-->
<div class="btn btn-sm btn-icon btn-active-light-primary" id="kt_drawer_example_permanent_close">
<span class="svg-icon fs-1">
...
</span>
</div>
<!--end::Close-->
</div>
<!--end::Card toolbar-->
</div>
<!--end::Card header-->
<!--begin::Card body-->
<div class="card-body hover-scroll-overlay-y">
...
</div>
<!--end::Card body-->
</div>
<!--end::Card-->
</div>
<!--end::Drawer-->
Permanent Drawer
External Toggle
Bootstrap Drawers can also be toggled without binding the button
id with the drawer view component by adding data-kt-drawer-show="true" and data-kt-drawer-target with the drawer view component id.
<!--begin::Trigger button-->
<button class="btn btn-primary me-3" data-kt-drawer-show="true" data-kt-drawer-target="#kt_drawer_example_basic">Toggle basic drawer</button>
<button class="btn btn-primary" data-kt-drawer-show="true" data-kt-drawer-target="#kt_drawer_example_advanced">Toggle advanced drawer</button>
<!--end::Trigger button-->Markup Reference
Scroll uses both CSS and HTML attributes to define the scroll configuration. Here are the references for each below
HTML Attribute references
| Name | Type | Description |
|---|---|---|
data-kt-drawer
|
mandatory
|
Defines the element as a drawer view component. |
data-kt-drawer-activate
|
optional
|
Enables the drawer view component. Accepts
true and false values. Default value is set to true.
This is also compatible with Bootstrap's standard breakpoint sizing
For example: eg: sm, md, lg, xl. For responsive options,
this attribute value must be written as a JSON string to specify values for multiple responsive breakpoints.
{default: false, md: true} indicates that the drawer is activated only when width on screens larger than md breakpoint size.
|
data-kt-drawer-toggle
|
optional
|
Defines the toggle button id.
|
data-kt-drawer-close
|
optional
|
Defines the close button id within the drawer view component.
|
data-kt-drawer-name
|
mandatory
|
Defines the drawer view component's name for identification and used to append a special attribute to Body element to indicate the drawer's shown state. |
data-kt-drawer-overlay
|
optional
|
Toggles the drawer view component as an overlay element or not.
Accepts true and false values.
|
data-kt-drawer-escape
|
optional
|
Closes the active drawer on escape key press.
Accepts true and false values. Default value is false
|
data-kt-drawer-permanent
|
optional
|
Prevents drawer from closing on overlay click
Accepts true and false values.
Default value is set to false.
|
data-kt-drawer-width
|
optional
|
Specifies the drawer view component's width in either a
px or % value. For example: 400px or 25%
This is also compatible with Bootstrap's standard breakpoint sizing (eg:
For example: sm, md, lg, xl) with similar px or % values. For responsive options, this attribute value must be written as an object string to enable multiple responsive breakpoints.
{default:'300px', 'md': '500px'} indicates that the drawer view component has 500px width on screens larger than md and 300px for every other screen size. |
data-kt-drawer-direction
|
optional
|
Defines the starting direction for the drawer view component. Accepts start for left and end for right values. Default value is set to end.
|
Please note that a drawer view component is a simple wrapper element that may contain all other components or elements within it. All HTML attributes should be added into the main wrapping element only.
Methods
All Bootstrap Drawer components are initialized automatically, however the following are the Bootstrap Drawer's functionality methods for more control.
| Name | Description |
|---|---|
| Static Methods | |
createInstances(DOMString selector)
|
Initializes Drawer instances by selector. Default value of selector is [data-kt-drawer="true"].
This method can be used to initialize dynamicly populated Drawer instances(e.g: after Ajax request).
|
getInstance(DOMElement element)
|
Get the Drawer instance created
|
hideAll(DOMElement skip, DOMString selector)
|
Hides all drawer elements that match the selector and skips one if provided.
skip is optional and selector optional with default value [data-kt-drawer="true"].
|
updateAll(DOMString selector)
|
Updates all drawer elements that match the selector. selector optional with default value [data-kt-drawer="true"].
|
| Public Methods | |
KTDrawer(DOMElement element, Object options)
|
Constructs a new instance of KTDrawer class and initializes a Drawer control:
Remove data-kt-drawer="true" attribute to avoid lazy initialization. Option overlay replicates data-kt-drawer-overlay option functionaliy as described above.
|
toggle()
|
Toggle the drawer view component's state.
|
show()
|
Show/open the drawer view component if the it's current closed. Does nothing if it's already opened.
|
hide()
|
Hide/close the drawer view component if the it's current opened. Does nothing if it's already closed.
|
isShown()
|
Return the drawer view component's display state. Returns true or false.
|
update()
|
Forces the drawer component to update with any modifications done.
|
goElement()
|
Returns the selected drawer instance.
|
destroy()
|
Removes the component instance from element.
|
Events
Below are few events for hooking into the Bootstrap Drawer functionality.
| Event Type | Description |
|---|---|
kt.drawer.toggle
|
This event fires on when the drawer is about to get toggled.
|
kt.drawer.toggled
|
This event fires on when the drawer is done toggling.
|
kt.drawer.hide
|
This event fires on when the drawer starts to hide.
|
kt.drawer.after.hidden
|
This event fires on when the drawer is completely hidden.
|
kt.drawer.show
|
This event fires on when the drawer starts to show.
|
kt.drawer.shown
|
This event fires on when the drawer is completely shown.
|
trigger(drawer, event)
|
Triggers a specific event to the selected drawer.
|
2024©
Keenthemes
