thaw/demo_markdown/docs/drawer/mod.md
luoxiaozero 9eda9757d3
Feat/drawer (#71)
* feat: add drawer component

* feat: drawer style

* fix(demo): nightly Callback
2024-01-07 19:20:08 +08:00

35 lines
1.8 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| {
show.set(true);
placement.set(new_placement);
});
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>
}
```
### 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. |
| children | `Children` | | Drawer content. |