button

2024-07-23 07:35

Button.

Property	Type	Default	Description
size	String	default	Effective value default, mini.
type	String	default	Button style type, effective value primary, default, warn.
plain	Boolean	false	Hollow or not.
disabled	Boolean	false	Disable or not.
loading	Boolean	false	Button text preceded with loading icon or not.
hover-class	String	button-hover	Button pressed style class hover-class="none" indicates no pressed effect.
hover-start-time	Number	20	Pressed status shown in a period after being pressed, in milliseconds.
hover-stay-time	Number	70	Pressed status retention time after release, in milliseconds.
form-type	String		Effective value submit and reset, used for component, clicking triggers submit/reset event respectively.
onTap	EventHandle		Click.
open-type	String		Open ability.
scope	String		Valid when open-type is getAuthorize.

The Valid Value of open-type

Value	Description
getAuthorize	Support for Mini Program authorization.

The Valid Value of Scope

When open-type is getAuthorize , we can set scope to the following value：

Value	Description
userInfo	et user basic information.
phoneNumber	Get user's phone number.

Screenshot

Sample Code

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