Button 按钮

使用

import { KButton } from "@ksware/ksw-ux";

常用的操作按钮。

基础用法

本组件库注重业务区分, 按钮类型分为:

• 普通按钮:

  默认状态, 常用用于不会产生数据的操作;

• 主要按钮:

  模块中一般只存在一个, 用于重要操作;

• 次级按钮

  模块中可以有多个, 用户产生数据的操作;

• 虚线按钮

  一般用于非关键操作或引导用户交互的场景;

• 文字按钮

  一般用于链接, 或者表格中使用;

• 链接按钮

  使用场景与文字按钮相似, 但在结构与功能上更加简单;

• icon按钮

  一般用于按钮内只包含单一图标的场景, 在空间上更加紧凑;

disabled

彩色图标

首先明确 普通按钮 不支持染色, 增加颜色的方式有两种:

方式 1, type

使用 type 属性指定按钮类型, 可选值为: primary, success, info, warning, danger

方式 2, color

可通过color属性指定按钮颜色，支持所有格式的合法颜色值, 如:

• 16 进制颜色 : #ff5500
• css 预设颜色: yellowgreen
• rgb: rgb(135, 100, 0)
• hsl: hsl(178, 70%, 50%)

左右图标插槽

方式一, Props

通过 icon-left 和 icon-right 属性设置左右图标。

方式二, 插槽

不同尺寸(size)

size 提供三个尺寸: sm、base、lg 。

圆角按钮

通过设置 round 属性可以使按钮变成圆角按钮。

文字按钮阴影

可以通过设置 shadow 属性来设置文字按钮在鼠标悬停时的阴影，阴影的颜色基于按钮的颜色动态计算。

API

Props

参数名	描述	类型	默认值
type	按钮类型	enum	-
main	是否为主按钮，不能与 secondary、dashed、text、link 属性同时使用	boolean	false
secondary	是否为次级按钮，不能与 main、dashed、text、link 属性同时使用	boolean	false
dashed 1.2.4	是否为虚线按钮，不能与 main、secondary、text、link 属性同时使用	boolean	false
text	是否为文本按钮，不能与 main、secondary、dashed、link 属性同时使用	boolean	false
link	是否为链接按钮，不能与 main、secondary、dashed、text 属性同时使用	boolean	false
icon	是否为图标按钮	boolean	false
size	按钮尺寸	enum	'base'
icon-left	按钮文字左侧图标	string | Component	-
icon-right	按钮文字右侧图标	string | Component	-
round	是否显示圆角按钮	boolean	false
circle	是否显示圆形按钮	boolean	false
loading	是否显示加载中状态	boolean	false
loading-icon	加载图标	string	-
disabled	是否禁用按钮	boolean	false
value	原生 value 属性	string | number	-
autofocus	原生 autofocus 属性	boolean	false
native-type	原生 type 属性	string | number	-
bg	是否显示文字按钮背景颜色	boolean	false
color	按钮颜色	string	-
tag	自定义元素标签	string | Component	button
shadow 1.2.1	text 为 true 时生效，鼠标悬浮时是否显示阴影	boolean	false
use-default-style 1.2.2	是否使用默认样式	boolean	true
auto-insert-space 1.2.2	按钮文本长度为 2 且均为中文时生效，是否在两个文字之间自动插入空格	boolean	false

Events

事件名	描述	类型
click	点击按钮时触发	Function

Slots

插槽名	描述	参数
default	默认插槽内容	-
icon-left	自定义左侧图标组件	-
icon-right	自定义右侧图标组件	-
loading	自定义加载中状态组件	-

Methods

方法名	描述	类型
ref	按钮的 HTML 元素	object
size	按钮尺寸	object
type	按钮类型	object
disabled	按钮是否禁用	object
shouldAddSpace	按钮的两个文字是否自动插入空格	object