Modals
Standard Modal
Click the button to open a standard modal dialog.
<button w-modal-trigger="demo-modal">Open</button>
<modal id="demo-modal" title="Modal Title">
Modal content here...
</modal>
Modal Sizes
<modal id="small-modal" title="Small" size="modal-sm">...</modal>
<modal id="large-modal" title="Large" size="modal-lg">...</modal>
Confirmation Dialog
For destructive actions that need user confirmation.
<confirm-modal
id="confirm-modal"
title="Delete Item?"
message="This cannot be undone."
confirmText="Delete"
confirmClass="btn-danger"
/>
Drawer (Slide-in Panel)
Drawers slide in from the edge of the screen.
<w-drawer id="drawer-right" title="Right Drawer" position="right">
Drawer content here...
</w-drawer>
<!-- Positions: right, left, top, bottom -->
<!-- Sizes: drawer-sm, drawer-lg, drawer-xl -->
Drawer Sizes
Closing Modals & Drawers
Modals and drawers can be closed by:
- Clicking the X button
- Clicking the backdrop (outside the modal/drawer)
- Pressing the ESC key
- Any element with
w-modal-closeattribute
Example Modal
This is a standard modal with a title and content area.
You can put any content here including forms, images, or other components.
Small Modal
A smaller modal for simple messages.
Large Modal
A larger modal for more complex content.
This gives you more space to work with when you need to display forms, tables, or detailed information.
Delete this item?
Right Drawer
This drawer slides in from the right side of the screen.
It's great for navigation menus, settings panels, or detail views.
Left Drawer
This drawer slides in from the left side of the screen.
Commonly used for mobile navigation menus.
Small Drawer
A smaller drawer for quick actions.
Large Drawer
A larger drawer for more complex content.
This gives you more space for forms, lists, or detailed information.