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

feat: space component vertical prop

Browse source
This commit is contained in:
luoxiao 2023-10-04 22:48:08 +08:00
parent 187ab8fe8a
commit efe2307983
2 changed files with 28 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
gh-pages/src/pages/space/mod.rs
View file

@ -24,6 +24,23 @@ pub fn SpacePage() -> impl IntoView {
"" ""
</DemoCode> </DemoCode>
</Demo> </Demo>
<h3>"vertical"</h3>
<Demo>
<Space vertical=true>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
<DemoCode slot html=highlight_str!(r#"
<Space vertical=true>
<Button>"1"</Button>
<Button>"2"</Button>
<Button>"3"</Button>
</Space>
"#, "rust")>
""
</DemoCode>
</Demo>
<h3>"gap"</h3> <h3>"gap"</h3>
<Demo> <Demo>
<Space gap=SpaceGap::LARGE> <Space gap=SpaceGap::LARGE>

18
src/space/mod.rs
View file

@ -13,19 +13,23 @@ pub enum SpaceGap {
} }
#[component] #[component]
pub fn Space(#[prop(optional)] gap: SpaceGap, children: Children) -> impl IntoView { pub fn Space(
#[prop(optional)] gap: SpaceGap,
#[prop(optional)] vertical: bool,
children: Children,
) -> impl IntoView {
let class_name = mount_style("space", || style_sheet_str!("./src/space/space.css")); let class_name = mount_style("space", || style_sheet_str!("./src/space/space.css"));
let gap = match gap { let gap = match gap {
SpaceGap::SMALL => "gap: 4px 8px".into(), SpaceGap::SMALL => "4px 8px".into(),
SpaceGap::MEDIUM => "gap: 8px 12px".into(), SpaceGap::MEDIUM => "8px 12px".into(),
SpaceGap::LARGE => "gap: 12px 16px".into(), SpaceGap::LARGE => "12px 16px".into(),
SpaceGap::NUMBER(size) => format!("gap: {size}px {size}px"), SpaceGap::NUMBER(size) => format!("{size}px {size}px"),
SpaceGap::TUPLE(x, y) => format!("gap: {x}px {y}px"), SpaceGap::TUPLE(x, y) => format!("{x}px {y}px"),
}; };
view! { view! {
class=class_name, class=class_name,
<div class="melt-space" style=format!("{gap};")> <div class="melt-space" style:gap={gap} style:flex-direction=if vertical { "column" } else { "row" }>
{ {
children().nodes.into_iter().map(|node| { children().nodes.into_iter().map(|node| {
view! { view! {