antd-mini
Version:
antd-mini 是支付宝小程序 UI 组件库，遵循 Ant Design 规范。
169 lines (138 loc) • 14.8 kB
Markdown
---
nav:
path: /components
group:
title: General
order: 2
toc: 'content'
---
# Button
Used to start an immediate operation. Marks a (or encapsulates a set of) operation commands that trigger the corresponding business logic in response to user click behavior.
## Introduction
In `index.json` Introducing Components in
```json
"usingComponents": {
#if ALIPAY
"ant-button": "antd-mini/es/Button/index"
#endif
#if WECHAT
"ant-button": "antd-mini/Button/index"
#endif
}
```
## Code Sample
### Basic use
```xml
#if ALIPAY
<ant-button type="primary">Alipay</ant-button>
#endif
#if WECHAT
<ant-button type="primary">WeChat</ant-button>
#endif
<ant-button type="primary">Main button</ant-button>
<ant-button type="default">Secondary button</ant-button>
<ant-button type="text">Text Button</ant-button>
<ant-button title="副标题" type="primary">With auxiliary copy button</ant-button>
#if ALIPAY
<ant-button disabled type="primary" onTap="handleTap" onDisabledTap="handleDisabledTap">
Disable </ant-button>
#endif
#if WECHAT
<ant-button disabled type="primary" bindtap="handleTap" bindisabledtap="handleDisabledTap">
#endif
<ant-button type="primary" loading>Loading Status</ant-button>
<ant-button type="primary" danger>Danger</ant-button>
```
### Inline Button
```xml
<ant-button type="primary" inline>Inline Button</ant-button>
<ant-button type="primary" inline size="large">Button Size-Large</ant-button>
<ant-button type="primary" inline size="medium">Button Size-Medium</ant-button>
<ant-button type="primary" inline size="small">Button Size-Small</ant-button>
<ant-button type="primary" inline danger size="large">Danger</ant-button>
```
### Button with icon
```xml
<ant-button type="primary" icon="SmileOutline">Button with icon</ant-button>
<ant-button type="default" icon="SmileOutline">Button with icon</ant-button>
<ant-button type="default" danger icon="ForbidFill">Button with icon</ant-button>
<ant-button type="default" loading icon="ForbidFill">Button with icon</ant-button>
<ant-button type="default" inline danger size="large" icon="ForbidFill">Button with icon</ant-button>
```
### More Customizations
```xml
<ant-button type="primary" icon="SmileOutline" className="custom-size">Custom Size</ant-button>
<ant-button type="primary" icon="SmileOutline" className="round">Custom Fillet</ant-button>
```
```css
.custom-size {
font-size: 22rpx;
}
.round {
border-radius: 50rpx;
}
```
### Demo Code
<code src='../../demo/pages/Button/index'></code>
## API
### Button
The following table describes the API properties for the Button component:
| Property | Description | Type | Default Value |
| --------------------------- | --------------------------------------------------------------- | ----------------------------------------------------------------------------- | --------- |
| type | Button type, optional `primary`、`default`、`text` | string | `default` |
| danger | Whether it is a danger button | boolean | false |
| disabled | Whether it is an invalid button | boolean | false |
| activeClassName | Class name when pressed | string | - |
| className | Class Name | string | - |
| style | Style | string | - |
| inline | Inline button | boolean | false |
| icon | Icon on the left side of the button | string | - |
| loading | Whether it is loading or not, it cannot be clicked during loading. | boolean | - |
| size | Button size. Only in `inline` Effective under, optional `small`、`medium`、`large` | string | `medium` |
| aide | Whether the button is a secondary button Only default and primary buttons consume this parameter | boolean | false |
| subText | Secondary text, displayed on the second line.`inline` Not effective | string | - |
| #if ALIPAY catchTap | Click the button to trigger this callback, non-bubbling | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| #if ALIPAY onTap | Click the button to trigger this callback | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| #if ALIPAY onDisabledTap | Click Departure Callback when disabled (not supported by WeChat) | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| #if WECHAT catchtap | Click the button to trigger this callback, non-bubbling | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| #if WECHAT bindtap | Click the button to trigger this callback | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| #if WECHAT binddisabledtap | Click Departure Callback when disabled (not supported by WeChat) | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
### Theme customization
#### Style Variables
Component provides the following CSS variables, which can be used to customize styles. For more information, see ConfigProvider Components.
| Variable name | Default Value | Dark Mode Default | Remarks |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | -------------------- |
| --button-disabled-opacity | 0.4 | 0.4 | Button Disable Transparency |
| --button-color | <div style="width: 150px; height: 40px; background-color: #1677FF;">#1677FF</div> | <div style="width: 150px; height: 40px; background-color: #3086FF;">#3086FF</div> | Button Color |
| --button-background-color | <div style="width: 150px; height: 40px; background-color: #FFFFFF; color: #333333;">#FFFFFF</div> | <div style="width: 150px; height: 40px; background-color: #1a1a1a; color: #FFFFFF;">#1a1a1a</div> | Button background color |
| --button-border-color | <div style="width: 150px; height: 40px; background-color: #1677FF;">#1677FF</div> | <div style="width: 150px; height: 40px; background-color: #3086ff; color: #FFFFFF;">#3086ff</div> | Button border color |
| --button-primary-border-color | <div style="width: 150px; height: 40px; background-color: #1677FF;">#1677FF</div> | <div style="width: 150px; height: 40px; background-color: #3086FF;">#3086FF</div> | Main button border color |
| --button-primary-background-color | <div style="width: 150px; height: 40px; background-color: #1677FF;">#1677FF</div> | <div style="width: 150px; height: 40px; background-color: #3086FF;">#3086FF</div> | Main button background color |
| --button-primary-color | <div style="width: 150px; height: 40px; background-color: #FFFFFF; color: #333333;">#FFFFFF</div> | <div style="width: 150px; height: 40px; background-color: #FFFFFF; color: #000000;">#FFFFFF</div> | Main button color |
| --button-primary-aide-border-color | <div style="width: 150px; height: 40px; background-color: #E7F1FF; color: #333333;">#E7F1FF</div> | <div style="width: 150px; height: 40px; background-color: #0D2543; color: #FFFFFF;">#0D2543</div> | Primary Secondary Button Border Color |
| --button-primary-aide-color | <div style="width: 150px; height: 40px; background-color: #1677FF;">#1677FF</div> | <div style="width: 150px; height: 40px; background-color: #3086FF;">#3086FF</div> | Primary Auxiliary Button Color |
| --button-default-aide-border-color | <div style="width: 150px; height: 40px; background-color: #F5F5F5; color: #333333;">#F5F5F5</div> | <div style="width: 150px; height: 40px; background-color: #121212; color: #FFFFFF;">#121212</div> | Default Secondary Button Border Color |
| --button-default-aide-background-color | <div style="width: 150px; height: 40px; background-color: #FFFFFF; color: #333333;">#FFFFFF</div> | <div style="width: 150px; height: 40px; background-color: #1a1a1a; color: #FFFFFF;">#1a1a1a</div> | Default Auxiliary Button Background Color |
| --button-default-aide-color | <div style="width: 150px; height: 40px; background-color: #333333; color: #FFFFFF;">#333333</div> | <div style="width: 150px; height: 40px; background-color: #C5CAD1; color: #FFFFFF;">#C5CAD1</div> | Default Auxiliary Button Color |
| --button-primary-danger-background-color | <div style="width: 150px; height: 40px; background-color: #FF3141;">#FF3141</div> | <div style="width: 150px; height: 40px; background-color: #FF4A58;">#FF4A58</div> | Primary Danger Button Background Color |
| --button-primary-danger-border-color | <div style="width: 150px; height: 40px; background-color: #FF3141;">#FF3141</div> | <div style="width: 150px; height: 40px; background-color: #FF4A58;">#FF4A58</div> | Primary Hazard Button Border Color |
| --button-primary-danger-color | <div style="width: 150px; height: 40px; background-color: #FFFFFF; color: #333333;">#FFFFFF</div> | <div style="width: 150px; height: 40px; background-color: #FFFFFF; color: #333333;">#FFFFFF</div> | Primary Hazard Button Color |
| --button-default-danger-background-color | <div style="width: 150px; height: 40px; background-color: #FFFFFF; color: #333333;">#FFFFFF</div> | <div style="width: 150px; height: 40px; background-color: #1a1a1a; color: #ffffff;">#1a1a1a</div> | Default Hazard Button Background Color |
| --button-default-danger-border-color | <div style="width: 150px; height: 40px; background-color: #FF3141;">#FF3141</div> | <div style="width: 150px; height: 40px; background-color: #FF4A58;">#FF4A58</div> | Default Hazard Button Border Color |
| --button-default-danger-color | <div style="width: 150px; height: 40px; background-color: #FF3141;">#FF3141</div> | <div style="width: 150px; height: 40px; background-color: #FF4A58;">#FF4A58</div> | Default Hazard Button Color |
| --button-text-danger-color | <div style="width: 150px; height: 40px; background-color: #FF3141;">#FF3141</div> | <div style="width: 150px; height: 40px; background-color: #FF4A58;">#FF4A58</div> | Hazard button text color |
| --button-danger-default-color | <div style="width: 150px; height: 40px; background-color: #FF3141;">#FF3141</div> | <div style="width: 150px; height: 40px; background-color: #FF4A58;">#FF4A58</div> | Hazard Button Default Color |
| --button-active-bg | <div style="width: 150px; height: 40px; background-color: rgba(255, 255, 255, 0.08);">rgba(255, 255, 255, 0.08)</div> | <div style="width: 150px; height: 40px; background-color: rgba(255, 255, 255, 0.08);">rgba(255, 255, 255, 0.08)</div> | Button to activate background color |
### More Properties
The following are additional properties that the Button component supports:
- `public-id`
- `open-type`
- `scope`
- `form-type`
- `onGetAuthorize`
- `onFollowLifestyle`
- `onError`
- `onGetUserInfo`
- `onGetPhoneNumber`
For specific attribute descriptions, please refer to the official documents of Alipay applet.
[Button Component Property Description](https://opendocs.alipay.com/mini/component/button#%E5%B1%9E%E6%80%A7%E8%AF%B4%E6%98%8E)