Button

2024-05-31 10:14

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