GitHub

Bloom Menu

围绕共同中心展开一组操作，并在关闭时恢复焦点。

适用场景

  • 当界面需要以下行为时使用 Bloom Menu：围绕共同中心展开一组操作，并在关闭时恢复焦点。

安装

选择安装方式，用法示例将同步更新导入路径。

$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/bloom-menu.json

首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。

示例

预览

状态与事件

此示例组合没有声明成对的受控属性与 update 事件。使用已列出的属性、原生事件和插槽组合内容；不要为它添加未公开的 v-model。

API 参考

items?
BloomMenuItem[]
() => [ { label: "Doc", icon: FileText }, { label: "Board", icon: LayoutGrid }, { label: "Table", icon: Table }, { label: "Folder", icon: FolderClosed }, { label: "Reminder", icon: Bell }, { label: "Link", icon: Link }, ]
className?
string
—

事件

select
[label: string]
@select

无障碍

为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。

常见问题

如何配置 Bloom Menu？
通过 items、className 配置 Bloom Menu；API 表列出其类型与默认值。
如何连接到应用状态？
监听 select，将组件连接到应用状态。
可以在服务端渲染吗？
可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。

请留意

部分组件参考了开源作品，相关署名与独立许可请参阅 NOTICE。

更新于