Button
You can use the button component to allow users to perform actions or make choices. The component is often used to submit forms, redirect users to another interface, or guide users to next steps. The usage is consistent with the basic button component, but more styles are added in the extended button component.
Sample code
See the sample codes in different languages:
.json
{
"defaultTitle": "Button",
"usingComponents": {
"button": "mini-ali-ui/es/button/index",
"radio": "mini-ali-ui/es/am-radio/index",
"checkbox": "mini-ali-ui/es/am-checkbox/index"
}
}
.axml
<view class="container">
<button onTap="onTest" showLoading="{{showLoading}}" dataName="{{dataName}}" type="{{type}}" subtitle="{{subtitle}}" disabled="{{disabled}}" shape="{{shape}}" capsuleSize="{{capsuleSize}}" capsuleMinWidth="{{capsuleMinWidth}}">
{{title}}
</button>
<view>main title</view>
<input value="{{title}}" onInput="titleChange"/>
<view>subtitle</view>
<input value="{{subtitle}}" onInput="subtitleChange"/>
<view>button type</view>
<radio-group class="radio-group" onChange="typeChange" name="type">
<label class="radio" a:for="{{types}}" key="label-{{index}}">
<radio value="{{item.name}}" checked="{{item.checked}}" />
<text class="radio-text">{{item.value}}</text>
</label>
</radio-group>
<view>shape</view>
<radio-group class="radio-group" onChange="shapeChange" name="shape">
<label class="radio" a:for="{{shapes}}" key="label-{{index}}">
<radio value="{{item.name}}" checked="{{item.checked}}" />
<text class="radio-text">{{item.value}}</text>
</label>
</radio-group>
<view>capsule button size</view>
<radio-group class="radio-group" onChange="sizeChange" name="size">
<label class="radio" a:for="{{capsuleSizes}}" key="label-{{index}}">
<radio value="{{item.name}}" checked="{{item.checked}}" />
<text class="radio-text">{{item.value}}</text>
</label>
</radio-group>
<view>disable or not</view>
<checkbox onChange='onDisableChange'/>
<view>Enable minimum width of capsule button or not</view>
<checkbox onChange='onMinWidthChange'/>
<view>achieve loading or not</view>
<checkbox onChange='onLoadingChange'/>
</view>
.acss
.container {
padding: 20rpx;
}
.container button {
margin-bottom: 24rpx;
}
.js
Page({
data: {
title: 'push-button control Normal',
subtitle: '',
disabled: false,
dataName: '1',
type: '',
shape: 'default',
capsuleSize: 'medium',
capsuleMinWidth: false,
showLoading: false,
types: [
{ name: 'default', value: 'default', checked: true },
{ name: 'primary', value: 'primary' },
{ name: 'ghost', value: 'ghost' },
{ name: 'text', value: 'text' },
{ name: 'warn', value: 'warn' },
{ name: 'warn-ghost', value: 'warn-ghost' },
{ name: 'light', value: 'light' },
],
shapes: [
{ name: 'default', value: 'default', checked: true },
{ name: 'capsule', value: 'capsule' },
],
capsuleSizes: [
{ name: 'small', value: 'small' },
{ name: 'medium', value: 'medium', checked: true },
{ name: 'large', value: 'large' },
],
},
onLoad() {
},
typeChange(e) {
this.setData({
type: e.detail.value,
});
},
shapeChange(e) {
this.setData({
shape: e.detail.value,
});
},
sizeChange(e) {
this.setData({
capsuleSize: e.detail.value,
});
},
titleChange(e) {
this.setData({
title: e.detail.value,
});
},
subtitleChange(e) {
this.setData({
subtitle: e.detail.value,
});
},
onDisableChange(e) {
this.setData({
disabled: e.detail.value,
});
},
onMinWidthChange(e) {
this.setData({
capsuleMinWidth: e.detail.value,
});
},
onTap() {
// e.target.dataset.name
},
onLoadingChange(e) {
this.setData({
showLoading: e.detail.value,
});
},
});
Parameters
Property | Type | Description |
type | String | Button style. Valid values are:
The default value is |
subtitle | String | Subtitle. |
shape | String | Button shape. Valid values are:
The default value is |
capsuleSize | String | Capsule button size. Valid values are:
The default value is |
capsuleMinWidth | Boolean | An indicator of whether to use the minimum width for the capsule button. The default value is |
disabled | Boolean | An indicator of whether to disable the button. The default value is |
showLoading | Boolean | An indicator of whether to display the loading icon on the button. The default value is |
hover-class | String | Style class after the button is pressed. The default class name is |
hover-start-time | Number | The duration in milliseconds between two moments. One moment is the time when users tap the button and the other is the time when the button changes to the tapped status. The default value is |
hover-stay-time | Number | The duration in milliseconds that the tapped status lasts after users tap the button. The default value is |
hover-stop-propagation | Boolean | An indicator of whether to prevent the tapped status from the parent element of the current element. The default value is |
form-type | String | The button type that is used in the form component. Valid values are:
When users tap the button, the |
open-type | String | Open capability, such as the payment capability. |
scope | String | Authorization scope, which is valid when the value of open-type is |
onTap | EventHandle | The event that is triggered when users tap the button. |
app-parameter | String | Parameters that are transmitted to the opened app, which are valid when the value of open-type is |