Skip to content
On this page

Button 按钮

基本用法

基础用法,通过type切换不同颜色的按钮

默认主要成功警告错误提示
html
<ivy-button>默认</ivy-button>
<ivy-button type="primary">主要</ivy-button>
<ivy-button type="success">成功</ivy-button>
<ivy-button type="warn">警告</ivy-button>
<ivy-button type="danger">错误</ivy-button>
<ivy-button type="info">提示</ivy-button>

圆角按钮

通过 round 属性设置按钮为圆角

默认按钮主要成功警告错误提示
html
<ivy-button round>默认按钮</ivy-button>
<ivy-button type="primary" round>主要</ivy-button>
<ivy-button type="success" round>成功</ivy-button>
<ivy-button type="warn" round>警告</ivy-button>
<ivy-button type="danger" round>错误</ivy-button>
<ivy-button type="info" round>提示</ivy-button>

加载中

添加loading属性来表示加载中的状态

默认按钮主要成功警告错误提示
html
<ivy-button loading>默认按钮</ivy-button>
<ivy-button type="primary" loading>主要</ivy-button>
<ivy-button type="success" loading>成功</ivy-button>
<ivy-button type="warn" loading>警告</ivy-button>
<ivy-button type="danger" loading>错误</ivy-button>
<ivy-button type="info" loading>提示</ivy-button>

禁用

添加disabled属性来表示禁用状态

默认按钮主要成功警告错误提示
html
<ivy-button disabled>默认按钮</ivy-button>
<ivy-button type="primary" disabled>主要</ivy-button>
<ivy-button type="success" disabled>成功</ivy-button>
<ivy-button type="warn" disabled>警告</ivy-button>
<ivy-button type="danger" disabled>错误</ivy-button>
<ivy-button type="info" disabled>提示</ivy-button>

Attrs

属性名说明可选值默认值
type类型primary/success/warn/danger/info-
round圆角--
disabled禁用--
loading加载中--

MIT Licensed