WeChat applet button component usage details, button Usage Details

Detailed instructions on the use of the mini-program button component and the use of the button

This article shares the usage of the mini-program button component for your reference. The specific content is as follows:

Display

Common attributes of the button component

• Size: default, mini -- default are block-level buttons, and mini is a small button
• Type: primary, default, warn -- primary submitted successfully, default gray, warn Warning Color
• Plain: true, false -- whether the button is hollow out, and the background color is transparent
• Disabled: true, false -- disable
• Loading: true, false -- whether to include the loading icon before the name
  

WXML

<View class = "tui-btn-group"> <view class = "tui-btn-content"> <button size = "{defaultSize}" bindtap = "default" hover-class = "other-button-hover"> default </button> </view> <view class = "tui-btn-content"> <button type = "primary" size = "{primarySize }}" bindtap =" primary "> primary </button> </view> <view class =" tui-btn-content "> <button type = "warn" size = "{warnSize}" bindtap = "warn"> warn </button> </view> <view class = "tui-btn-content"> <button bindtap = "setDisabled" disabled = "{disabled}" type = "primary"> click the set button to set the disabled property to true </button> </view> <view class =" tui-btn-content "> <button bindtap =" setPlain "plain =" {plain} "> click set button plain properties </button> </view> <view class = "tui-btn-content"> <button bindtap = "setLoading" loading = "{loading}" type = "warn"> click set button loading Properties </button> </view>

WXSS

. Tui-btn-group {padding: 10px ;}. tui-btn-content {height: 60px; line-height: 60px;}/** modify the default click style class of the button **/. button-hover {background-color: red;}/** add Custom button click Style Class **/. other-button-hover {background-color: blue ;}

JS

Var types = ['default', 'primary', 'warn'] var pageObject = {data: {defaultSize: 'default', primarySize: 'default', warnSize: 'default', disabled: false, plain: false, loading: false}, setDisabled: function (e) {this. setData ({disabled :! This. data. disabled})}, setPlain: function (e) {this. setData ({plain :! This. data. plain})}, setLoading: function (e) {this. setData ({loading :! This. data. loading})} // loop to 'default', 'Primary ', and 'warn' to create a function for (var I = 0; I <types. length; ++ I) {(function (type) {pageObject [type] = function (e) {var key = type + 'SIZE' var changedData = {} changedData [key] = this. data [key] = 'default '? 'Mini ': 'default' this. setData (changedData)}) (types [I])} Page (pageObject );

Download DEMO

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.