Space

Set components spacing.
Import
Source components/space
Docs Edit this page

When To Use#

  • Avoid components clinging together and set a unified space.
  • Use <nz-space-compact> when child form components are compactly connected and the border is collapsed.

The difference with Flex component is:

  • Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns.
  • Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of child elements in vertical or horizontal direction, and provides more flexibility and control.

Examples

Basic Usage

Crowded components horizontal spacing.

      Loading...
Card

Card content

Card content

Card

Card content

Card content

Vertical Space

Crowded components vertical spacing.

      Loading...
Link
Space Size

large, middle and small preset sizes.

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

      Loading...
center
Block
start
Block
end
Block
baseline
Block
Align

Config item align.

      Loading...
Link
Customize Size

Custom spacing size.

      Loading...
Wrap

Auto wrap line.

      Loading...
Split

Crowded components split.

      Loading...




Zhejianggggg

Zhejianggggg

Option1




Option1-1Option1-2
Between
Sign Up
Please select

leaf 1-0-0

Http://.com$
$
Compact Mode

Compact Mode for form component.

      Loading...


Button Compact Mode

Button component compact example.

      Loading...
Vertical Compact Mode

Vertical Mode for Space.Compact, support Button only.

      Loading...

API#

nz-space#

PropertyDescriptionTypeDefaultGlobal Config
[nzSize]The space sizeNzSpaceSize | NzSpaceSize[]'small'✅
[nzDirection]The space direction'vertical' | 'horizontal''horizontal'
[nzAlign]Align items'start' | 'end' | 'baseline' | 'center'-
[nzWrap]Auto wrap line, when horizontal effectivebooleanfalse
[nzSplit]Set splitTemplateRef | string-

Interfaces#

type NzSpaceSize = 'small' | 'middle' | 'large' | number;

nz-space-compact#

Use <nz-space-compact> when child form components are compactly connected and the border is collapsed. The supported components are：

  • Button
  • Cascader
  • DatePicker
  • Input
  • Select
  • TimePicker
  • TreeSelect
参数说明类型默认值支持全局配置
[nzBlock]Option to fit width to its parent's widthbooleanfalse
[nzDirection]Set direction of layout'vertical' | 'horizontal''horizontal'
[nzSize]Set child component size'large' | 'small' | 'default''default'