SuperAPI AI 工具集

sgds-components-badge

前端与建站

查看项目

更新于 10-15 21:55

技能介绍

用途:<sgds-badge> 是 SGDS 中标准的标签与状态指示元素,用于突出分类、状态或简短描述文本,常与其他内容并排展示。

主要能力:variant 属性提供 primary(默认)、accent、success、danger、warning、cyan、purple、neutral、white 等颜色变体,info 已弃用,应改用 primary。outlined 属性切换为描边样式;fullWidth 让徽章撑满容器宽度。dismissible 与 show 同时设置时显示关闭按钮,仅设其一无可见效果。icon 插槽可在文本左侧放置图标,但 dismissible 为 true 时该插槽会被静默抑制,二者不可共存。文本溢出时自动截断并显示完整文本的 tooltip,始终生效,无需配置。

使用方式:静态填充徽章如 <sgds-badge variant="success">Approved</sgds-badge>;描边徽章加 outlined;可关闭徽章需同时写 dismissible show;带图标徽章在内部放 <sgds-icon slot="icon" ...>。事件包括 sgds-show、sgds-hide(均可取消,调用 event.preventDefault() 可中止)、sgds-after-show、sgds-after-hide。公开方法 close() 可将 show 置为 false 并触发隐藏流程。框架集成与事件语法参见 sgds-components-setup。

适用场景:状态标签、分类标记、通知提示等短文本展示。

限制:不暴露自定义属性与 CSS part,无法修改样式;info 变体已弃用;可关闭徽章必须同时设置 dismissible 与 show;图标与关闭按钮不能同时使用。