fs-fab 悬浮按钮组件

悬浮按钮（Floating Action Button）是一个悬浮在界面上的圆形按钮，用于触发主要操作。

使用方法

局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "fs-fab": "ava-ui/fxui/fs-fab/index"
}

代码演示

API

属性

属性名	类型	默认值	说明
mainButton	Object	null	主按钮配置（控制展开/收起）
buttons	Array	[]	按钮配置数组
layout	String	'horizontal'	按钮布局方向，可选值：vertical（垂直）、horizontal（横向）
variant	String	'primary'	样式，可选值：primary（主要）、default（默认）
size	Number	40	尺寸，单位px
extStyle	String	''	自定义样式
position	Object	{bottom: 80, right: 16}	位置配置
zIndex	Number	1000	z-index层级，主按钮层级为zIndex+1

mainButton 对象配置

主按钮用于控制子按钮的展开/收起，支持以下属性：

属性名	类型	默认值	说明
icon	String	''	图标名称
img	String	''	图片链接，优先级高于 icon
imgStyle	String	''	图片自定义样式（内联 style），如 width:24px;height:24px;border-radius:50%
text	String	''	文字内容
variant	String	-	样式，可选值：primary（主要）、default（默认），不设置时使用组件的variant
extStyle	String	''	单个按钮的自定义样式（内联 style），会覆盖组件级别的 extStyle
disabled	Boolean	false	是否禁用
loading	Boolean	false	是否显示加载状态
id	String/Number	-	按钮标识（可选）
tapId	String	-	标签页标识，用于生成按钮的唯一ID

buttons 数组配置

buttons 数组中的每个对象支持以下属性：

属性名	类型	默认值	说明
icon	String	''	图标名称
img	String	''	图片链接，优先级高于 icon
imgStyle	String	''	图片自定义样式（内联 style），如 width:24px;height:24px;border-radius:50%
text	String	''	文字内容
variant	String	-	样式，可选值：primary（主要）、default（默认），不设置时使用组件的variant
extStyle	String	''	单个按钮的自定义样式（内联 style），会覆盖组件级别的 extStyle
disabled	Boolean	false	是否禁用
loading	Boolean	false	是否显示加载状态
id	String/Number	-	按钮标识（可选）
tapId	String	-	标签页标识，用于生成按钮的唯一ID

事件

事件名	说明	回调参数
click	点击按钮时触发
toggle	多按钮模式下切换展开状态时触发

position 对象说明

属性名	类型	默认值	说明
bottom	Number	80	距离底部的距离，单位px
right	Number	16	距离右侧的距离，单位px

设计说明

• 悬浮按钮固定在屏幕右下角，距离底部80px，距离右侧16px
• 支持两种模式：
  • 直接展开模式：不设置mainButton，buttons数组中的按钮直接展开显示
  • 可展开模式：设置mainButton，通过主按钮控制子按钮的展开/收起
• 提供两种样式：主要（橙色）和默认（白色）
• 尺寸固定为40px，图标+文字类型会自动调整宽度
• 支持垂直和横向两种布局方向：
  • 垂直布局：子按钮从下往上依次展开
  • 横向布局：子按钮从右往左依次展开
• 可展开模式下，子按钮展开时带有动画效果
• 支持自定义位置、图标、文字等
• 具有点击反馈动画和阴影效果
• 点击时有active状态反馈，与Button组件保持一致

打开预览