logo

Space

Set components spacing.

When To Use

Avoid components clinging together and set a unified space.

Examples

Crowded components horizontal spacing.

expand code expand code

Crowded components vertical spacing.

Can set width: 100% fill a row.

expand code expand code

large, middle and small preset sizes.

Set the size to large and middle by setting size to large and middle respectively. If size is not set, the spacing is small.

expand code expand code

Custom spacing size.

expand code expand code

Config item align.

expand code expand code

Auto wrap line.

expand code expand code

Crowded components split.

expand code expand code

Space API#

Property Description Type Default Value
Align ParameterAlignment of items - start | end | center | baseline String --
Direction ParameterItem flow direction DirectionVHType DirectionVHType.Horizontal
Size ParameterSize of space between items OneOf<String, ValueTuple<String, String>> small
Wrap ParameterWrap items to multiple lines or not. Ignored when Direction is vertical. Boolean false
Split ParameterContent displayed in the space between items RenderFragment --
ChildContent ParameterContent of space - should contain SpaceItem elements RenderFragment --
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --

SpaceItem API#

Property Description Type Default Value
ChildContent ParameterChild content RenderFragment --
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --
Layout ReuseTabs
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.