Button

Button 按钮

代码示例

import { BfButton } from '@bud-fe/react-taro-ui';
import { View } from '@tarojs/components';
import React from 'react';
export default () => {
return (
<>
<View className="group-title">基础用法</View>
<BfButton>default</BfButton>
<BfButton type="primary">primary</BfButton>
<BfButton loading>default loading</BfButton>
<View className="group-title">size="mini"</View>
<BfButton size="mini">default mini</BfButton>
<BfButton type="primary" size="mini">
primary mini
</BfButton>
<BfButton loading type="primary" size="mini">
primary mini loading
</BfButton>
<BfButton size="mini" plain>
default mini
</BfButton>
<BfButton type="primary" size="mini" plain>
primary mini plain
</BfButton>
<BfButton loading type="primary" size="mini" plain>
primary mini plain loading
</BfButton>
<View className="group-title">size="mini" disabled</View>
<BfButton size="mini" disabled>
default mini disabled
</BfButton>
<BfButton type="primary" size="mini" disabled>
primary mini disabled
</BfButton>
<BfButton size="mini" plain disabled>
default mini plain disabled
</BfButton>
<BfButton type="primary" size="mini" plain disabled>
primary mini plain disabled
</BfButton>
</>
);
};

API

属性名描述类型默认值
type按钮类型"default" | "primary"default
children按钮包含的内容any--
size按钮的大小 @supported weapp, h5, rn, alipay, ttkeyof Sizedefault
plain按钮是否镂空,背景色透明 @supported weapp, h5, rn, alipaybooleanfalse
disabled是否禁用 @supported weapp, h5, rn, alipay, ttbooleanfalse
loading名称前是否带 loading 图标 @supported weapp, h5, rn, alipay, ttbooleanfalse
formType用于 `<form/>` 组件,点击分别会触发 `<form/>` 组件的 submit/reset 事件 @supported weapp, alipay, ttkeyof FormType--
openType微信开放能力 @supported weapp, alipay, qq, ttOpenType--
hoverClass指定按下去的样式类。当 `hover-class="none"` 时,没有点击态效果 @supported weapp, alipay, h5, tt @rn 支持 hoverStyle 属性,但框架未支持 hoverClassstringbutton-hover
hoverStyle由于 RN 不支持 Class,故 RN 端的 Button 组件实现了 `hoverStyle`属性,写法和 style 类似,只不过 `hoverStyle` 的样式是指定按下去的样式。 @supported rnStyleProp<ViewStyle>none
hoverStopPropagation指定是否阻止本节点的祖先节点出现点击态 @supported weapp, alipay, ttbooleanfalse
hoverStartTime按住后多久出现点击态,单位毫秒 @supported weapp, alipay, h5, rn, ttnumber20
hoverStayTime手指松开后点击态保留时间,单位毫秒 @supported weapp, alipay, h5, rn, ttnumber70
lang指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。 生效时机: `open-type="getUserInfo"` @supported weappkeyof Lang--
sessionFrom会话来源 生效时机:`open-type="contact"` @supported weappstring--
sendMessageTitle会话内消息卡片标题 生效时机:`open-type="contact"` @supported weappstring当前标题
sendMessagePath会话内消息卡片点击跳转小程序路径 生效时机:`open-type="contact"` @supported weappstring当前标题
sendMessageImg会话内消息卡片图片 生效时机:`open-type="contact"` @supported weappstring截图
appParameter打开 APP 时,向 APP 传递的参数 生效时机:`open-type="launchApp"` @supported weapp, qqstring--
businessId微信小程序子商户能力中,添加 business-id 字段指向子商户 生效时机:`open-type="contact"` @supported weappstring--
scope支付宝小程序 scope 生效时机:`open-type="getAuthorize"` @supported weapp"userInfo" | "phoneNumber"--
showMessageCard显示会话内消息卡片 生效时机:`open-type="contact"`booleanfalse
onGetUserInfo用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与 Taro.getUserInfo 返回的一致 生效时机: `open-type="getUserInfo"` @supported weappCommonEventFunction<onGetUserInfoEventDetail>--
onGetAuthorize支付宝获取会员基础信息授权回调 生效时机:`open-type="getAuthorize"` @supported alipayCommonEventFunction<any>--
onContact客服消息回调 生效时机:`open-type="contact"` @supported weappCommonEventFunction<onContactEventDetail>--
onGetPhoneNumber获取用户手机号回调 生效时机:`open-type="getphonenumber"` @supported weapp, ttCommonEventFunction<onGetPhoneNumberEventDetail>--
onGetRealNameAuthInfo获取用户实名 生效时机:`open-type="getRealnameAuthInfo"` @deprecated @supported weappCommonEventFunction<any>--
onError当使用开放能力时,发生错误的回调 生效时机:`open-type="launchApp"` @supported weappCommonEventFunction<any>--
onOpenSetting在打开授权设置页后回调 生效时机:`open-type="openSetting"` @supported weappCommonEventFunction<onOpenSettingEventDetail>--
onLaunchApp打开 APP 成功的回调 生效时机:`open-type="launchApp"` @supported weappCommonEventFunction<any>--
onChooseAvatar获取用户头像回调 生效时机:`open-type="chooseAvatar"` @supported weappCommonEventFunction<any>--
id组件的唯一标示, 保持整个页面唯一string--
className同 `class`,在 React/Nerv 里一般使用 `className` 作为 `class` 的代称string--
style组件的内联样式, 可以动态设置的内联样式string | CSSProperties--
key如果列表中项目的位置会动态改变或者有新的项目添加到列表中, 需要使用 `wx:key` 来指定列表中项目的唯一的标识符。string | number--
hidden组件是否显示, 所有组件默认显示boolean--
animation动画属性{ actions: TaroGeneral.IAnyObject[]; }--
ref引用LegacyRef<any>--
dangerouslySetInnerHTML渲染 HTML @see /docs/html{ __html: string; }--
onTouchStart手指触摸动作开始(event: ITouchEvent) => void--
onTouchMove手指触摸后移动(event: ITouchEvent) => void--
onTouchCancel手指触摸动作被打断,如来电提醒,弹窗(event: ITouchEvent) => void--
onTouchEnd手指触摸动作结束(event: ITouchEvent) => void--
onClick手指触摸后马上离开(event: ITouchEvent) => void--
onLongPress手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发(event: CommonEvent<any>) => void--
onLongClick手指触摸后,超过350ms再离开(推荐使用 longpress 事件代替)(event: CommonEvent<any>) => void--
onTransitionEnd会在 WXSS transition 或 Taro.createAnimation 动画结束后触发(event: CommonEvent<any>) => void--
onAnimationStart会在一个 WXSS animation 动画开始时触发(event: CommonEvent<any>) => void--
onAnimationIteration会在一个 WXSS animation 一次迭代结束时触发(event: CommonEvent<any>) => void--
onAnimationEnd会在一个 WXSS animation 动画完成时触发(event: CommonEvent<any>) => void--
onTouchForceChange在支持 3D Touch 的 iPhone 设备,重按时会触发(event: CommonEvent<any>) => void--
dumi10:24