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

copy
{
 "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

copy
<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

copy
.container {
  padding: 20rpx;
}

.container button {
  margin-bottom: 24rpx;
}

.js

copy
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

typeString

Button style. Valid values are:

  • default
  • primary
  • ghost
  • warn
  • warn-ghost
  • text
  • light

The default value is default.

subtitleString

Subtitle.

shape

String

Button shape. Valid values are:

  • default
  • capsule

The default value is default.

capsuleSize

String

Capsule button size. Valid values are:

  • large
  • medium
  • small

The default value is medium.

capsuleMinWidthBoolean

An indicator of whether to use the minimum width for the capsule button. The default value is false.

disabledBoolean

An indicator of whether to disable the button. The default value is false.

showLoadingBoolean

An indicator of whether to display the loading icon on the button. The default value is false.

hover-classString

Style class after the button is pressed. The default class name is button-hover and the style is {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}. If the value is none, no style changes occur when users press the button.

hover-start-timeNumber

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 20.

hover-stay-timeNumber

The duration in milliseconds that the tapped status lasts after users tap the button. The default value is 70.

hover-stop-propagationBoolean

An indicator of whether to prevent the tapped status from the parent element of the current element. The default value is false.

form-typeString

The button type that is used in the form component. Valid values are:

  • submit
  • reset

When users tap the button, the onSubmit event or the onReset event is triggered.

open-typeString

Open capability, such as the payment capability.

scopeString

Authorization scope, which is valid when the value of open-type is getAuthorize.

onTapEventHandle

The event that is triggered when users tap the button.

app-parameterString

Parameters that are transmitted to the opened app, which are valid when the value of open-type is launchApp.