diff --git a/demo_markdown/docs/space/mod.md b/demo_markdown/docs/space/mod.md index 5ef940a..0749b60 100644 --- a/demo_markdown/docs/space/mod.md +++ b/demo_markdown/docs/space/mod.md @@ -39,6 +39,54 @@ view! { } ``` +### Align + +```rust demo +view! { + + + + + + + + + + + + + + + + + +} +``` + +### Justify + +```rust demo +view! { + + + + + + + + + + + + + + + + + +} +``` + ### Space Props | Name | Type | Default | Description | @@ -46,4 +94,6 @@ view! { | class | `OptionalProp>` | `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` | `None` | Vertical arrangement. | +| justify | `OptionalMaybeSignal` | `None` | Horizontal arrangement. | | children | `Children` | | Space's content. | diff --git a/thaw/src/space/mod.rs b/thaw/src/space/mod.rs index eb4da14..fab7b9e 100644 --- a/thaw/src/space/mod.rs +++ b/thaw/src/space/mod.rs @@ -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, + #[prop(optional, into)] justify: OptionalMaybeSignal, #[prop(optional, into)] class: OptionalProp>, children: Children, ) -> impl IntoView { @@ -32,6 +34,8 @@ pub fn Space(
@@ -46,3 +50,55 @@ pub fn Space(
} } + +#[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", + } + } +}