Kxs UISpace 间距
● 基本用法
相邻组件间的水平间距。
展示代码
vue
<template>
<k-space>
<k-button type="primary" plain>Button</k-button>
<k-button type="info" round>Button</k-button>
<k-button icon="k-icon-jiazai"></k-button>
<k-button icon="k-icon-address_book_line"></k-button>
<k-radio></k-radio>
</k-space>
</template>
● 垂直间距
通过添加column属性设置相邻组件间的按垂直方向排列间距。
展示代码
vue
<template>
<k-space column>
<k-button type="info" plain>Button</k-button>
<k-button icon="k-icon-trash_line"></k-button>
<k-button icon="k-icon-unlink_line" loading></k-button>
</k-space>
</template>
● 间距大小
通过设置size的值来规定间距的大小。
展示代码
vue
<template>
<k-space>
<k-button type="info" plain>Button</k-button>
<k-button type="info" round>Button</k-button>
<k-button icon="k-icon-shezhi-xianxing1"></k-button>
<k-button type="info" icon="k-icon-shop_manage_line" loading></k-button>
</k-space>
</template>
● 自动换行
通过添加wrap属性来设置自动换行。
展示代码
vue
<template>
<k-space wrap>
<k-button>Button</k-button>
<k-button>Button</k-button>
<k-button>Button</k-button>
<k-button>Button</k-button>
<k-button>Button</k-button>
<k-button>Button</k-button>
<k-button>Button</k-button>
<k-button>Button</k-button>
<k-button>Button</k-button>
</k-space>
</template>
● Attributes
| 参数 | 说明 | 类型 |
|---|---|---|
| inline | 是否为水平或者垂直，默认横向 | Boolean |
| size | 自定义间距大小，接收两个参数， 第一个为垂直间距，第二个为水平间距， 当inline为false是，只需要一个参数设置垂直间距即可 | Array |