# @wines/fab-button > The fab-button @wines Latest version **2.0.0** (published 2025-04-01) · MIT license · 0 weekly downloads ## Install ```sh npm install @wines/fab-button pnpm add @wines/fab-button yarn add @wines/fab-button bun add @wines/fab-button ``` ## Health **Score 30/100 (F)** — status: maintenance-mode. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.0 | | Published | 2025-04-01 | | First published | 2021-04-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM | | Node | >=16.0.0 | | Dependencies | 2 | | Unpacked size | 58.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | tianyingchun | ## Links - npm: https://www.npmjs.com/package/@wines/fab-button - Repository: https://gitlab.itcjf.com/wines/fab-button - npm.io page: https://npm.io/package/@wines/fab-button ## Dependencies (2) - [@wines/core](https://npm.io/package/@wines/core.md) 2.0.0 - [@wines/styles](https://npm.io/package/@wines/styles.md) 2.0.0 ## Recent versions - 2.0.0 (latest) — 2025-04-01 - 2.0.0-next.7 (next) — 2025-04-01 - 2.0.0-next.6 — 2025-03-06 - 2.0.0-next.5 — 2025-03-05 - 2.0.0-next.4 — 2025-03-05 - 2.0.0-next.3 — 2025-03-04 - 2.0.0-next.2 — 2025-02-28 - 2.0.0-next.1 — 2025-02-27 - 2.0.0-next.0 — 2025-02-27 - 1.5.1 — 2023-03-07 - 1.5.0 — 2022-11-22 - 1.4.0 — 2022-02-23 - 1.3.5 — 2021-12-03 - 1.3.2 — 2021-09-24 - 1.3.1 — 2021-04-25 - … 1 more at https://npm.io/package/@wines/fab-button/versions ## README # `@wines/fab-button` # FabButton 浮动按钮 用于展现浮动按钮，预设 9 种颜色 `light`, `stable`, `positive`, `calm`, `assertive`, `balanced`, `energized`, `royal`, `dark` 可选用。 ## 使用指南 ### 在 page.json 中引入组件 ```json { "navigationBarTitleText": "wux-fab-button", "usingComponents": { "wux-fab-button": "@wines/fab-button" } } ``` ### 示例 ```xml FabButton 浮动按钮 ``` ```ts import './index.less'; const icon = 'data:image/png;base64,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'; const buttons = [ { openType: 'getUserInfo', label: 'GetUserInfo', icon, }, { openType: 'share', label: 'Share', icon, }, { openType: 'contact', label: 'Contact', icon, }, { label: 'View on Demo', icon, }, ]; Page({ data: { buttons, }, onClick(e) { console.log('onClick', e.detail); if (e.detail.index === 3) { void wx.switchTab({ url: '/pages/index/index', }); } }, onContact(e) { console.log('onContact', e); }, onGotUserInfo(e) { console.log('onGotUserInfo', e); }, onGotPhoneNumber(e) { console.log('onGotPhoneNumber', e); }, onChange(e) { console.log('onChange', e); }, }); ``` ## API ### FabButton props | 参数 | 类型 | 描述 | 默认值 | | ------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------- | -------------- | | prefixCls | `string` | 自定义类名前缀 | wux-fab-button | | hoverClass | `string` | 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果 | default | | theme | `string` | 主题色，可选值为 light、stable、positive、calm、assertive、balanced、energized、royal、dark | balanced | | position | `string` | 按钮的位置，可选值为 topLeft、topRight、bottomLeft、bottomRight | bottomRight | | action | `string` | 操作按钮的图标 | - | | actionRotate | `boolean` | 操作按钮是否旋转动画 | true | | hideShadow | `boolean` | 是否隐藏阴影 | false | | backdrop | `boolean` | 是否显示透明蒙层 | false | | defaultVisible | `boolean` | 默认是否显隐，当 `controlled` 为 `false` 时才生效 | false | | visible | `boolean` | 用于手动控制浮层显隐，当 `controlled` 为 `true` 时才生效 | false | | controlled | `boolean` | 是否受控 [说明文档](controlled.md) | false | | direction | `string` | 按钮组排列方向，可选值为 horizontal、vertical、circle | horizontal | | spaceBetween | `number` | 按钮组间距 | 10 | | duration | `number` | 按钮组动画过渡时间，单位 ms | 300 | | scale | `number` | 按钮组缩放比例 | .9 | | reverse | `boolean` | 是否反转方向，当 `direction` 为 `horizontal/vertical` 时才生效 | false | | sAngle | `number` | 起始角度，当 `direction` 为 `circle` 时才生效 | 0 | | eAngle | `number` | 终止角度，当 `direction` 为 `circle` 时才生效 | 360 | | buttons | `array` | 按钮 | [] | | buttons[].className | `string` | 按钮的类名 | - | | buttons[].label | `string` | 按钮的文字 | - | | buttons[].icon | `string` | 按钮的图标 | - | | buttons[].hideShadow | `boolean` | 是否隐藏阴影 | false | | buttons[].disabled | `boolean` | 是否禁用 | false | | buttons[].openType | `string` | 微信开放能力，可选值为 contact、share、getUserInfo、getPhoneNumber、launchApp、openSetting、feedback | - | | buttons[].hoverClass | `string` | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 | default | | buttons[].hoverStopPropagation | `boolean` | 指定是否阻止本节点的祖先节点出现点击态 | false | | buttons[].hoverStartTime | `number` | 按住后多久出现点击态，单位毫秒 | 20 | | buttons[].hoverStayTime | `number` | 手指松开后点击态保留时间，单位毫秒 | 70 | | buttons[].lang | `string` | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 | en | | buttons[].sessionFrom | `string` | 会话来源 | - | | buttons[].sendMessageTitle | `string` | 会话内消息卡片标题 | 当前标题 | | buttons[].sendMessagePath | `string` | 会话内消息卡片点击跳转小程序路径 | 当前分享路径 | | buttons[].sendMessageImg | `string` | 会话内消息卡片图片 | 截图 | | buttons[].showMessageCard | `boolean` | 显示会话内消息卡片 | false | | buttons[].appParameter | `string` | 打开 APP 时，向 APP 传递的参数 | - | | bind:click | `function` | 点击事件 | - | | bind:getuserinfo | `function` | 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致 | - | | bind:contact | `function` | 客服消息回调 | - | | bind:getphonenumber | `function` | 获取用户手机号回调 | - | | bind:error | `function` | 当使用开放能力时，发生错误的回调 | - | | bind:opensetting | `function` | 在打开授权设置页后回调 | - | | bind:change | `function` | 监听状态变化的回调函数 | - | > 更多参数说明请参考微信官方的表单组件 [Button](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。 ### FabButton slot | 名称 | 描述 | | ------ | ---------------------------------------- | | action | 自定义操作按钮，当 `action` 为空时才生效 | ### FabButton externalClasses | 名称 | 描述 | | --------- | ------------ | | wux-class | 根节点样式类 | --- _Source: https://npm.io/package/@wines/fab-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._