Drawer
Docs & Examples
Source
Stimulus Actions
Controller is present directly on the .x-drawer element, so you need to use Invoke action to invoke an action outside the controller.
show
Shows a drawer via showDrawer method.
Example
html
<body data-controller="invoke">
<button
class="x-button"
data-invoke-action="x-drawer#show"
data-invoke-target="#drawerLeftElement"
>
Show Drawer
</button>
<dialog class="x-drawer" data-controller="x-drawer" id="drawerLeftElement" data-action="scroll->x-drawer#scroll" inert>
<nav class="x-drawer-content">
Drawer content
</nav>
</dialog>
</body>Example Fetch
Fetches, appends and shows a drawer via showDrawer method.
html
<body data-controller="invoke">
<button
class="x-button"
data-invoke-action="x-drawer#show"
data-invoke-url="/drawer.json"
>
Fetch and Show Drawer
</button>
</body>close
Closes a drawer via closeDrawer method.
Example
html
<body>
<dialog class="x-drawer" data-controller="x-drawer" id="drawerLeftElement" data-action="scroll->x-drawer#scroll" inert>
<nav class="x-drawer-content">
Drawer content
<button class="x-button" data-action="x-drawer#close">Close drawer</button>
</nav>
</dialog>
</body>Stimulus Values
placement
- Type:
'left' | 'right' | 'top' | 'bottom' - Default:
'left'
html
<body>
<dialog class="x-drawer" data-controller="x-drawer" data-x-drawer-placement-value="bottom" id="drawerLeftElement" data-action="scroll->x-drawer#scroll" inert>
<nav class="x-drawer-content">
Drawer content
</nav>
</dialog>
</body>Remember to add correct classes on x-drawer for each of the placement directions.
- right -
after:-order-last - bottom -
flex-col after:-order-last - top -
flex-col
dialog
- Type:
'modal' | 'non-modal' | 'false' - Default:
'modal'
html
<body>
<dialog class="x-drawer" data-controller="x-drawer" data-x-drawer-dialog-value="non-modal" id="drawerLeftElement" data-action="scroll->x-drawer#scroll" inert>
<nav class="x-drawer-content">
Drawer content
</nav>
</dialog>
</body>