Appearance

iuiDesign
100%
02:32
本页目录

按钮用于开始一个即时操作

基本使用 ​

html
<iui-button>Button</iui-button>
<iui-button>Button</iui-button>

按钮类型 ​

按钮分为 primary - 主要按钮、secondary - 次要按钮（默认）、outline - 线形按钮 按钮三种类型

html
<iui-button type="primary">主要按钮</iui-button>
<iui-button type="secondary">次要按钮</iui-button>
<iui-button type="outline">线框按钮</iui-button>
<iui-button type="primary">主要按钮</iui-button>
<iui-button type="secondary">次要按钮</iui-button>
<iui-button type="outline">线框按钮</iui-button>

按钮状态 ​

按钮的状态分为 normal - 正常（默认）、success - 成功、warning - 警告、danger - 危险 四种，可以与按钮类型同时使用

html
<iui-button status="normal">正常按钮</iui-button>
<iui-button status="success">成功按钮</iui-button>
<iui-button status="danger">危险按钮</iui-button>
<iui-button status="warning">警告按钮</iui-button>
<iui-button status="normal">正常按钮</iui-button>
<iui-button status="success">成功按钮</iui-button>
<iui-button status="danger">危险按钮</iui-button>
<iui-button status="warning">警告按钮</iui-button>

按钮尺寸 ​

组件库内置了 huge - 超大、large - 大（默认）、medium - 中、small - 小、mini - 迷你 五种尺寸，如果无法满足需求，可以通过 size 属性传入 Number 类型自定义尺寸

html
<iui-button type="primary" size="huge">超大</iui-button>
<iui-button type="primary">默认</iui-button>
<iui-button type="primary" size="medium">中</iui-button>
<iui-button type="primary" size="small">小</iui-button>
<iui-button type="primary" size="mini">迷你</iui-button>

<!-- 自定义尺寸 -->
<iui-button type="primary" :size="50">Custom size</iui-button>
<iui-button type="primary" size="huge">超大</iui-button>
<iui-button type="primary">默认</iui-button>
<iui-button type="primary" size="medium">中</iui-button>
<iui-button type="primary" size="small">小</iui-button>
<iui-button type="primary" size="mini">迷你</iui-button>

<!-- 自定义尺寸 -->
<iui-button type="primary" :size="50">Custom size</iui-button>

按钮形状 ​

按钮分为 square - 长方形（默认）、round - 全圆角、circle - 圆形三种形状。
圆形一般用于图标按钮，不会显示按钮文字。

html
<iui-button shape="square">方形</iui-button>
<iui-button shape="round">圆角</iui-button>

<!-- 圆形图标按钮 -->
<iui-button shape="circle" icon="edit"> </iui-button>
<iui-button shape="square">方形</iui-button>
<iui-button shape="round">圆角</iui-button>

<!-- 圆形图标按钮 -->
<iui-button shape="circle" icon="edit"> </iui-button>

按钮加载中状态 ​

通过设置 loading 可以让按钮处于加载中状态。处于加载中状态的按钮不会触发点击事件。

html
<iui-button loading>加载中</iui-button>
<iui-button loading>加载中</iui-button>

图标按钮 ​

可以为图标添加 icon 属性，支持 iui-icon 组件的所有图标。

html
<iui-button icon="plus">图标按钮</iui-button>
<iui-button icon="plus">图标按钮</iui-button>

API ​

<Button>props
参数描述类型默认值
type按钮的类型primary | secondary | outlinesecondary
shape按钮的形状square | round | circlesquare
loading按钮是否为加载中状态Booleanfalse
disabled按钮是否禁用Booleanfalse
size按钮的尺寸huge | large | medium | small | mini | Numberlarge
status按钮的状态normal | success | danger | warningnormal
inline内联按钮Booleanfalse
icon按钮的图标String-
openType小程序开放能力String-
<Button>events
事件名描述参数
click点击按钮时触发e: Event
getphonenumber获取用户手机号e: Event
opensetting打开设置面板e: Event
launchapp打开App成功事件e: Event
error开放能力错误事件e: Event
<Button>slots
插槽名描述参数
icon按钮的图标-