dk-plusspacing
The most basic use of this component is to provide uniform spacing between components。
Basic use
dk-space Basic use
html
<dk-space>
<dk-button type="primary">Main button</dk-button>
<dk-button type="success">Success button</dk-button>
<dk-button type="warning">Warning button</dk-button>
</dk-space>展开
Spacing size
dk-space pass spacingType Property to control the size of the spacing. The optional value is large、medium、small,、mini the default is large。
1.Large size spacing
When spacingType islarge, the spacing is14px.
html
<dk-space spacingType='large'>
<Dk-Button type="primary">Main button</Dk-Button>
<Dk-Button type="success">Success button</Dk-Button>
<Dk-Button type="info">Information button</Dk-Button>
<Dk-Button type="warning">Warning button</Dk-Button>
<Dk-Button type="danger">Danger button</Dk-Button>
</dk-space>展开
2.Medium dimensional spacing
When spacingType is medium, the spacing is 10px.
html
<dk-space spacingType='medium'>
<Dk-Button type="primary">Main button</Dk-Button>
<Dk-Button type="success">Success button</Dk-Button>
<Dk-Button type="info">Information button</Dk-Button>
<Dk-Button type="warning">Warning button</Dk-Button>
<Dk-Button type="danger">Danger button</Dk-Button>
</dk-space>展开
3.Small size spacing
When spacingType issmall, the spacing is6px.
html
<dk-space spacingType='small'>
<Dk-Button type="primary">Main button</Dk-Button>
<Dk-Button type="success">Success button</Dk-Button>
<Dk-Button type="info">Information button</Dk-Button>
<Dk-Button type="warning">Warning button</Dk-Button>
<Dk-Button type="danger">Danger button</Dk-Button>
</dk-space>展开
4.Super small size spacing
When spacingType is mini, the spacing is 2px.
html
<dk-space spacingType='mini'>
<Dk-Button type="primary">Main button</Dk-Button>
<Dk-Button type="success">Success button</Dk-Button>
<Dk-Button type="info">Information button</Dk-Button>
<Dk-Button type="warning">Warning button</Dk-Button>
<Dk-Button type="danger">Danger button</Dk-Button>
</dk-space>展开
Spacing direction
You can use vertical to set whether the spacing is vertical.
html
<dk-space vertical>
<Dk-Button type="primary">Main button</Dk-Button>
<Dk-Button type="success">Success button</Dk-Button>
<Dk-Button type="info">Information button</Dk-Button>
<Dk-Button type="warning">Warning button</Dk-Button>
<Dk-Button type="danger">Danger button</Dk-Button>
</dk-space>展开
Custom spacing
Vertical spacing can be customized using the port-rait attribute to define the size of the spacing in units of px.
Horizontal spacing can be customized using the land-scape property to define the size of the spacing in units of px.
html
<dk-space vertical port-rait="55px">
<dk-button type="primary" size="large"> large</dk-button>
<dk-button type="primary" size="large"> large</dk-button>
</dk-space>展开
html
<dk-space land-scape="55px">
<dk-button type="primary" size="large"> large</dk-button>
<dk-button type="primary" size="large"> large</dk-button>
</dk-space>展开
Attributes
| argument | Instructions | type | Optional value | Default value |
|---|---|---|---|---|
| vertical | Vertical or not | boolean | --- | false |
| nowrap | Whether to disable line feed | boolean | --- | false |
| port-rait | Custom vertical spacing (remember to add unitspx) | string | --- | 10px |
| land-scape | Custom horizontal spacing (remember to add unitspx) | string | --- | 10px |
| spacingType | Spacing size | string | large middle small mini | large |
Contributors
