Kxs UIButton 按钮 #
● 基础 #
可以使用type属性指定按钮类型,通过round属性指定是否为圆角按钮
展示代码
vue
<template>
<k-button type="default">Default</k-button>
<k-button type="primary">Primary</k-button>
<k-button type="success">Success</k-button>
<k-button type="info">Info</k-button>
<k-button type="warming">Warming</k-button>
<k-button type="danger">Danger</k-button>
<k-button type="default" round>Round</k-button>
<k-button type="primary" round>Primary</k-button>
<k-button type="success" round>Success</k-button>
<k-button type="info" round>Info</k-button>
<k-button type="warming" round>Warming</k-button>
<k-button type="danger" round>Danger</k-button>
<k-button type="default" icon="k-icon-shezhi-xianxing"></k-button>
<k-button type="default" icon="k-icon-address_book_line"></k-button>
<k-button type="default" icon="k-icon-search_line"></k-button>
<k-button type="default" icon="k-icon-volume_mute_line"></k-button>
<k-button type="default" icon="k-icon-star_line"></k-button>
<k-button type="default" icon="k-icon-shop_line"></k-button>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
● 反色 #
使用plain属性指定是否为朴素按钮
展示代码
vue
<template>
<k-button type="default" round plain>Round</k-button>
<k-button type="primary" round plain>Primary</k-button>
<k-button type="success" round plain>Success</k-button>
<k-button type="info" round plain>Info</k-button>
<k-button type="warming" round plain>Warming</k-button>
<k-button type="danger" round plain>Danger</k-button>
</template>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
● 禁用 #
使用disabled属性指定按钮是否被禁用
展示代码
vue
<template>
<k-button type="default" disabled>Disabled</k-button>
<k-button type="primary" disabled>Primary</k-button>
<k-button type="success" disabled>Success</k-button>
<k-button type="info" disabled>Info</k-button>
<k-button type="warming" disabled>Warming</k-button>
<k-button type="danger" disabled>Danger</k-button>
</template>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
● 大小 #
使用size属性指定按钮的大小
展示代码
vue
<template>
<k-button size="small">Size</k-button>
<k-button type="warming" >Size</k-button>
<k-button type="danger" size="large">Size</k-button>
</template>
1
2
3
4
5
6
2
3
4
5
6
● 块级 #
使用block属性指定是否为块级按钮
展示代码
vue
<template>
<k-button type="default" block>Block</k-button>
</template>
1
2
3
4
2
3
4
● 图标 #
默认使用icon属性指定无按钮文字的图标
可以使用postIcon属性指定按钮文字后面的图标
展示代码
vue
<template>
<template>
<k-button type="default" icon="k-icon-star_line">Icon</k-button>
<k-button type="default" icon="k-icon-tv_line">Icon</k-button>
<k-button type="default" icon="k-icon-translate_line">Icon</k-button>
<k-button type="default" icon="k-icon-add_line">Icon</k-button>
<k-button type="default" icon="k-icon-book_open_line">Icon</k-button>
<k-button type="default" icon="k-icon-xiazai">Icon</k-button>
<k-button type="default" postIcon="k-icon-star_line">PostIcon</k-button>
<k-button type="default" postIcon="k-icon-tv_line">PostIcon</k-button>
<k-button type="default" postIcon="k-icon-translate_line">PostIcon</k-button>
<k-button type="default" postIcon="k-icon-add_line">PostIcon</k-button>
<k-button type="default" postIcon="k-icon-book_open_line">PostIcon</k-button>
<k-button type="default" postIcon="k-icon-xiazai">PostIcon</k-button>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
● 加载 #
使用loading指定按钮的加载状态
展示代码
vue
<template>
<k-button type="default" icon="k-icon-jiazai" loading></k-button>
<k-button type="primary" icon="k-icon-jiazai" loading></k-button>
<k-button type="success" icon="k-icon-jiazai" loading></k-button>
<k-button type="info" icon="k-icon-jiazai" loading></k-button>
<k-button type="warming" icon="k-icon-jiazai" loading></k-button>
<k-button type="danger" icon="k-icon-jiazai" loading></k-button>
</template>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
● Attributes #
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| size | 尺寸 | string | small / default / large | default |
| type | 类型 | string | default/primary / success / warning / danger / info | default |
| plain | 是否朴素按钮 | boolean | — | false |
| round | 是否圆角按钮 | boolean | — | false |
| disabled | 是否禁用状态 | boolean | — | false |
| icon | 图标类名 | string | — | — |
| loading | 是否加载 | boolean | — | false |