adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: drawer adds mount prop

Browse source
This commit is contained in:
luoxiao 2024-02-05 14:58:39 +08:00 • committed by luoxiaozero
parent 96d5d3f337
commit e361d86c4b
2 changed files with 49 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
demo_markdown/docs/drawer/mod.md
View file

@ -22,6 +22,21 @@ view! {
}
```
### Customize display area
```rust demo
let show = create_rw_signal(false);
view! {
<div style="position: relative; height: 200px; background-color: #0078ff88;">
<Button on_click=move |_| show.set(true)>"Open"</Button>
<Drawer show mount=DrawerMount::None>
"Current position"
</Drawer>
</div>
}
```
### Drawer Props
| Name | Type | Default | Desciption |
@ -32,4 +47,6 @@ view! {
| 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. |

36
thaw/src/drawer/mod.rs
View file

@ -12,7 +12,8 @@ pub fn Drawer(
#[prop(optional, into)] placement: MaybeSignal<DrawerPlacement>,
#[prop(default = MaybeSignal::Static("520px".to_string()), into)] width: MaybeSignal<String>,
#[prop(default = MaybeSignal::Static("260px".to_string()), into)] height: MaybeSignal<String>,
#[prop(default = MaybeSignal::Static("2000".to_string()), into)] z_index: MaybeSignal<String>,
#[prop(default = 2000.into(), into)] z_index: MaybeSignal<i16>,
#[prop(optional, into)] mount: DrawerMount,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
children: Children,
) -> impl IntoView {
@ -24,8 +25,17 @@ pub fn Drawer(
css_vars
});
view! {
<Teleport>
#[component]
fn DrawerInnr(
show: Model<bool>,
title: OptionalProp<MaybeSignal<String>>,
placement: MaybeSignal<DrawerPlacement>,
z_index: MaybeSignal<i16>,
class: OptionalProp<MaybeSignal<String>>,
css_vars: Memo<String>,
children: Children,
) -> impl IntoView {
view! {
<div
class="thaw-drawer-container"
style=move || if show.get() { format!("z-index: {}", z_index.get()) } else { "display: none".to_string() }
@ -42,7 +52,18 @@ pub fn Drawer(
<Card title>{children()}</Card>
</div>
</div>
</Teleport>
}
}
match mount {
DrawerMount::None => view! {
<DrawerInnr show title placement z_index class css_vars children />
},
DrawerMount::Body => view! {
<Teleport>
<DrawerInnr show title placement z_index class css_vars children />
</Teleport>
},
}
}
@ -65,3 +86,10 @@ impl DrawerPlacement {
}
}
}
#[derive(Default)]
pub enum DrawerMount {
None,
#[default]
Body,
}