@ahrowe/ui 0.1.25 → 0.1.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/CLAUDE.md +1 -0
- package/docs/Drawer.md +62 -0
- package/package.json +1 -1
package/docs/CLAUDE.md
CHANGED
package/docs/Drawer.md
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
# Drawer
|
|
2
|
+
|
|
3
|
+
**When to use:** Inline horizontal panel that collapses and expands by animating its width — side panels, navigation rails, detail/filter panes that slide open beside the main content. Unlike `Modal`, it lives in the normal layout flow (no portal, no backdrop) and pushes/sits beside its siblings.
|
|
4
|
+
|
|
5
|
+
**Import:** `import { Drawer } from '@ahrowe/ui'`
|
|
6
|
+
|
|
7
|
+
The drawer animates between a **closed** width (default `0`) and an **open** width (default the content's natural width). Its children stay mounted the whole time — when closed they're simply clipped (`overflow-x: hidden`), so state and scroll position are preserved across toggles.
|
|
8
|
+
|
|
9
|
+
```tsx
|
|
10
|
+
import { useState } from 'react';
|
|
11
|
+
import { Drawer } from '@ahrowe/ui';
|
|
12
|
+
|
|
13
|
+
function Example() {
|
|
14
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
15
|
+
return (
|
|
16
|
+
<div style={{ display: 'flex', height: '100%' }}>
|
|
17
|
+
<Drawer isOpen={isOpen}>
|
|
18
|
+
<nav style={{ width: 240 }}>
|
|
19
|
+
<a href="#">Dashboard</a>
|
|
20
|
+
<a href="#">Settings</a>
|
|
21
|
+
</nav>
|
|
22
|
+
</Drawer>
|
|
23
|
+
<main>
|
|
24
|
+
<button onClick={() => setIsOpen((o) => !o)}>Toggle panel</button>
|
|
25
|
+
</main>
|
|
26
|
+
</div>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
// Collapse to a fixed rail instead of fully closing (e.g. an icon-only nav rail)
|
|
33
|
+
<Drawer isOpen={isOpen} closedWidth="56px">
|
|
34
|
+
<SidebarNav collapsed={!isOpen} />
|
|
35
|
+
</Drawer>
|
|
36
|
+
|
|
37
|
+
// Pin the open width instead of using the content's natural width
|
|
38
|
+
<Drawer isOpen={isOpen} openedWidth="320px">
|
|
39
|
+
<FilterPanel />
|
|
40
|
+
</Drawer>
|
|
41
|
+
|
|
42
|
+
// Responsive open width
|
|
43
|
+
<Drawer isOpen={isOpen} openedWidth="90vw">
|
|
44
|
+
<DetailPane />
|
|
45
|
+
</Drawer>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
**Key props:**
|
|
49
|
+
|
|
50
|
+
| Prop | Type | Description |
|
|
51
|
+
|------|------|-------------|
|
|
52
|
+
| `isOpen` | `boolean` | Open/closed state (default `false`) |
|
|
53
|
+
| `closedWidth` | `string` | Width when closed — any CSS length (default `0`); use e.g. `'56px'` for a collapsed rail |
|
|
54
|
+
| `openedWidth` | `string` | Width when open — any CSS length (default: the content's measured natural width) |
|
|
55
|
+
| `children` | `ReactNode` | Panel content; stays mounted and is clipped while closed |
|
|
56
|
+
| `className` | `string` | Root element class |
|
|
57
|
+
|
|
58
|
+
**Notes:**
|
|
59
|
+
|
|
60
|
+
- It's an **inline** element with `height: 100%` and a `width` transition — place it in a flex/grid layout next to your main content; it doesn't overlay.
|
|
61
|
+
- When `openedWidth` is omitted, the open width tracks the content's `scrollWidth` via a `ResizeObserver`, so it grows/shrinks with dynamic content.
|
|
62
|
+
- For a full-screen overlay dialog instead, use `Modal`; for a collapsing scroll header, see `Overscroll`.
|