Button
Button.
Type
ComponentType<ButtonProps>
Examples
- React
- Vue
export default class PageButton extends Component {
state = {
btn: [
{
text: 'Primary Normal',
size: 'default',
type: 'primary'
},
{
text: 'Primary Loading',
size: 'default',
type: 'primary',
loading: true,
},
{
text: 'Primary Disabled',
size: 'default',
type: 'primary',
disabled: true,
},
{
text: 'Secondary Normal',
size: 'default',
type: 'default'
},
{
text: 'Secondary Disabled',
size: 'default',
type: 'default',
disabled: true,
},
{
text: 'Wran Normal',
size: 'default',
type: 'warn'
},
{
text: 'Wran Disabled',
size: 'default',
type: 'warn',
disabled: true,
}
]
}
render () {
return (
<View className='container'>
{this.state.btn.map(item => {
return (
<Button
size={item.size ? item.size : ''}
type={item.type ? item.type : ''}
loading={item.loading ? item.loading : false}
disabled={item.disabled ? item.disabled : false}
>
{item.text}
</Button>
)
})}
<Button className='btn-max-w' plain type='primary'>button</Button>
<Button className='btn-max-w' plain type='primary' disabled>disabled button</Button>
<Button className='btn-max-w' plain >button</Button>
<Button className='btn-max-w' plain disabled >button</Button>
<Button size='mini' type='primary'>button</Button>
<Button size='mini' >button</Button>
<Button size='mini' type='warn'>button</Button>
</View>
)
}
}
<template>
<view class="container">
<button
v-for="item in btn"
:size="item.size ? item.size : ''"
:type="item.type ? item.type : ''"
:loading="item.loading ? item.loading : false"
:disabled="item.disabled ? item.disabled : false"
>
{{ item.text }}
</button>
<button class="btn-max-w" :plain="true" type="primary">button</button>
<button class="btn-max-w" :plain="true" type="primary" :disabled="true">disabled button</button>
<button class="btn-max-w" :plain="true">button</button>
<button class="btn-max-w" :plain="true" :disabled="true">button</button>
<button size="mini" type="primary">button</button>
<button size="mini" >button</button>
<button size="mini" type="warn">button</button>
</view>
</template>
<script>
export default {
data() {
return {
btn: [
{
text: 'Primary Normal',
size: 'default',
type: 'primary'
},
{
text: 'Primary Loading',
size: 'default',
type: 'primary',
loading: true,
},
{
text: 'Primary Disabled',
size: 'default',
type: 'primary',
disabled: true,
},
{
text: 'Secondary Normal',
size: 'default',
type: 'default'
},
{
text: 'Secondary Disabled',
size: 'default',
type: 'default',
disabled: true,
},
{
text: 'Secondary Normal',
size: 'default',
type: 'warn'
},
{
text: 'Secondary Disabled',
size: 'default',
type: 'warn',
disabled: true,
}
]
}
}
}
</script>
ButtonProps
Property | Type | Default | Required | Description |
---|---|---|---|---|
size | "default" | "mini" | default | No | The size of the button. |
type | "default" | "primary" | "warn" | default | No | The style class of the button. |
plain | boolean | false | No | Specifies whether the button is hollow with transparent background. |
disabled | boolean | false | No | Specifies whether to disable the component. |
loading | boolean | false | No | Specifies whether a loading icon exists before the name. |
formType | "submit" | "reset" | No | Used in the <form/> component. When it is tapped, the submit and reset events of the <form/> component are separately triggered. | |
openType | "contact" | "contactShare" | "share" | "getRealnameAuthInfo" | "getAuthorize" | "getPhoneNumber" | "getUserInfo" | "lifestyle" | "launchApp" | "openSetting" | "feedback" | No | Open capability of WeChat | |
hoverClass | string | button-hover | No | The style class the button that is tapped. When hover-class="none" , the tap state is not displayed. |
hoverStyle | string | none | No | Since RN does not support Class, the Button component on the RN side implements the hoverStyle property, which is written similarly to style, except that the style of hoverStyle specifies the style to be pressed. |
hoverStopPropagation | boolean | false | No | Specifies whether to block the tapped state from the ancestor node of this node. |
hoverStartTime | number | 20 | No | Specifies the time elapsed after tapping but before the tapped state occurs. It is measured in milliseconds. |
hoverStayTime | number | 70 | No | Specifies the duration when the tapped state retains after stopping tapping. It is measured in milliseconds. |
lang | "en" | "zh_CN" | "zh_TW" | No | Specifies the language of the returned user information. zh_CN: Simplified Chinese; zh_TW: Traditional Chinese; en: English. Pre-requisites: open-type="getUserInfo" | |
sessionFrom | string | No | The source of the chat. It is valid when open-type="contact" | |
sendMessageTitle | string | Current title | No | The title of the message card in the chat. It is valid when open-type="contact" |
sendMessagePath | string | Current title | No | The path of the Mini Program to which the message card in the chat is tapped to navigate. It is valid when open-type="contact" |
sendMessageImg | string | Screenshot | No | The image of the message card in the chat. It is valid when open-type="contact" |
appParameter | string | No | The parameter passed to the app when it is launched. It is valid when open-type="launchApp" | |
scope | "userInfo" | "phoneNumber" | No | Alipay Mini-Program scope. It is valid when open-type="getAuthorize" | |
showMessageCard | boolean | false | No | Specifies whether to display message cards in a chat. It is valid when open-type="contact" |
onGetUserInfo | BaseEventOrigFunction<onGetUserInfoEventDetail> | No | When a user taps this button, the user information obtained is returned. The detail data that is obtained via callback is consistent with that returned by Taro.getUserInfo .It is valid when open-type="getUserInfo" | |
onGetAuthorize | BaseEventOrigFunction<any> | No | Callback used to get the authorization of Alipay member information. It is valid when open-type="getAuthorize" | |
onContact | BaseEventOrigFunction<onContactEventDetail> | No | Callback used to obtain customer messages. It is valid when open-type="contact" . | |
onGetPhoneNumber | BaseEventOrigFunction<onGetPhoneNumberEventDetail> | No | Callback used to obtain the user's mobile number. It is valid when open-type="getphonenumber" | |
onGetRealnameAuthInfo | BaseEventOrigFunction<any> | No | Callback used to obtain the user's real name. It is valid when open-type="getRealnameAuthInfo" | |
onError | BaseEventOrigFunction<any> | No | Callback used when an error occurred while using open capability. It is valid when open-type="launchApp" | |
onOpenSetting | BaseEventOrigFunction<onOpenSettingEventDetail> | No | Callback used after the authorization setting page is opened. It is valid when open-type="openSetting" | |
onLaunchapp | BaseEventOrigFunction<any> | No | Callback used after the app is launched. It is valid when open-type="launchApp" |
API Support
API | WeChat Mini-Program | Alipay Mini-Program | H5 | React Native |
---|---|---|---|---|
ButtonProps.size | ✔️ | ✔️ | ✔️ | |
ButtonProps.type | ✔️ | ✔️ | ✔️ | |
ButtonProps.plain | ✔️ | ✔️ | ✔️ | |
ButtonProps.disabled | ✔️ | ✔️ | ✔️ | |
ButtonProps.loading | ✔️ | ✔️ | ✔️ | |
ButtonProps.formType | ✔️ | |||
ButtonProps.openType | ✔️ | |||
ButtonProps.hoverClass | ✔️ | ✔️ | ||
ButtonProps.hoverStyle | ✔️ | |||
ButtonProps.hoverStopPropagation | ✔️ | |||
ButtonProps.hoverStartTime | ✔️ | ✔️ | ✔️ | |
ButtonProps.hoverStayTime | ✔️ | ✔️ | ✔️ | |
ButtonProps.lang | ✔️ | |||
ButtonProps.sessionFrom | ✔️ | |||
ButtonProps.sendMessageTitle | ✔️ | |||
ButtonProps.sendMessagePath | ✔️ | |||
ButtonProps.sendMessageImg | ✔️ | |||
ButtonProps.appParameter | ✔️ | |||
ButtonProps.scope | ✔️ | |||
ButtonProps.onGetUserInfo | ✔️ | |||
ButtonProps.onGetAuthorize | ✔️ | |||
ButtonProps.onContact | ✔️ | |||
ButtonProps.onGetPhoneNumber | ✔️ | |||
ButtonProps.onGetRealnameAuthInfo | ✔️ | |||
ButtonProps.onError | ✔️ | |||
ButtonProps.onOpenSetting | ✔️ | |||
ButtonProps.onLaunchapp | ✔️ |
size
Valid values of size
Value | Description |
---|---|
default | Default size |
mini | Minimum size |
type
Valid values of type
Value | Description |
---|---|
primary | Green |
default | White |
warn | Red |
formType
Valid values of form-type
Value | Description |
---|---|
submit | Submits the form |
reset | Resets the form |
openType
Valid values of open-type
Value | Description |
---|---|
contact | Opens a customer service chat. If the user taps the message card in the chat to return to a Mini Program, the specific information can be obtained from the bindcontact callback. See details. |
contactShare | |
share | Triggers forwarding. Before use, read User Guide. |
getRealnameAuthInfo | |
getAuthorize | |
getPhoneNumber | Gets the user's mobile number. The user information can be obtained from the bindgetphonenumber callback. Vue3 example: <button @getphonenumber="callback" /> See details |
getUserInfo | Gets user information. The user information can be obtained from the bindgetuserinfo callback. |
lifestyle | |
launchApp | Opens the app. The parameters passed to the app can be set via the app-parameter property. See details |
openSetting | Opens the authorization setting page. |
feedback | Opens the Feedback page, where users can submit feedback and upload logs. Developers can log in to the Mini Program admin console and open the Customer Service Feedback page from the left-side menu to get the feedback. |
lang
Valid values of lang
Value | Description |
---|---|
en | English |
zh_CN | Simplified Chinese |
zh_TW | Traditional Chinese |
gender
Valid values of gender
Value | Description |
---|---|
0 | Unknown |
1 | Male |
2 | Female |
onGetUserInfoEventDetail
Param | Type | Description |
---|---|---|
userInfo | { nickName: string; avatarUrl: string; gender: 0 | 1 | 2; province: string; city: string; country: string; } | |
rawData | string | Raw data JSON strings that do not include sensitive information and are used to calculate the signature. |
signature | string | Use sha1(rawData + sessionkey) to get the string for verifying user information |
encryptedData | string | Encrypted data with complete user information, including sensitive data. |
iv | string | The initial vector of the encryption algorithm |
errMsg | string |
onContactEventDetail
Param | Type | Description |
---|---|---|
errMsg | string | |
path | string | The path specified by the mini-program's message. |
query | Record<string, any> | The query parameters specified by the mini-program's message. |
onGetPhoneNumberEventDetail
Param | Type | Description |
---|---|---|
errMsg | string | |
encryptedData | string | Encrypted data with complete user information including sensitive data. |
iv | string | The initial vector of the encryption algorithm. |
onOpenSettingEventDetail
Param | Type |
---|---|
errMsg | string |
authSetting | Record<string, boolean> |
API Support
API | WeChat Mini-Program | H5 | React Native |
---|---|---|---|
Button | ✔️ | ✔️ | ✔️ |