Even though we have Divider, but sometimes we need more than one Divider to split the elements apart, so we stack each elements upon Divider, but doing so not only makes our code ugly but also makes it difficult to maintain. Space is this kind of component provides us both productivity and elegance.
The basic use case is using this component to provide unified space between each components
direction attribute to control the layout, we use
flex-direction to implement this.
Control the size of the space
Control the space size via
You can set the size with built-in sizes
large, these size coresponds to
16px. The default size is
You can also using customized size to override it. Refer to the next part.
Sometimes built-in sizes could not meet the business needs, we can use custom size (number type) to control the space between items.
Do not use
ElSpace with components that depend on ancestor width (height), e.g.
ElSlider, in this case when you drag the trigger button the bar will grow which causes misplacement between cursor and trigger button.
When in horizontal mode, using
wrap (bool type) to control auto wrapping behavior.
Sometimes we want something more than blank space, so we have (spacer) to help us.
Literal type spacer
Spacer can also be VNode
Setting this attribute can adjust the alignment of child nodes, the desirable value can be found at align-items.
Fill the container
fill (Boolean type) parameter, you can control whether the child node automatically fills the container.
In the following example, when set to
fill, the width of the child node will automatically adapt to the width of the container.
You can also use the
fillRatio parameter to customize the filling ratio. The default value is
100, which represents filling based on the width of the parent container at
It should be noted that the expression of horizontal layout and vertical layout is slightly different, the specific effect can be viewed in the following example.
|alignment||Controls the alignment of items||string||align-items||'center'|
|class||Classname||string / Array<Record<string, boolean> | String> / Record<string, boolean>||-||-|
|prefixCls||Prefix for space-items||string||el-space||-|
|style||Extra style rules||string / Array<Object | String> / Object||-||-|
|spacer||Spacer||string / number / VNode||-||-|
|size||Spacing size||string / number / [number, number]||-||'small'|
|wrap||Auto wrapping||boolean||true / false||false|
|fill||Whether to fill the container||boolean||true / false||false|
|fill-ratio||Ratio of fill||number||-||100|
|default||Items to be spaced|