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

type

String

Button style. Valid values are:

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

The default value is default.

subtitle

String

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.

capsuleMinWidth

Boolean

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

disabled

Boolean

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

showLoading

Boolean

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

hover-class

String

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

hover-stay-time

Number

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

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

form-type

String

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

String

Open capability, such as the payment capability.

scope

String

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

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