dk-plus

简体中文

English

简体中文

English

Appearance

目录

space 间距 ​

最基础的用法，通过这个组件来给组件之间提供统一的间距。

基本使用 ​

dk-space 的基本使用

html
<dk-space>
  <dk-button type="primary">主要按钮</dk-button>
  <dk-button type="success">成功按钮</dk-button>
  <dk-button type="warning">警告按钮</dk-button>
</dk-space>
展开

间距尺寸 ​

dk-space 通过 spacingType 属性来控制间距的尺寸，可选值为 large、medium、small,、mini，默认为 large。

1.大尺寸间距 ​

spacingType 值为 large 时，间距为 14px。

html
<dk-space spacingType='large'>
  <Dk-Button type="primary">主要按钮</Dk-Button>
  <Dk-Button type="success">成功按钮</Dk-Button>
  <Dk-Button type="info">信息按钮</Dk-Button>
  <Dk-Button type="warning">警告按钮</Dk-Button>
  <Dk-Button type="danger">危险按钮</Dk-Button>
</dk-space>
展开

2.中尺寸间距 ​

spacingType 值为 medium 时，间距为 10px。

html
<dk-space spacingType='medium'>
  <Dk-Button type="primary">主要按钮</Dk-Button>
  <Dk-Button type="success">成功按钮</Dk-Button>
  <Dk-Button type="info">信息按钮</Dk-Button>
  <Dk-Button type="warning">警告按钮</Dk-Button>
  <Dk-Button type="danger">危险按钮</Dk-Button>
</dk-space>
展开

3.小尺寸间距 ​

spacingType 值为 small 时，间距为 6px。

html
<dk-space spacingType='small'>
  <Dk-Button type="primary">主要按钮</Dk-Button>
  <Dk-Button type="success">成功按钮</Dk-Button>
  <Dk-Button type="info">信息按钮</Dk-Button>
  <Dk-Button type="warning">警告按钮</Dk-Button>
  <Dk-Button type="danger">危险按钮</Dk-Button>
</dk-space>
展开

4.超小尺寸间距 ​

spacingType 值为 mini 时，间距为 2px。

html
<dk-space spacingType='mini'>
  <Dk-Button type="primary">主要按钮</Dk-Button>
  <Dk-Button type="success">成功按钮</Dk-Button>
  <Dk-Button type="info">信息按钮</Dk-Button>
  <Dk-Button type="warning">警告按钮</Dk-Button>
  <Dk-Button type="danger">危险按钮</Dk-Button>
</dk-space>
展开

间距方向 ​

可使用 vertical 设置间距是否为垂直方向。

html
<dk-space vertical>
  <Dk-Button type="primary">主要按钮</Dk-Button>
  <Dk-Button type="success">成功按钮</Dk-Button>
  <Dk-Button type="info">信息按钮</Dk-Button>
  <Dk-Button type="warning">警告按钮</Dk-Button>
  <Dk-Button type="danger">危险按钮</Dk-Button>
</dk-space>
展开

自定义间距 ​

纵向间距可使用 port-rait属性来自定义间距的尺寸，单位为 px。

横向间距可使用 land-scape属性来自定义间距的尺寸，单位为 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(属性) ​

参数说明类型可选值默认值
vertical是否竖直排列boolean---false
nowrap是否禁止换行boolean---false
port-rait自定义纵向间距(记得添加单位px)string---10px
land-scape自定义横向间距(记得添加单位px)string---10px
spacingType间距尺寸stringlarge middle small minilarge

Contributors ​