# Button 按钮

概述

Button 按钮,支持自定义大小、颜色等。

# 引入

以下介绍两种常用的引入方式。
第一种:在页面json文件中引入
{
  "navigationBarTitleText": "按钮",
  "usingComponents": {
     "fui-button": "/components/firstui/fui-button/fui-button"
  }
}
1
2
3
4
5
6
第二种:在根目录app.json文件中全局引入
  "usingComponents": {
    "fui-button": "components/firstui/fui-button/fui-button"
  }
1
2
3

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API。
基础使用

通过 text 属性设置按钮显示文本或者直接使用slot。

<fui-button text="默认按钮"></fui-button>
<fui-button>默认按钮</fui-button>
1
2
按钮类型

通过 type 属性设置按钮的类型,不传值则默认为 primary

<fui-button type="success">success</fui-button>
<fui-button type="warning">warning</fui-button>
1
2

注意:可通过css变量全局修改按钮type类型对应的颜色,css变量参考 自定义主题

禁用状态

通过 disabled 属性设置按钮是否禁用,disabledBackground 属性设置禁用状态下背景色,disabledColor 属性设置禁用状态下字体颜色。

<fui-button disabled>禁用按钮</fui-button>
<fui-button disabled loading>禁用按钮</fui-button>
<fui-button disabled disabledBackground="#F8F8F8" disabledColor="#CCCCCC">禁用按钮
</fui-button>
1
2
3
4
按钮形状

通过 radius 属性设置按钮圆角大小,从而控制按钮形状。

<fui-button radius="0">方形按钮</fui-button>
<fui-button radius="96rpx">圆形按钮</fui-button>
1
2
自定义颜色

通过 background 属性设置按钮背景色,color 属性设置按钮文字颜色,borderColor 属性设置按钮边框颜色。

<fui-button background="#fff" color="#465CFF" borderColor="#465CFF">朴素按钮</fui-button>
1

TIP

若组件宽度为 100% 时,注意设置外层容器的宽度,避免 flex 布局下,宽度被挤压。若宽度被挤压可在组件外层套个view,将view宽度设置成100%。

# Slots

插槽名称 说明
default 标签内显示内容

# Props

属性名 类型 说明 默认值 其他说明
type String 按钮类型,可取值:primary、success、 warning、danger、link、purple、gray primary -
background String 按钮背景色,当传入值时type失效 - -
text String 按钮显示文本 - -
color String 按钮字体颜色 #fff -
disabledBackground String 按钮禁用状态下背景色 - -
disabledColor String 按钮禁用状态下字体颜色 - -
borderWidth String 按钮边框宽度,默认缩放0.5倍 V1.6.0+ 1px -
borderColor String 按钮边框颜色 - -
btnSize V1.9.8+ String 按钮大小,可选值:medium、small、mini,优先级高于width和height属性 - -
width String 按钮宽度 100% -
height String 按钮高度 96rpx -
size Number,String 字体大小,单位rpx 32 -
bold Boolean 字体是否加粗 false -
margin String margin值 '0' -
radius String 圆角大小 16rpx -
plain Boolean 是否镂空 false -
disabled Boolean 是否禁用 false -
loading Boolean 是否显示加载图标 false -
formType String 参考小程序官方按钮 (opens new window)formType属性 - -
openType String 参考小程序官方按钮 (opens new window)openType属性 - -
appParameter V1.9.5+ String 打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效 - -
index Number, String 自定义参数 0 -

# Events

事件名 说明 回调参数
bind:click 按钮点击事件,设置formType时无需使用 event.detail =
{
  index:自定义参数
}
bind:getuserinfo 参考小程序官方按钮 getuserinfo (opens new window) 返回获取到的用户信息
bind:contact 打开客服会话,参考小程序官方按钮open-type值 contact (opens new window) 如果用户在会话中点击消息卡片后返回应用,可以从 contact 回调中获得具体信息
bind:getphonenumber 获取用户手机号回调,参考小程序官方按钮getphonenumber (opens new window) 手机号信息
bind:error 当使用开放能力时,发生错误的回调,参考小程序官方按钮error (opens new window) 错误回调信息
bind:opensetting 在打开授权设置页并关闭后回调,参考小程序官方按钮opensetting (opens new window) 授权设置信息
bind:chooseavatar V1.9.5+ 获取用户头像回调 头像信息
bind:launchapp V1.9.5+ 从小程序打开 App 成功的回调 {detail = {} }

示例预览

Last Updated: 10/7/2023, 12:14:41 PM