AOYA-UI

# Button 按钮

常用的操钮作按

# 基础用法

基础的按钮用法

TIP

使用type属性来定义 Button 的样式。

<ay-button>默认按钮</ay-button>
<!-- <ay-button type="threeLevel">三级按钮（默认按钮）</ay-button> -->
<ay-button type="oneLevel">一级按钮</ay-button>
<ay-button type="twoLevel">二级按钮</ay-button>
<ay-button type="danger">危险按钮</ay-button>
<ay-button type="info">信息按钮</ay-button>
<h3></h3>
<ay-button type="oneLevel" icon="ay-icon-edit">编辑</ay-button>
<ay-button type="danger" icon="ay-icon-delete">删除</ay-button>

# 禁用状态

按钮不可用状态

TIP

你可以使用disabled属性来定义按钮是否可用，它接受一个Boolean值

<ay-button disabled>默认按钮</ay-button>
<!-- <ay-button type="threeLevel" disabled>三级按钮（默认按钮）</ay-button> -->
<ay-button type="oneLevel" disabled>一级按钮</ay-button>
<ay-button type="twoLevel" disabled>二级按钮</ay-button>
<ay-button type="danger" disabled>危险按钮</ay-button>
<ay-button type="info" disabled>信息按钮</ay-button>

# 文字按钮

没有边框和背景色的按钮

<ay-button type="text">文字按钮</ay-button>
<ay-button type="dangerText">文字按钮</ay-button>

# 图标按钮

带图标的按钮可增强辨识度并节省空间

TIP

可以设置type属性为iconButton或dangerIconButton即可，icon 的列表可以参考 iconfont 。

<ay-button type="iconButton" icon="ay-icon-more"></ay-button>
<ay-button type="iconButton"><i class="ay-icon-edit"></i></ay-button>
<ay-button type="dangerIconButton" icon="ay-icon-delete"></ay-button>

# 按钮组

以按钮组的方式出现，常用于多项类似操作

TIP

使用<ay-button-group>标签来嵌套你的按钮。

<ay-button-group>
  <ay-button icon="ay-icon-arrow-left" type="oneLevel">上一页</ay-button>
  <ay-button type="oneLevel">下一页<i class="ay-icon-arrow-right ay-icon--right"></i></ay-button>
</ay-button-group>
<ay-button-group>
  <ay-button type="iconButton" icon="ay-icon-more"></ay-button>
  <ay-button type="iconButton" icon="ay-icon-search"></ay-button>
</ay-button-group>

# 加载中

点击按钮后进行数据加载操作，在按钮上显示加载状态。

TIP

要设置为 loading 状态，只要设置loading属性为true即可。

<ay-button loading="ture">默认按钮</ay-button>
<!-- <ay-button type="threeLevel" :loading="ture">三级按钮（默认按钮）</ay-button> -->
<ay-button type="oneLevel" loading="ture">一级按钮</ay-button>
<ay-button type="twoLevel" loading="ture">二级按钮</ay-button>
<ay-button type="danger" loading="ture">危险按钮</ay-button>
<ay-button type="info" loading="ture">信息按钮</ay-button>
<h3></h3>
<ay-button type="text" loading="ture">文字按钮</ay-button>
<ay-button type="dangerText" loading="ture">文字按钮</ay-button>

# 不同尺寸

Button 组件提供除了默认值以外的两种尺寸，可以在不同场景下选择合适的按钮尺寸。

TIP

额外的尺寸：large、small，通过设置size属性来配置它们。

<ay-button>默认按钮</ay-button>
<!-- <ay-button size="medium">中型按钮（默认按钮）</ay-button> -->
<ay-button size="large">大型按钮</ay-button>
<ay-button size="small">小型按钮</ay-button>

# Attributes

参数 说明 类型 可选值 默认值
size 尺寸 string large / small medium
type 类型 string oneLevel / twoLevel / danger / info / text / dangerText / iconButton / dangerIconButton threeLevel
loading 是否加载中状态 boolean — false
disabled 是否禁用状态 boolean — false
icon 图标类名 string — —
autofocus 是否默认聚焦 boolean — false
native-type 原生 type 属性 string button / submit / reset button

← Select 选择器 →