thaw/demo_markdown/docs/drawer/mod.md

Drawer

let show = create_rw_signal(false);
let placement = create_rw_signal(DrawerPlacement::Top);

let open = Callback::new(move |new_placement: DrawerPlacement| {
    // Note: Since `show` changes are made in real time,
    // please put it in front of `show.set(true)` when changing `placement`.
    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

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	OptionalProp<MaybeSignal<String>>	Default::default()	Addtional classes for the drawer element.
show	Model<bool>		Whether to show drawer.
title	OptionalProp<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.