按钮

简介

abp-button 是创建按钮的主要元素。

基础用法：

<abp-button button-type="Primary">点击我</abp-button>

演示

查看按钮演示页面以体验实际效果。

属性

button-type

表示按钮主要样式/类型的值。应为以下值之一：

• Default（默认值）
• Primary
• Secondary
• Success
• Danger
• Warning
• Info
• Light
• Dark
• Outline_Primary
• Outline_Secondary
• Outline_Success
• Outline_Danger
• Outline_Warning
• Outline_Info
• Outline_Light
• Outline_Dark
• Link

size

表示按钮尺寸的值。应为以下值之一：

• Default（默认值）
• Small
• Medium
• Large
• Block
• Block_Small
• Block_Medium
• Block_Large

busy-text

按钮忙碌时显示的文本。

启用按钮忙碌状态：

$('#btnTest').buttonBusy(true);

恢复正常状态：

$('#btnTest').buttonBusy(false);

text

按钮文本。这是为按钮设置文本的快捷方式。示例：

<abp-button button-type="Primary" text="点击我" />

这种情况下，可使用自闭合标签使代码更简洁。

icon

用于设置按钮图标。默认支持 Font Awesome 图标类。示例：

<abp-button icon="address-card" text="地址" />

icon-type

若不使用 Font Awesome，有两种选择：

1. 将 icon-type 设为 Other，并填写所用字体图标的 CSS 类名
2. 若不使用字体图标，可手动编写开始/结束标签，在标签内部写入任意代码

disabled

设置为 true 可使按钮初始状态为禁用。