全部产品
云市场
云游戏

AButton 按钮

更新时间:2020-08-07 20:22:28

AButton 按钮文档介绍了使用该组件的不同方式以及 API 文档:

  • Kylin 工程中使用该组件。
  • 在其他工程中使用,通过 ESModule 的方式来导入组件。

API 文档 提供了 props、slots、events 的接口信息。

此外,要查看该组件的视觉效果及示例代码,请参考本文 Demo

Kylin

  1. <dependency component="{ AButton }" src="@alipay/antui-vue" ></dependency>

ESModule

  1. import { AButton } from '@alipay/antui-vue';

API 文档

props

属性 说明 类型 默认值
type 按钮类型,可选值为 blue , white , warn , bottom , page-reuslt (仅用于 PageResult 下)。 string blue
size 按钮大小,可选值为 default , tiny , 当设置为 tiny 时,type 仅支持white , blue , ([type=page-result] 不支持)。 string default
disabled 设置禁用, ([type=page-result] 不支持)。 boolean false
loading 设置按钮icon为loading,仅适用于 size=default 时, ([type=page-result] 不支持)。 boolean false
success 设置按钮icon为success,仅适用于 size=default 时, ([type=page-result] 不支持)。 boolean false
nativeType DOM上的 type 属性。 string button
href 如果不为空,使用a标签渲染,否则默认使用 button 渲染.。 string -
inactiveLoading 设为 true 时,当 loadingtrue 时不会触发click事件,且不会改变 button 的样式;设为 false 时,保持 loading 原有行为。 boolean false

slots

name 说明 scope
- 默认slot,填充按钮文本 -
icon 用于填充icon的自定义节点,在设置了 loading/success 时会填充默认值 -

events

name 说明 函数
click 当点击按下时 Function(event: Event): void

Demo

1.按钮

截图

代码

  1. <template>
  2. <div style="padding: 10px;">
  3. <AButton >主按钮</AButton>
  4. <AButton type="white">次按钮</AButton>
  5. <AButton disabled>按钮不可点</AButton>
  6. <AButton href="#">a标签 主按钮</AButton>
  7. <AButton href="#" type="white">a标签 次按钮</AButton>
  8. <AButton href="#" disabled>a标签 按钮不可点</AButton>
  9. </div>
  10. </template>
  11. <style scoped>
  12. .am-button {
  13. margin-bottom: 20px;
  14. }
  15. </style>

2.辅助按钮

截图

代码

  1. <template>
  2. <div style="padding: 10px;">
  3. <AButton size="tiny" type="white">辅助按钮</AButton>
  4. <AButton size="tiny" type="white" disabled>辅助按钮</AButton>
  5. <AButton href="#" size="tiny" type="white">辅助按钮</AButton>
  6. <AButton href="#" size="tiny" type="white" disabled>辅助按钮</AButton>
  7. <AButton size="tiny">辅助按钮</AButton>
  8. <AButton size="tiny" disabled>辅助按钮</AButton>
  9. <AButton href="#" size="tiny">辅助按钮</AButton>
  10. <AButton href="#" size="tiny" disabled>辅助按钮</AButton>
  11. </div>
  12. </template>
  13. <style scoped>
  14. .am-button {
  15. margin-bottom: 20px;
  16. }
  17. </style>

3.加载

截图

代码

  1. <template>
  2. <div style="padding: 10px;">
  3. <AButton loading>加载中...</AButton>
  4. <AButton success>付款成功...</AButton>
  5. <AButton loading type="blue">加载中...</AButton>
  6. <AButton loading type="white">加载中...</AButton>
  7. <AButton loading type="warn">加载中...</AButton>
  8. <AButton loading type="bottom">加载中...</AButton>
  9. <AButton loading type="blue" size="tiny">加载中...</AButton>
  10. <AButton loading type="white" size="tiny">加载中...</AButton>
  11. </div>
  12. </template>
  13. <style scoped>
  14. .am-button {
  15. margin-bottom: 20px;
  16. }
  17. </style>

4.警示

截图

代码

  1. <template>
  2. <div style="padding: 10px 0;">
  3. <AButton type="warn">警示按钮</AButton>
  4. <AButton type="warn" disbaled>警示按钮</AButton>
  5. </div>
  6. </template>
  7. <style scoped>
  8. .am-button {
  9. margin-bottom: 20px;
  10. }
  11. </style>