Represents the button.
Since: 1.0.0
Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
size | string | default | No | Button size. Valid values:
|
type | string | default | No | Button style. Valid values:
|
plain | boolean | false | No | Whether the button is hollow. |
disabled | boolean | false | No | Whether the button is disabled. |
loading | boolean | false | No | Whether to display the loading icon before the text. |
form-type | string | Type of the event triggered when the form component is tapped. Valid values:
| ||
open-type | string | - | No | Open capabilities of the atomic service, which cannot be modified after initialization. Valid values:
Since version 1.0.6, launchApp is supported.
|
hover-class | string | button-hover | No | Pressed effect of the button. The value "none" indicates no pressed effect. |
hover-stop-propagation | boolean | false | No | Whether to disable the pressed effect of the ancestor node. |
hover-start-time | number | 20 | No | Delay before the pressed state appears upon pressing, in milliseconds. |
hover-stay-time | number | 70 | No | Retention time of the pressed state after the finger is lifted, in milliseconds. |
app-bundle-name | string | - | No | Bundle name of the ability to be launched, valid when open-type is set to launchApp. Since: 1.0.6 |
app-module-name | string | - | No | Module name of the ability to be launched, valid when open-type is set to launchApp. Since: 1.0.6 |
app-ability-name | string | - | No | Ability to be launched, valid when open-type is set to launchApp. Since: 1.0.6 |
app-parameters | Object | - | No | Custom parameters for ability launch, valid when open-type is set to launchApp. Since: 1.0.6 |
bindgetphonenumber | eventhandle | - | No | Callback for obtaining the user's phone number, valid when open-type is set to "getPhoneNumber". |
bindopensetting | eventhandle | - | No | Callback after the authorization setting page is opened, valid when open-type is set to "openSetting". The callback receives data returned by has.openSetting. |
bindlaunchapp | eventhandle | - | No | Callback after an application is successfully launched, valid when open-type is set to launchApp. Since: 1.0.6 |
binderror | eventhandle | - | No | Callback after an error occurs during the use of an open capability, valid when open-type is set to launchApp. Since: 1.0.6 |
HXML file:
<import src="../../../common/head.hxml"/>
<import src="../../../common/foot.hxml"/>
<view class="container">
<scroll-view class="myScoll" scroll-y="true" scroll-x="true">
<template is="head" data="{{title: 'button'}}"/>
<button type="{{setType}}" size="{{setSize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="showtoast" hover-class="{{hover}}"> Button style </button>
<view class="ascf-cell ascf-cell_switch">
<view class="ascf-cell__bd">Hollow</view>
<view class="ascf-cell__ft">
<switch checked="{{plain}}" bindchange="changePlain"/>
</view>
</view>
<view class="ascf-cell ascf-cell_switch">
<view class="ascf-cell__bd">Disabled</view>
<view class="ascf-cell__ft">
<switch checked="{{disabled}}" bindchange="changeDisabled"/>
</view>
</view>
<view class="ascf-cell ascf-cell_switch">
<view class="ascf-cell__bd">Loading icon</view>
<view class="ascf-cell__ft">
<switch checked="{{loading}}" bindchange="changeLoading"/>
</view>
</view>
<view style="margin-left: 30rpx;">Button size settings</view>
<view style="flex-direction:row;">
<button size="mini" type="primary" style="margin-left: 30rpx;" bindtap="setMini">mini</button>
<button size="mini" type="primary" style="margin-left: 30rpx;" bindtap="setDefault">default</button>
</view>
<view style="margin-left: 30rpx;">Button style settings</view>
<view style="flex-direction:row;">
<button size="mini" type="primary" style="margin-left: 30rpx;" bindtap="setDefault1">default</button>
<button size="mini" type="primary" style="margin-left: 30rpx;" bindtap="setPrimary">primary</button>
<button size="mini" type="primary" style="margin-left: 30rpx;" bindtap="setWarn">warn</button>
</view>
<view style="margin-left: 30rpx;">Pressed effect verification</view>
<view style="flex-direction:row;">
<button size="mini" style="margin-left: 30rpx;" bindtap="setNone" hover-class="none">none</button>
<button size="mini" style="margin-left: 30rpx;" bindtap="setHover" hover-class="button-hover">button-hover</button>
<button size="mini" style="margin-left: 30rpx;" bindtap="setOther" hover-class="other-button-hover">Custom</button>
</view>
<view class="viewclass" hover-class="wsui-btn__hover_list">
<button bindtap="showtoast" hover-class="hover" hover-stop-propagation="{{isstop}}" hover-start-time="{{starttime}}" hover-stay-time="{{staytime}}"> Pressed effect </button>
</view>
<view class="ascf-cell ascf-cell_switch">
<view class="ascf-cell__bd">Whether to disable the pressed effect of the ancestor node</view>
<view class="ascf-cell__ft">
<switch checked="{{isstop}}" bindchange="changeisstop"/>
</view>
</view>
<view class="page-section-title">
<text>hover-start-time(ms)</text>
<text class="info">{{starttime}}</text>
</view>
<slider bindchange="starttimeChange" value="{{starttime}}" min="0" max="1000"/>
<view class="page-section-title">
<text>hover-stay-time(ms)</text>
<text class="info">{{staytime}}</text>
</view>
<slider bindchange="staytimeChange" value="{{staytime}}" min="0" max="1000"/>
<button type="primary" open-type="launchApp" bindlaunchapp="handleLaunchAppSuccess" binderror="handleLaunchAppError" app-bundle-name="com.huawei.hmos.calendar" app-ability-name="MainAbility">Open Calendar</button>
<view class="page-body">
<view class="btn-area" id="buttonContainer">
<button type="primary">Primary button (Normal)</button>
<button type="primary" loading="true">Primary button (Loading)</button>
<button type="primary" disabled="true">Primary button (Disabled)</button>
<button type="default">Secondary button (Normal)</button>
<button type="default" disabled="true">Secondary button (Disabled)</button>
<button type="warn">Warning operation (Normal)</button>
<button type="warn" disabled="true">Warning operation (Disabled)</button>
<view class="button-sp-area">
<button type="primary" plain="true">Button</button>
<button type="primary" disabled="true" plain="true">Disabled button</button>
<button type="default" plain="true">Button</button>
<button type="default" disabled="true" plain="true">Button</button>
<button class="mini-btn" type="primary" size="mini">Button</button>
<button class="mini-btn" type="default" size="mini">Button</button>
<button class="mini-btn" type="warn" size="mini">Button</button>
</view>
</view>
</view>
<template is="foot"/>
</scroll-view>
</view> JS file:
const types = ['default', 'primary', 'warn']
const pageObject = {
data: {
defaultSize: 'default',
primarySize: 'default',
warnSize: 'default',
disabled: false,
plain: false,
loading: false,
setSize:'default',
setType: 'default',
hover:'button-hover',
isstop:true,
starttime:20,
staytime:70
},
onShareAppMessage() {
return {
title: 'button',
path: 'page/component/pages/button/button'
}
},
showtoast(){
has.showToast({
title: 'Tap the button',
})
},
setPlain() {
this.setData({
plain: !this.data.plain
})
},
setLoading() {
this.setData({
loading: !this.data.loading
})
},
setMini(){
this.setData({
setSize: 'mini'
})
},
setDefault() {
this.setData({
setSize: 'default'
})
},
setDefault1(){
this.setData({
setType: 'default',
})
},
setPrimary(){
this.setData({
setType: 'primary',
})
},
setWarn() {
this.setData({
setType: 'warn',
})
},
changePlain(){
this.setData({
plain:!this.data.plain
})
},
changeDisabled(){
this.setData({
disabled:!this.data.disabled
})
},
changeLoading(){
this.setData({
loading:!this.data.loading
})
},
setNone(){
this.setData({
hover:'none'
})
has.showToast({
title: 'none',
})
},
setHover() {
this.setData({
hover: 'button-hover'
})
has.showToast({
title: 'button-hover',
})
},
setOther() {
this.setData({
hover: 'other-button-hover'
})
has.showToast({
title: 'The button turns blue upon a tap',
})
},
changeisstop() {
this.setData({
isstop:!this.data.isstop
})
},
starttimeChange(e){
this.setData({
starttime:e.detail.value
})
},
staytimeChange(e){
this.setData({
staytime:e.detail.value
})
},
handleLaunchAppSuccess: function (t) {
console.log('handleLaunchAppSuccess');
},
handleLaunchAppError: function (t) {
console.log('handleLaunchAppError');
}
}
for (let i = 0; i < types.length; ++i) {
(function (type) {
pageObject[type] = function () {
const key = type + 'Size'
const changedData = {}
changedData[key] =
this.data[key] === 'default' ? 'mini' : 'default'
this.setData(changedData)
}
}(types[i]))
}
Page(pageObject) CSS file:
@import "../../../common/lib/ascf.css";
button{
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.button-sp-area{
margin: 0 auto;
width: 60%;
}
.mini-btn{
margin-right: 10rpx;
}
/** Add a custom button style class of the pressed state.**/
.other-button-hover {
opacity: 0.9;
background: blue;
}
.page-section-title{
margin-top: 60rpx;
position: relative;
}
.info{
position: absolute;
right: 0;
color: #353535;
font-size: 30rpx;
}
.viewclass{
margin: 10px;
width: 300px;
height:60px;
background-color: gray;
}
.wsui-btn__hover_list {
opacity: 0.8;
background: #faf602;
}
.hover{
opacity: 0.9;
background: pink;
}
.myScoll {
width: 100%;
background-color: #F0F4F3;
height: 1300rpx;
white-space: nowrap;
}