Space
Space
Set components spacing.
Importimport { Space } from "antd"; |
Sourcecomponents/space |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
antd@4.24.0 Supported).Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| align | Align items | start | end |center |baseline | - | 4.2.0 |
| classNames | Semantic className | Record<SemanticDOM, string> | - | |
| direction | The space direction | vertical | horizontal | horizontal | 4.1.0 |
| size | The space size | Size | Size[] | small | 4.1.0 | Array: 4.9.0 |
| split | Set split | ReactNode | - | 4.7.0 |
| styles | Semantic style | Record<SemanticDOM, CSSProperties> | - | |
| wrap | Auto wrap line, when horizontal effective | boolean | false | 4.9.0 |
'small' | 'middle' | 'large' | number
Use Space.Compact when child form components are compactly connected and the border is collapsed. The supported components are：
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| block | Option to fit width to its parent's width | boolean | false | 4.24.0 |
| direction | Set direction of layout | vertical | horizontal | horizontal | 4.24.0 |
| size | Set child component size | large | middle | small | middle | 4.24.0 |
Crowded components horizontal spacing.
Crowded components vertical spacing.
Use size to set the spacing, Three sizes are preset: small, middle, large. You can also customize the spacing. If size is not set, the spacing is small.
Config item align.
Auto wrap line.
Crowded components split.
Compact Mode for form component.
Button component compact example.
Vertical Mode for Space.Compact, support Button only.
Card content
Card content
Card content
Card content
Card content
Card content
