thaw/demo_markdown/docs/space/mod.md
2024-03-17 11:40:20 +08:00

2.8 KiB

Space

view! {
    <Space>
        <Button>"1"</Button>
        <Button>"2"</Button>
        <Button>"3"</Button>
    </Space>
}

Vertical

view! {
    <Space vertical=true>
        <Button>"1"</Button>
        <Button>"2"</Button>
        <Button>"3"</Button>
    </Space>
}

Gap

view! {
    <Space gap=SpaceGap::Large>
        <Button>"1"</Button>
        <Button>"2"</Button>
        <Button>"3"</Button>
    </Space>
    <Space gap=SpaceGap::WH(36, 36)>
        <Button>"1"</Button>
        <Button>"2"</Button>
        <Button>"3"</Button>
    </Space>
}

Align

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

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
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.