The mod.drawer() method automatically attaches event listeners for a <div data-mod-drawer="example" class="mod-drawer"></div> tag by targeting its data-mod-drawer attribute and handles interaction events for the element.
Method API
// Using mod(-plus).iife.min.js
window.mod.drawer(drawer_id: string) => object;
// Using mod(-plus).esm.min.js
import { drawer } from 'path/to/mod(-plus).esm.min.js';
drawer(drawer_id: string) => object;Usage Examples
Use the following usage examples to guide your implementation.
Examples Use Global JavaScript
For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.
Drawer HTML
<div data-mod-drawer="example" class="mod-drawer">
<header>
<h2>Drawer Name</h2>
<i data-mod-drawer-close class="mod-icon-x"></i>
</header>
<div class="mod-drawer-content">
<p>Drawer content goes here...</p>
</div>
<footer>
<button class="mod-button mod-button-brand mod-button-block">Save Changes</button>
<button type="button" data-mod-drawer-close class="mod-button mod-button-block">Cancel</button>
</footer>
</div>Drawer JavaScript
window.mod.drawer.open('example');
// NOTE: Only necessary if you're trying to close the drawer outside of itself.
// Mod automatically provides a close mechanism in the drawer.
window.mod.drawer.close('example');API
- drawer_id string required
-
A string matching the value of a drawer element's
data-mod-drawerattribute to target.