Fab 悬浮操作按钮
Rue 的 Fab 现在同时支持两类路径：一类是使用 daisyUI 的.fab结构写法； 另一类是更贴近常见悬浮操作按钮的语义 API，直接支持items、trigger、placement、open、tooltip和 badge。
推荐写法
直接用数据驱动菜单
用icon、items、trigger和 placement一次描述完整行为。
支持基础示例
基础 compound 结构继续可用
Fab.Trigger、Fab.Close、Fab.MainAction和 flower 布局全部保持。
交互补充
受控、点击外部关闭、方向展开
适合消息入口、创建入口、移动端快捷发布和带状态提示的全局操作。
# Single Float Button
# Square Button With Content
3
# Menu Mode
# Hover Menu
# Controlled Open State
点击侧边开关，或直接点击主按钮。
当前状态：closed
受控模式
用open+onOpenChange 接入业务状态，同步外部抽屉、埋点或二次确认流程。
# Placement
# FAB and Speed Dial (vertical)
F
# FAB and Speed Dial with SVG icons
# FAB and Speed Dial with labels
F
Label B
Label C
Label D
# FAB and Speed Dial with rectangle buttons
F
# FAB and Speed Dial with labels and fab-close button
F
CloseX
Label A
Label B
Label C
# FAB and Speed Dial with labels and fab-main-action Button
F
Main Action
Label A
Label B
Label C
# A single FAB (Floating Action Button)
# FAB Flower and Speed Dial
F
# FAB and Flower Speed Dial with SVG icons
# FAB and Flower Speed Dial with tooltip
F
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
icon / children / content / description | 根级按钮支持图标与文字内容；推荐直接写 children，有内容时默认切到 square 形态，content / description 继续作为语义化补充。 | any | - |
items | 数据驱动的子按钮配置，适合快速搭建悬浮操作菜单；每项支持 icon、tooltip、badge、href、onClick。 | FabActionProps[] | [] |
trigger / open / defaultOpen / onOpenChange | 支持 click、hover 两种触发方式，以及受控/非受控展开。 | 'click' | 'hover' / boolean / boolean / (open) => void | 'click' when items exist |
placement | 控制菜单向上、下、左、右展开。 | 'top' | 'bottom' | 'left' | 'right' | 'top' |
type / color / shape | 使用 Rue 自己的按钮视觉语义；type 提供 default 与 primary 快捷入口，color 支持更细粒度主题色。 | 'default' | 'primary' / ButtonColor / 'circle' | 'square' | 'default' / - / 自动推导 |
tooltip / badge | 主按钮和子按钮都支持提示与角标，适合消息中心、快捷操作和待办入口。 | any / BadgeProps | - |
items 单项
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
key | 列表渲染 key；未传时会自动按位置兜底。 | string | number | - |
closeOnClick | click 菜单模式下，点击当前项后是否自动收起面板。 | boolean | true |
href / target / htmlType | 复用按钮语义，可直接跳转链接或作为表单提交按钮。 | string / string / button|submit|reset | - |
FAQ
推荐直接用哪种写法？
新业务优先用根级语义 API：单按钮只传icon，菜单场景再补 items与trigger。项目页面若已经依赖Fab.Trigger 结构，可以保持不动。
什么时候用 square？
需要显示文案、计数或收件箱这类语义入口时更适合shape="square"；纯图标快捷入口优先circle。
flower 模式适合语义 API 还是组合结构？
两种都支持，但需要完全自定义每个节点结构时，基础的 compound 写法仍然最灵活；数据驱动更适合快速搭建统一菜单。