暗黑模式
Button 按钮
点击扫码预览
23:47
组件名：rice-button
演示示例可扫模拟器状态栏上的二维码预览或 点击在线预览
用于触发一个操作
平台兼容性
uni-app x
| Android | iOS | 鸿蒙Next | 微信小程序 | h5 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
按钮类型
按钮支持 primary success warning error info default 六种类型，默认为 default。通过 type 属性进行定义。
html
<rice-button text="主要按钮" type="primary"/>
<rice-button text="成功按钮" type="success" />
<rice-button text="默认按钮" />
<rice-button text="警告按钮" type="warning" />
<rice-button text="危险按钮" type="error" />
<rice-button text="信息按钮" type="info" />朴素带浅色背景的按钮
通过 plain-fill 属性可以将按钮设置为朴素按钮，此时文字的颜色为按钮的颜色，按钮的背景色会根据color的值自动计算为较浅的颜色。
html
<rice-button plain-fill text="朴素浅色背景" type="primary" />
<rice-button plain-fill text="朴素浅色背景" type="success" />朴素按钮
通过 plain 属性可以设置为朴素按钮，此时文字的颜色为按钮的颜色，按钮的背景色为透明。
html
<rice-button plain text="朴素按钮" type="primary" />
<rice-button plain text="朴素按钮" type="success" />自定义颜色
通过 color 属性可以自定义按钮的颜色。暗黑模式下组件会根据color的值自动计算出对应的色值，如不需要计算，dark-colro 属性传none或颜色值即可。
html
<rice-button color="#8b60ef" text="紫 色" />
<rice-button color="#8b60ef" text="紫色朴素" plain-fill dark-color="none" />
<rice-button color="linear-gradient(to right, rgb(255, 140, 8), rgb(238, 10, 36))" text="渐变色" />图标按钮
通过 icon 属性可以设置按钮的图标。
html
<rice-button icon="edit" type="primary" icon-size="20" @click="handleClick" />
<rice-button icon="share" text="点击跳转页面" type="primary" plain-fill to="/pages/components/display/cell" />按钮形状
通过 shape 属性可以设置按钮的形状。
html
<rice-button shape="square" text="方形按钮" type="primary" />
<rice-button shape="round" text="圆角按钮" type="primary" />按钮尺寸
通过 size 属性可以设置按钮的尺寸大小。当然也可以通过 width 和 height 自定义按钮的宽高。
html
<rice-button size="mini" text="迷你按钮" type="primary" />
<rice-button size="small" text="小型按钮" type="primary" />
<rice-button size="large" text="大号按钮" type="primary" />
<rice-button height="40" width="210" text="自定义宽高" text-size="16" type="primary" />禁用状态
通过 disabled 属性可以禁用按钮，此时点击事件将失效。
html
<rice-button disabled text="禁用状态" type="primary"/>
<rice-button disabled text="禁用状态" plain-fill type="success" />加载状态
通过 loading 属性可以把按钮设置为加载中，可以通过loading-text设置加载状态下的文字，此时点击事件将失效。
html
<rice-button loading text="加载状态" type="primary"/>
<rice-button loading loading-text="加载中…" text="加载状态" plain-fill type="success" />API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| type | 类型, 可选 primary success warning error info default | string | default |
| size | 尺寸，可选 large small mini | string | - |
| text | 按钮文字 | string | - |
| textColor | 文字颜色 | string | - |
| textSize | 文字大小 | string|number | 14px |
| color | 按钮背景颜色 | string | - |
| darkColor | 暗黑模式下按钮颜色，默认会根据color的值自动计算，如果不需要自动计算，传none或颜色值即可 | string | - |
| plainFill | 是否为带浅色背景的朴素按钮 | boolean | false |
| plain | 是否为朴素按钮 | boolean | false |
| icon | 左侧图标名称或图片链接，等同于 Icon 组件的 name 属性 | string | - |
| iconSize | 图标大小 | string|number | 16px |
| iconColor | 图标/loading颜色 | string | - |
| loading | 是否加载状态 | boolean | false |
| loadingSize | 加载图标大小 | string|number | 18px |
| loadingText | 加载状态提示文字，按钮处于加载状态时会替换掉按钮的文字 | string | - |
| loadingType | 加载图标类型 ，等同于 Loading 组件的 type 属性 | string | spinner |
| disabled | 是否禁用 | boolean | false |
| shape | 按钮形状，可选 round square | string | - |
| height | 按钮高度 | string|number | - |
| width | 按钮宽度 | string|number | - |
| to | 页面导航地址，点击时会跳转到对应的页面 | string | - |
| openType | 开放能力，仅微信小程序支持，可选 contact share getPhoneNumber getRealtimePhoneNumber getUserInfo chooseAvatar等，其他更多类型和使用方式见小程序文档 | string | - |
| customStyle | 自定义样式 | Object | |
| customClass | 自定义类名 | string | - |
Event
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击事件，按钮状态不为加载或禁用时才会触发 | event: UniPointerEvent |
| getphonenumber | 手机号快速验证回调，open-type=getPhoneNumber时有效，仅微信小程序支持 | 见小程序文档 |
| getrealtimephonenumber | 手机号实时验证回调，open-type=getRealtimePhoneNumber 时有效,仅微信小程序支持 | 见小程序文档 |
| chooseavatar | 获取用户头像回调，open-type=chooseAvatar时有效,仅微信小程序支持 | 见小程序文档 |
| getuserinfo | 获取用户信息的回调，open-type=getUserInfo 时有效,仅微信小程序支持 | 见小程序文档 |
| opensetting | 在打开授权设置页后回调，open-type=openSetting时有效 时有效,仅微信小程序支持 | 见小程序文档 |
| contact | 打开客服会话回调，open-type=contact 时有效,仅微信小程序支持 | 见小程序文档 |
| agreeprivacyauthorization | 用户同意隐私协议事件回调，open-type=agreePrivacyAuthorization时有效,仅微信小程序支持 | 见小程序文档 |
| launchapp | 打开 APP 成功的回调，open-type=launchApp时有效,仅微信小程序支持 | 见小程序文档 |
| error | 当使用开放能力时，发生错误的回调，open-type=launchApp时有效,仅微信小程序支持 | 见小程序文档 |
类型定义
组件导出如下类型
ts
import { ButtonType, ButtonSize, ButtonShape, ButtonProps } from '@/uni_modules/rice-ui';
//组件类型
const buttonRef=ref<RiceButtonComponentPublicInstance|null>(null)