Drawer
Source
Example CSS
css
@import "winduum/src/components/drawer/props/content.css" layer(theme);
@import "winduum/src/components/drawer/props/default.css" layer(theme);
@import "winduum/src/components/drawer/content.css" layer(utilities);
@import "winduum/src/components/drawer/default.css" layer(utilities);
/* Example customization */
@layer theme {
:root, :host {
--x-drawer-background-color-opacity: 85%;
}
}Winduum CSS Code
winduum/src/components/drawer/props/content.css
css
:root, :host {
--x-drawer-content-background-color: var(--color-body-primary);
--x-drawer-content-padding-block: 2rem;
--x-drawer-content-padding-inline: 1.5rem;
--x-drawer-content-inline-size: 100%;
--x-drawer-content-block-size: 100%;
}winduum/src/components/drawer/props/default.css
css
:root, :host {
--x-drawer-background-color-opacity: 75%;
}winduum/src/components/drawer/content.css
css
.x-drawer-content {
inline-size: var(--x-drawer-content-inline-size);
block-size: var(--x-drawer-content-block-size);
background-color: var(--x-drawer-content-background-color);
flex-shrink: 0;
scroll-snap-align: end;
}winduum/src/components/drawer/default.css
css
.x-drawer {
z-index: var(--x-drawer-z-index, var(--z-index-30));
background-color:
color-mix(
in var(--x-drawer-background-color-space, srgb),
var(--color-dark) calc(var(--background-color-opacity, 0) * var(--x-drawer-background-color-opacity)),
var(--x-drawer-background-color-mix, transparent)
);
position: fixed;
inset: 0;
display: flex;
overflow: auto hidden;
scrollbar-width: none;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
&:not([open]), &::backdrop {
display: none;
}
&::-webkit-scrollbar {
display: none;
}
&::after {
content: "";
min-inline-size: 100vw;
scroll-snap-align: end;
}
&.flex-col {
overflow: hidden auto;
&::after {
min-block-size: 100dvh;
}
}
}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>