Button 按钮

常用的操作按钮。

基础用法

通过 type 属性，控制按钮的类型

<sk-button>默认</sk-button>
<sk-button type="primary">主要</sk-button>
<sk-button type="info">提示</sk-button>
<sk-button type="success">成功</sk-button>
<sk-button type="warning">警告</sk-button>
<sk-button type="danger">危险</sk-button>

禁用状态

你可以添加 disabled 来禁用按钮

<sk-button disabled>默认</sk-button>
<sk-button type="primary" disabled>主要</sk-button>
<sk-button type="info" disabled>提示</sk-button>
<sk-button type="success" disabled>成功</sk-button>
<sk-button type="warning" disabled>警告</sk-button>
<sk-button type="danger" disabled>危险</sk-button>

hover 特效

通过 effect 属性，来设置按钮 hover 状态的特效

TIP

effect 的属性有 pulse: 脉冲、flash: 闪烁

<sk-button effect="pulse">脉冲</sk-button>
<sk-button type="primary" effect="pulse">脉冲</sk-button>
<sk-button type="info" effect="pulse">脉冲</sk-button>
<sk-button type="success" effect="pulse">脉冲</sk-button>
<sk-button type="warning" effect="pulse">脉冲</sk-button>
<sk-button type="danger" effect="pulse">脉冲</sk-button>

<sk-button effect="flash">闪烁</sk-button>
<sk-button type="primary" effect="flash">闪烁</sk-button>
<sk-button type="info" effect="flash">闪烁</sk-button>
<sk-button type="success" effect="flash">闪烁</sk-button>
<sk-button type="warning" effect="flash">闪烁</sk-button>
<sk-button type="danger" effect="flash">闪烁</sk-button>

按钮尺寸

sakura-ui 提供了三种不同的尺寸

<sk-button size="small">小尺寸</sk-button>
<sk-button size="middle">默认</sk-button>
<sk-button size="large">大尺寸</sk-button>

属性

参数说明类型可选值默认值
type按钮类型Stringdefault / primary / info / warning / success / dangerdefault
size按钮尺寸Stringsmall / middle / largemiddle
effecthover 特效Stringdefault / pulse / flashdefault
disabled是否禁用Booleanfalse