Atelier UI

搜索组件…

搜索组件…

Speed Dial

悬浮按钮展开为带标签的快捷操作菜单,支持错落动画与键盘操作。

在沙盒中编辑

复制一段给 AI 编程工具的提示词,包含源码、依赖和用法

属性

SpeedDialProps

同时支持以下类型的全部属性: Omit<React.ComponentProps<"div">, "children">

属性类型默认值说明
actions* 必填SpeedDialAction[]——
direction"up" | "left""up"Direction the actions fan out in. Up puts tooltips beside the buttons, left puts them underneath.
labelstring"Quick actions"Accessible name of the main button and of the menu
iconReact.ReactNode—Icon of the main button; it rotates 45 degrees while open
defaultOpenbooleanfalse—
onOpenChange(open: boolean) => void——

安装

$ npx shadcn@latest add https://chromotion.dev/r/speed-dial.json

同类组件