Packages
mishka_chelekom
0.0.9-beta.2
0.0.10-alpha.5
0.0.10-alpha.4
0.0.10-alpha.3
0.0.10-alpha.2
0.0.10-alpha.1
0.0.9
0.0.9-rc.2
0.0.9-rc.1
0.0.9-beta.5
0.0.9-beta.4
0.0.9-beta.3
0.0.9-beta.2
0.0.9-beta.1
0.0.9-alpha.20
0.0.9-alpha.18
0.0.9-alpha.17
0.0.9-alpha.16
0.0.9-alpha.15
0.0.9-alpha.14
0.0.9-alpha.13
0.0.9-alpha.12
0.0.9-alpha.11
0.0.9-alpha.10
0.0.9-alpha.9
0.0.9-alpha.8
0.0.9-alpha.7
0.0.9-alpha.6
0.0.9-alpha.5
0.0.9-alpha.4
0.0.9-alpha.3
0.0.9-alpha.2
0.0.9-alpha.1
0.0.8
0.0.8-rc.2
0.0.8-rc.1
0.0.8-beta.5
0.0.8-beta.4
0.0.8-beta.3
0.0.8-beta.2
0.0.8-beta.1
0.0.8-alpha.4
0.0.8-alpha.3
0.0.8-alpha.2
0.0.8-alpha.1
0.0.7
0.0.6
0.0.6-alpha.2
0.0.6-alpha.1
0.0.5
0.0.5-beta.2
0.0.5-beta.1
0.0.5-alpha.12
0.0.5-alpha.11
0.0.5-alpha.10
0.0.5-alpha.9
0.0.5-alpha.8
0.0.5-alpha.7
0.0.5-alpha.6
0.0.5-alpha.5
0.0.5-alpha.4
0.0.5-alpha.3
0.0.5-alpha.2
0.0.5-alpha.1
0.0.4
0.0.4-beta.3
0.0.4-beta.2
0.0.4-beta.1
0.0.4-alpha.9
0.0.4-alpha.8
0.0.4-alpha.7
0.0.4-alpha.6
0.0.4-alpha.5
0.0.4-alpha.4
0.0.4-alpha.3
0.0.4-alpha.2
0.0.4-alpha.1
0.0.3
0.0.3-alpha.3
0.0.3-alpha.2
0.0.3-alpha.1
0.0.2
0.0.2-rc.2
0.0.2-rc.1
0.0.2-beta.4
0.0.2-beta.3
0.0.2-beta.2
0.0.2-beta.1
0.0.2-alpha.3
0.0.2-alpha.2
0.0.2-alpha.1
0.0.1
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
Current section
Files
Jump to
Current section
Files
usage-rules/headless/drawer.md
# drawer (headless)
An unstyled, focus-trapped panel that slides in from an edge — same behavior as `dialog`
(WAI-ARIA Dialog-Modal pattern), with a `side`.
## Generate
`mix mishka.ui.gen.headless drawer` → `lib/<app>_web/components/headless/drawer.ex` (wires the
`FocusTrap` JS engine).
## Anatomy
Root `div[phx-hook="FocusTrap"][data-side]`. Parts (via `data-part`): `trigger`, `backdrop`
(auto, `aria-hidden`), `popup` (`role="dialog"` `aria-modal` `data-side`), `title`,
`description`, `close`. Put `data-close` on a button to close.
## ARIA & keyboard
Escape closes; Tab is trapped inside the popup; focus returns to the opener on close. Backdrop
click closes (unless `data-close-on-outside="false"`).
## State
Paired-presence `data-open`/`data-closed` on root + popup (toggled by `FocusTrap`); `data-side`
(left/right/top/bottom) for your slide animation.
## Example
```heex
<.drawer id="filters" side="right">
<:trigger>Filters</:trigger>
<:title>Filters</:title>
<:description>Refine the results.</:description>
<p>…filter controls…</p>
<:close><button data-close>Done</button></:close>
</.drawer>
```
Attrs: `id` (req), `open`, `side` (default `right`), `labelledby`, `describedby`, `class`, `rest`.
## Styling
Ships no colors. Pin the popup to an edge and animate off the `data-side` + `data-open`/`data-closed`
state, e.g. `.chelekom-drawer__popup[data-side=right]{ right:0; … }`.