Button

按钮

属性及支持度

H5ReactNative属性名类型默认值说明
typeStringdefault按钮的样式类型
sizeStringdefault按钮的大小 px
plainBooleanfalse按钮是否镂空,背景色透明
disabledBooleanfalse是否禁用
loadingBooleanfalse名称前是否带 loading 图标
X (支持 hoverStyle 属性,但框架未支持 hoverClass)hoverClassStringbutton-hover指定按钮按下去的样式类。当 hover-class='none' 时,没有点击态效果
hoverStartTimeNumber20按住后多久出现点击态,单位毫秒
hoverStayTimeNumber70手指松开后点击态保留时间,单位毫秒
XXonGetUserInfoHandler微信小程序open-type='getUserInfo'时,用户点击该按钮,会返回获取到的用户信息,从返回参数的 detail 中获取到的值同 wx.getUserInfo

其他相关属性请看各小程序官方文档

微信小程序 Button

百度小程序 Button

支付宝小程序 Button

字节跳动小程序 Button

示例:
  1. importTaro,{Component}from'@tarojs/taro'
  2. import{View,Text,Button}from'@tarojs/components'
  3. exportdefaultclassPageButtonextendsComponent{
  4. state ={
  5. btn:[
  6. {
  7. text:'页面主操作 Normal',
  8. size:'default',
  9. type:'primary'
  10. },
  11. {
  12. text:'页面主操作 Loading',
  13. size:'default',
  14. type:'primary',
  15. loading:true,
  16. },
  17. {
  18. text:'页面主操作 Disabled',
  19. size:'default',
  20. type:'primary',
  21. disabled:true,
  22. },
  23. {
  24. text:'页面次要操作 Normal',
  25. size:'default',
  26. type:'default'
  27. },
  28. {
  29. text:'页面次要操作 Disabled',
  30. size:'default',
  31. type:'default',
  32. disabled:true,
  33. },
  34. {
  35. text:'警告类操作 Normal',
  36. size:'default',
  37. type:'warn'
  38. },
  39. {
  40. text:'警告类操作 Disabled',
  41. size:'default',
  42. type:'warn',
  43. disabled:true,
  44. }
  45. ]
  46. }
  47. render (){
  48. return(
  49. <View className='container'>
  50. {this.state.btn.map(item =>{
  51. return(
  52. <Button
  53. size={item.size ? item.size :''}
  54. type={item.type ? item.type :''}
  55. loading={item.loading ? item.loading :false}
  56. disabled={item.disabled ? item.disabled :false}
  57. >
  58. {item.text}
  59. </Button>
  60. )
  61. })}
  62. <Button className='btn-max-w' plain type='primary'>按钮</Button>
  63. <Button className='btn-max-w' plain type='primary' disabled>不可点击的按钮</Button>
  64. <Button className='btn-max-w' plain >按钮</Button>
  65. <Button className='btn-max-w' plain disabled >按钮</Button>
  66. <Button size='mini' type='primary'>按钮</Button>
  67. <Button size='mini'>按钮</Button>
  68. <Button size='mini' type='warn'>按钮</Button>
  69. </View>
  70. )
  71. }
  72. }