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: Tag adds align and justify prop (#139)

Browse source
This commit is contained in:
luoxiaozero 2024-03-17 11:40:20 +08:00 • committed by GitHub
parent 12273fc7c4
commit dc1f9842a2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 107 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
demo_markdown/docs/space/mod.md
View file

@ -39,6 +39,54 @@ view! {
}
```
### Align
```rust demo
view! {
<Space vertical=true>
<Space align=SpaceAlign::Start>
<Button style="height: 60px">"Start"</Button>
<Button style="height: 40px">"Start"</Button>
<Button>"Start"</Button>
</Space>
<Space align=SpaceAlign::Center>
<Button style="height: 60px">"Center"</Button>
<Button style="height: 40px">"Center"</Button>
<Button>"Center"</Button>
</Space>
<Space align=SpaceAlign::End>
<Button style="height: 60px">"End"</Button>
<Button style="height: 40px">"End"</Button>
<Button>"End"</Button>
</Space>
</Space>
}
```
### Justify
```rust demo
view! {
<Space vertical=true>
<Space justify=SpaceJustify::SpaceAround>
<Button>"SpaceAround"</Button>
<Button>"SpaceAround"</Button>
<Button>"SpaceAround"</Button>
</Space>
<Space justify=SpaceJustify::Center>
<Button>"Center"</Button>
<Button>"Center"</Button>
<Button>"Center"</Button>
</Space>
<Space justify=SpaceJustify::End>
<Button>"End"</Button>
<Button>"End"</Button>
<Button>"End"</Button>
</Space>
</Space>
}
```
### Space Props
| Name | Type | Default | Description |
@ -46,4 +94,6 @@ view! {
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the space element. |
| vertical | `bool` | `false` | Whether to lay out vertically. |
| gap | `SpaceGap` | `SpaceGap::Medium` | Space's gap. |
| align | `OptionalMaybeSignal<SpaceAlign>` | `None` | Vertical arrangement. |
| justify | `OptionalMaybeSignal<SpaceJustify>` | `None` | Horizontal arrangement. |
| children | `Children` | | Space's content. |

58
thaw/src/space/mod.rs
View file

@ -1,4 +1,4 @@
use crate::utils::{class_list::class_list, mount_style, OptionalProp};
use crate::utils::{class_list::class_list, mount_style, OptionalMaybeSignal, OptionalProp};
use leptos::*;
#[derive(Default)]
@ -16,6 +16,8 @@ pub enum SpaceGap {
pub fn Space(
#[prop(optional)] gap: SpaceGap,
#[prop(optional)] vertical: bool,
#[prop(optional, into)] align: OptionalMaybeSignal<SpaceAlign>,
#[prop(optional, into)] justify: OptionalMaybeSignal<SpaceJustify>,
#[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
children: Children,
) -> impl IntoView {
@ -32,6 +34,8 @@ pub fn Space(
<div
class=class_list!["thaw-space", class.map(| c | move || c.get())]
style:gap=gap
style:align-items=move || align.get().map(|a| a.as_str())
style:justify-content=move || justify.get().map(|j| j.as_str())
style:flex-direction=if vertical { "column" } else { "row" }
>
@ -46,3 +50,55 @@ pub fn Space(
</div>
}
}
#[derive(Clone)]
pub enum SpaceAlign {
FlexStart,
FlexEnd,
Start,
End,
Center,
Baseline,
Stretch,
}
impl SpaceAlign {
fn as_str(&self) -> &'static str {
match self {
Self::FlexStart => "flex-start",
Self::FlexEnd => "flex-end",
Self::Start => "start",
Self::End => "end",
Self::Center => "center",
Self::Baseline => "baseline",
Self::Stretch => "stretch",
}
}
}
#[derive(Clone)]
pub enum SpaceJustify {
FlexStart,
FlexEnd,
Start,
End,
Center,
SpaceAround,
SpaceBetween,
SpaceEvenly,
}
impl SpaceJustify {
fn as_str(&self) -> &'static str {
match self {
Self::FlexStart => "flex-start",
Self::FlexEnd => "flex-end",
Self::Start => "start",
Self::End => "end",
Self::Center => "center",
Self::SpaceAround => "space-around",
Self::SpaceBetween => "space-between",
Self::SpaceEvenly => "space-evenly",
}
}
}