SuperAPI AI 工具集

sgds-components-overflow-menu

前端与建站

查看项目

更新于 10-15 21:54

技能介绍

用途:<sgds-overflow-menu> 是一个预置的三点(⋯)图标按钮,点击可切换下拉菜单,菜单列表项由 <sgds-dropdown-item> 构成,常见于表格行、卡片和列表项的上下文操作。

主要能力:支持 size 属性,取值为 sm 或 md(默认 md);默认插槽放置 sgds-dropdown-item 菜单项,其中可设 disabled。事件包括 sgds-show、sgds-after-show、sgds-hide、sgds-after-hide 和 sgds-select;点击任一菜单项触发 sgds-select,事件详情 event.detail.item 为被点击的 <sgds-dropdown-item>。

必要用法:先参阅 sgds-components-setup 完成安装与框架集成(React 19+ 与 React ≤18、Vue、Angular)。导航项在 <sgds-dropdown-item> 内嵌入 <a> 标签;操作项直接放置纯文本。可通过监听器处理选择,例如:document.getElementById("row-menu").addEventListener("sgds-select", e => { const action = e.detail.item.textContent.trim(); console.log("Action selected:", action); });

适用场景:表格行内的编辑/删除等操作、卡片和列表项的上下文菜单,紧凑布局可用 size="sm"。

限制:不支持 CSS 样式修改,不暴露自定义属性和 CSS 部分;无公开方法,菜单完全由内置图标按钮切换。需要自定义切换器或按钮标签时应改用 <sgds-dropdown>。安装、收费、价格与效果等资料暂未提供。