Fab

fab

悬浮操作钮 · fixed 贴边 + speed-dial 子动作错峰展开/主钮旋 45°(零依赖·reduced-motion)

用法

基础用法

默认 fixed 贴视口右下；无 actions 时主钮直接触发 onClick。

右下角悬浮按钮。

tsx

<Fab icon={<Plus />} onClick={() => alert("新建")} />

Extended 胶囊

传 label 后主钮从圆形变为「图标 + 文字」自适应宽度胶囊。

右下角悬浮按钮（extended 胶囊态）。

tsx

<Fab label="返回示例库" icon={<ExternalLink />} />

Speed-dial 子动作

提供 actions 则点主钮展开/收起一组子动作，主钮图标旋转 45°。

右下角悬浮按钮（点击展开子动作）。

搜索

复制

tsx

<Fab
  actions={[
    { key: "search", icon: <Search />, label: "搜索" },
    { key: "copy", icon: <Copy />, label: "复制" },
    { key: "link", icon: <ExternalLink />, label: "分享" },
  ]}
/>

何时用

页面内单一主操作（如新建、回到顶部、分享）需要常驻悬浮入口时用；多个相关动作可挂 speed-dial 展开。全局一级页签切换用 TabBar；点击后弹出一组列表动作并需取消按钮用 ActionSheet。

导入

import { Fab } from "@hulianui/ui"

Props

名称	类型	默认	说明
`label`	`string`	—	主按钮文字（extended 胶囊态）；提供后主钮变「图标+文字」自适应胶囊，并默认作 aria-label
`actions`	`FabAction[]`	—	speed-dial 子动作；提供则点击主钮展开/收起，否则直接触发 onClick
`position`	`"bottom-right" \| "bottom-left" \| "bottom-center"`	`"bottom-right"`	贴边位置
`size`	`"sm" \| "md"`	`"md"`	md=56px 主钮，sm=48px（紧凑场景）
`draggable`	`boolean`	`false`	按住拖动重定位（位移 >3px 视为拖拽，该次不触发 onClick）
`aria-label`	`string`	`"操作"`	主按钮无障碍标签
`className`	`string`	—	—

FabAction：key: string · icon: ReactNode · label?: string（展开时显示在图标侧并作 aria-label）· onClick?: () => void。

Events

事件	类型	说明
`onClick`	`() => void`	无 actions 时的主按钮点击

Slots

插槽	类型	说明
`icon`	`ReactNode`	主按钮图标（默认 Plus）；展开 speed-dial 时旋转 45°

禁忌 / 坑

默认 fixed 贴视口角落，gallery / 容器内演示时用 className 覆盖为 absolute 收进框内（容器需 position: relative + overflow-hidden）。
给了 actions 时点击主钮是展开/收起子动作，onClick 不再触发；只有不给 actions 时主钮才直接触发 onClick。
draggable 下若拖拽位移超过 3px，本次抬手不会触发点击（避免拖完误触）。

用法

基础用法

默认 fixed 贴视口右下；无 actions 时主钮直接触发 onClick。

右下角悬浮按钮。

tsx

<Fab icon={<Plus />} onClick={() => alert("新建")} />

Extended 胶囊

传 label 后主钮从圆形变为「图标 + 文字」自适应宽度胶囊。

右下角悬浮按钮（extended 胶囊态）。

tsx

<Fab label="返回示例库" icon={<ExternalLink />} />

Speed-dial 子动作

提供 actions 则点主钮展开/收起一组子动作，主钮图标旋转 45°。

右下角悬浮按钮（点击展开子动作）。

搜索

复制

tsx

<Fab
  actions={[
    { key: "search", icon: <Search />, label: "搜索" },
    { key: "copy", icon: <Copy />, label: "复制" },
    { key: "link", icon: <ExternalLink />, label: "分享" },
  ]}
/>

Props

名称	类型	默认	说明
`label`	`string`	—	主按钮文字（extended 胶囊态）；提供后主钮变「图标+文字」自适应胶囊，并默认作 aria-label
`actions`	`FabAction[]`	—	speed-dial 子动作；提供则点击主钮展开/收起，否则直接触发 onClick
`position`	`"bottom-right" \| "bottom-left" \| "bottom-center"`	`"bottom-right"`	贴边位置
`size`	`"sm" \| "md"`	`"md"`	md=56px 主钮，sm=48px（紧凑场景）
`draggable`	`boolean`	`false`	按住拖动重定位（位移 >3px 视为拖拽，该次不触发 onClick）
`aria-label`	`string`	`"操作"`	主按钮无障碍标签
`className`	`string`	—	—

FabAction：key: string · icon: ReactNode · label?: string（展开时显示在图标侧并作 aria-label）· onClick?: () => void。

事件

类型

说明

onClick

() => void

无 actions 时的主按钮点击

插槽

类型

说明

icon

ReactNode

主按钮图标（默认 Plus）；展开 speed-dial 时旋转 45°

禁忌 / 坑

默认 fixed 贴视口角落，gallery / 容器内演示时用 className 覆盖为 absolute 收进框内（容器需 position: relative + overflow-hidden）。

给了 actions 时点击主钮是展开/收起子动作，onClick 不再触发；只有不给 actions 时主钮才直接触发 onClick。

draggable 下若拖拽位移超过 3px，本次抬手不会触发点击（避免拖完误触）。