按钮
使用
<os-button>按钮一</os-button>
<os-button type="info">按钮二</os-button>
<os-button type="success">按钮三</os-button>
<os-button type="warning">按钮四</os-button>
<os-button type="error">按钮五</os-button>
<os-button type="text">按钮六</os-button>
禁用状态
按钮不可用
<os-button disabled>按钮一</os-button>
<os-button type="info" disabled>按钮二</os-button>
<os-button type="success" disabled>按钮三</os-button>
<os-button type="warning" disabled>按钮四</os-button>
<os-button type="error" disabled>按钮五</os-button>
<os-button type="text" disabled>按钮六</os-button>
尺寸
提供四种尺寸
<os-button size="large">超大按钮</os-button>
<os-button >默认按钮</os-button>
<os-button size="small">小型按钮</os-button>
<os-button size="mini">迷你按钮</os-button>
图标按钮
带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。
<os-button icon="icon-edit"></os-button>
<os-button icon="icon-delete"></os-button>
<os-button icon="icon-search">搜索</os-button>
<os-button>分享 <i class="iconfont icon-share" /></os-button>
圆角按钮
round属性用来设置圆角按钮
<os-button size="large" round>超大按钮</os-button>
<os-button round>默认按钮</os-button>
<os-button size="small" round>小型按钮</os-button>
<os-button size="mini" round>迷你按钮</os-button>
圆形按钮
circle属性用来设置圆形按钮
<os-button icon="icon-edit" size="large" circle></os-button>
<os-button icon="icon-share" circle></os-button>
<os-button icon="icon-delete" size="small" circle></os-button>
<os-button icon="icon-search" size="mini" circle></os-button>
loading
在按钮上显示加载状态。
<os-button :loading="true">按钮一</os-button>
<os-button :loading="true" type="info">按钮二</os-button>
<os-button :loading="true" type="success">按钮三</os-button>
<os-button :loading="true" type="warning">按钮四</os-button>
<os-button :loading="true" type="error">按钮五</os-button>
<os-button :loading="true" type="text">按钮六</os-button>
属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
size | 尺寸 | string | large/medium/small/mini | medium |
type | 类型 | string | primary/success/warning/danger/info/text | primary |
round | 是否圆角按钮 | boolean | -- | false |
circle | 是否圆形按钮 | boolean | -- | false |
loading | 是否加载中 | boolean | -- | false |
disabled | 是否禁用 | boolean | -- | false |
icon | 图标类名 | string | -- | -- |