All Products
Search
Document Center

Mobile Platform as a Service:button

Last Updated:Jul 27, 2023

This topic describes the button component.

Attribute

Type

Default value

Description

Minimum version

size

String

default

Possible values are default and mini.

-

type

String

default

The style of the button, which can be primary, default, or warn.

-

plain

Boolean

false

Whether the button is hollow.

-

disabled

Boolean

false

Whether to disable the button.

-

loading

Boolean

false

Whether the button text is accompanied by the loading icon.

-

hover-class

String

button-hover

The style class to which the button is pressed. hover-class="none" indicates no clicked effect.

-

hover-start-time

Number

20

The number of events after which the clicked state appears, in milliseconds.

-

hover-stay-time

Number

70

The retention period of the clicked state after you release the finger, in milliseconds.

-

hover-stop-propagation

Boolean

false

Whether to prevent the ancestor element of the current element from appearing the clicked state.

1.10.0

form-type

String

-

Possible values are submit and reset. This attribute is used for components, and clicking it triggers the submit or reset event.

-

open-type

String

-

Open capabilities

1.1.0

scope

String

-

This attribute is valid when open-type is set to getAuthorize.

1.11.0

onTap

EventHandle

-

Tap.

-

Note

button-hover defaults to {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}.

open-type possible values

Value

Description

Minimum version

Share

This attribute triggers custom sharing. You can determine its state by running canIUse('button.open-type.share').

1.1.0

getAuthorize

Support Mini Program authorization. You can determine its state by running canIUse('button.open-type.getAuthorize').

1.11.0

contactShare

Share with friends in the address book. You can determine its state by running canIUse('button.open-type.contactShare').

1.11.0

scope possible values

When open-type is set to getAuthorize, you can set scope to one of the following values:

Value

Description

Minimum version

phoneNumber

Display the authorization interface, and the user can authorize the Mini Program to obtain the user’s mobile number.

1.11.0

Code sample

<view class="page">
  <view class="section">
    <view class="title">Type</view>
    <button type="default">default</button>
    <button type="primary">primary</button>
    <button type="warn">warn</button>
  </view>
  <view class="section" style="background:#ddd;">
    <view class="title">Misc</view>
    <button type="default" plain>plain</button>
    <button type="default" disabled>disabled</button>
    <button type="default" loading={{true}}>loading</button>
    <button type="default" hover-class="red">hover-red</button>
  </view>
  <view class="section">
    <view class="title">Size</view>
    <button type="default" size="mini">mini</button>
  </view>
  <view class="section">
    <view class="title">Type</view>
    <form onSubmit="onSubmit" onReset="onReset">
      <button form-type="submit">submit</button>
      <button form-type="reset">reset</button>
    </form>
  </view>
</view>