mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-23 22:39:23 -05:00
52 lines
2.4 KiB
Markdown
52 lines
2.4 KiB
Markdown
# Drawer
|
|
|
|
```rust demo
|
|
let show = create_rw_signal(false);
|
|
let placement = create_rw_signal(DrawerPlacement::Top);
|
|
|
|
let open = Callback::new(move |new_placement: DrawerPlacement| {
|
|
placement.set(new_placement);
|
|
show.set(true);
|
|
});
|
|
|
|
view! {
|
|
<ButtonGroup>
|
|
<Button on_click=Callback::new(move |_| open.call(DrawerPlacement::Top))>"Top"</Button>
|
|
<Button on_click=Callback::new(move |_| open.call(DrawerPlacement::Right))>"Right"</Button>
|
|
<Button on_click=Callback::new(move |_| open.call(DrawerPlacement::Bottom))>"Bottom"</Button>
|
|
<Button on_click=Callback::new(move |_| open.call(DrawerPlacement::Left))>"Left"</Button>
|
|
</ButtonGroup>
|
|
<Drawer title="Title" show placement>
|
|
"Hello"
|
|
</Drawer>
|
|
}
|
|
```
|
|
|
|
### Customize display area
|
|
|
|
```rust demo
|
|
let show = create_rw_signal(false);
|
|
|
|
view! {
|
|
<div style="position: relative; overflow: hidden; height: 200px; background-color: #0078ff88;">
|
|
<Button on_click=move |_| show.set(true)>"Open"</Button>
|
|
<Drawer show mount=DrawerMount::None width="50%">
|
|
"Current position"
|
|
</Drawer>
|
|
</div>
|
|
}
|
|
```
|
|
|
|
### Drawer Props
|
|
|
|
| Name | Type | Default | Desciption |
|
|
| --------- | ------------------------------ | ------------------------ | ----------------------------------------- |
|
|
| class | `MaybeSignal<String>` | `Default::default()` | Addtional classes for the drawer element. |
|
|
| show | `MaybeSignal<bool>` | | Whether to show drawer. |
|
|
| title | `MaybeSignal<String>` | `Default::default()` | Drawer title. |
|
|
| placement | `MaybeSignal<DrawerPlacement>` | `DrawerPlacement::Right` | Drawer placement. |
|
|
| width | `MaybeSignal<String>` | `520px` | Drawer width. |
|
|
| height | `MaybeSignal<String>` | `260px` | Drawer height. |
|
|
| z_index | `MaybeSignal<i16>` | `2000` | z-index of the drawer. |
|
|
| mount | `DrawerMount` | `DrawerMount::Body` | Container node of the drawer. |
|
|
| children | `Children` | | Drawer content. |
|