Fab 悬浮按钮
纯图标悬浮按钮
使用场景：当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布
图标加文字悬浮按钮
使用场景：当功能使用图标无法表意清楚需要文字辅助描述时，可使用图标加文字悬浮按钮
Fab Props
| 名称 | 类型 | 默认值 | 描述 | 必传 |
|---|---|---|---|---|
| className | String | - | 类名 | N |
| style | Object | - | 样式，TS 类型：React.CSSProperties |
N |
| buttonProps | Object | - | 透传至 Button 组件。TS 类型：ButtonProps，Button API Documents。详细类型定义 |
N |
| draggable | String / Boolean | false | 是否可拖拽。true / 'all'可拖动'vertical'可垂直拖动'horizontal'可水平拖动false禁止拖动。TS 类型：boolean | FabDirectionEnum type FabDirectionEnum = 'all' | 'vertical' | 'horizontal'。详细类型定义 |
N |
| icon | TElement | - | 图标。TS 类型：TNode。通用类型定义 |
N |
| text | String | - | 文本内容 | N |
| yBounds | Array | - | 设置垂直方向边界限制，示例：[48, 48] 或 ['96px', 80]。TS 类型：Array<string | number> |
N |
| onClick | Function | TS 类型：(context: {e: MouseEvent}) => void悬浮按钮点击事件 |
N | |
| onDragEnd | Function | TS 类型：(context: { e: TouchEvent }) => void结束拖拽时触发 |
N | |
| onDragStart | Function | TS 类型：(context: { e: TouchEvent }) => void开始拖拽时触发 |
N |
何时使用
当某个操作为全局操作，且为用户高频/业务强推的操作时可使用。
与页面布局相关
为了避免遮挡页面中重要内容，通常将悬浮按钮放置于页面右下角，当页面中没有底部标签栏时，也可以考虑放置于中下位置。
组件搭配使用
悬浮按钮与动作面板组合使用，当触发悬浮按钮涉及的任务通过若干种方式达成，可以用动态面板来承载这若干种方式的操作。
推荐/慎用示例
通常情况下页面中建议只使用一个悬浮按钮；若页面以地图、看板为主要场景，需要出现多个悬浮按钮时，建议通过样式区分主次、层级关系。
图标加文字悬浮按钮上的字数建议精简，控制在2-4个字左右，避免遮挡过多页面内容。
相似组件
| 组件名 | 何时使用 |
|---|---|
| 按钮 | 当前流程的结束或新流程的开启需要用户点击触发时使用。 |
| 返回顶部 | 当页面内容过长，用户有快速返回到页面顶部的诉求时使用。 |
Vue 2
Vue 3
React
Flutter
Design
MiniProgram
WeCom Group
Welcome to contact us
