🌏 Translated with the assistance of DeepSeek and ChatGPT
Space
A component for adding spacing between multiple elements arranged together.
Basic Usage
Prevent elements from sticking together.
Submit this order?
Hide source code
Spacing Size
Set the spacing size via the margin property. Supports small, medium, large, or custom values and objects.
Small
Medium
Large
16px
x: 8px, y: 4px
Hide source code
Spacing Direction
Set the arrangement direction via the direction property. Supports horizontal and vertical.
Horizontal
Vertical
Hide source code
Main-axis Alignment
The justify property of Space sets the main-axis alignment.
Flex Start
Content
Content
Content
Content
Flex End
Content
Content
Content
Content
Center
Content
Content
Content
Content
Space Between
Content
Content
Content
Content
Space Around
Content
Content
Content
Content
Space Evenly
Content
Content
Content
Content
Hide source code
Cross-axis Alignment
The align property of Space sets the cross-axis alignment.
Center
Content
Content
Content
Content
Flex Start
Content
Content
Content
Content
Flex End
Content
Content
Content
Content
Stretch
Content
Content
Content
Content
Hide source code
API
SpaceProps
| Attribute | Type | Optional | Default | Description | Version |
|---|---|---|---|---|---|
| margin | 'small' | 'medium' | 'large' | number | { x?: number; y?: number } | True | 'medium' | Spacing size, can also be a number or object. | 0.0.0-beta |
| direction | 'horizontal' | 'vertical' | True | 'horizontal' | Direction of spacing arrangement, horizontal or vertical. | 0.0.0-beta |
| justify | 'start' | 'center' | 'end' | 'space-around' | 'space-between' | 'space-evenly' | True | 'start' | Main-axis alignment, based on CSS justify-content properties. | 0.0.0-beta |
| align | 'start' | 'center' | 'end' | 'stretch' | True | | Cross-axis alignment, based on the CSS align-items property. Defaults to 'center' when direction is 'horizontal', and to 'stretch' when direction is 'vertical'. | 0.0.0-beta |
| wrap | boolean | True | true | Whether to wrap automatically. | 0.0.0-beta |
| inline | boolean | True | false | Whether to use inline layout. | 0.0.0-beta |
SpaceSlots
| Slot | Parameter | Description | Version |
|---|---|---|---|
| default | | The Space's content. | 0.0.0-beta |