RUI.next

Navigation-Layout
Space

Space

Space is a wrap of item boxes.

<Space>
  <PlaceHolder />
  <PlaceHolder />
</Space>
<Space>
  <PlaceHolder />
  <PlaceHolder />
</Space>

Example

Basic usage of Space component.

Space horizontal
Block 1
Block 2
Block 3
Block 4
Space vertical
Block 1
Block 2
Block 3
Block 4
Space horizontal - customize gap
Block 1
Block 2
Block 3
Block 4
Space vertical - customize gap
Block 1
Block 2
Block 3
Block 4

API

PropertiesDescriptionTypeDefault
alignAlign the items on the cross axis.'start' | 'center' | 'end' | 'baseline'-
blockShould render as block element.booleanfalse
verticalWhether the direction mode is vertical.booleanfalse
justifyAlign the items on the main axis.'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch'-
onClickThe click event of the Space.(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void-
wrapShould line break automatically, work only with horizontal.booleanfalse