Button
按钮
属性及支持度
H5 | ReactNative | 属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|---|---|
✔ | ✔ | type | String | default | 按钮的样式类型 |
✔ | ✔ | size | String | default | 按钮的大小 px |
✔ | ✔ | plain | Boolean | false | 按钮是否镂空,背景色透明 |
✔ | ✔ | disabled | Boolean | false | 是否禁用 |
✔ | ✔ | loading | Boolean | false | 名称前是否带 loading 图标 |
✔ | X (支持 hoverStyle 属性,但框架未支持 hoverClass) | hoverClass | String | button-hover | 指定按钮按下去的样式类。当 hover-class='none' 时,没有点击态效果 |
✔ | ✔ | hoverStartTime | Number | 20 | 按住后多久出现点击态,单位毫秒 |
✔ | ✔ | hoverStayTime | Number | 70 | 手指松开后点击态保留时间,单位毫秒 |
X | X | onGetUserInfo | Handler | 微信小程序open-type='getUserInfo'时,用户点击该按钮,会返回获取到的用户信息,从返回参数的 detail 中获取到的值同 wx.getUserInfo |
其他相关属性请看各小程序官方文档
示例:
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
export default class PageButton extends Component {
state = {
btn: [
{
text: '页面主操作 Normal',
size: 'default',
type: 'primary'
},
{
text: '页面主操作 Loading',
size: 'default',
type: 'primary',
loading: true,
},
{
text: '页面主操作 Disabled',
size: 'default',
type: 'primary',
disabled: true,
},
{
text: '页面次要操作 Normal',
size: 'default',
type: 'default'
},
{
text: '页面次要操作 Disabled',
size: 'default',
type: 'default',
disabled: true,
},
{
text: '警告类操作 Normal',
size: 'default',
type: 'warn'
},
{
text: '警告类操作 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 className='btn-max-w' plain type='primary' disabled>不可点击的按钮</Button>
<Button className='btn-max-w' plain >按钮</Button>
<Button className='btn-max-w' plain disabled >按钮</Button>
<Button size='mini' type='primary'>按钮</Button>
<Button size='mini' >按钮</Button>
<Button size='mini' type='warn'>按钮</Button>
</View>
)
}
}