mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-23 14:29:22 -05:00
99 lines
2.8 KiB
Markdown
99 lines
2.8 KiB
Markdown
# Space
|
|
|
|
```rust demo
|
|
view! {
|
|
<Space>
|
|
<Button>"1"</Button>
|
|
<Button>"2"</Button>
|
|
<Button>"3"</Button>
|
|
</Space>
|
|
}
|
|
```
|
|
|
|
### Vertical
|
|
|
|
```rust demo
|
|
view! {
|
|
<Space vertical=true>
|
|
<Button>"1"</Button>
|
|
<Button>"2"</Button>
|
|
<Button>"3"</Button>
|
|
</Space>
|
|
}
|
|
```
|
|
|
|
### Gap
|
|
|
|
```rust demo
|
|
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
|
|
|
|
```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 |
|
|
| -------- | ----------------------------------- | -------------------- | ---------------------------------------- |
|
|
| 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. |
|