SuperAPI AI 工具集

badge-tag-patterns

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

用途:为界面中的徽章(Badge)、标签(Tag)、Chip 和 Label 组件提供设计模式,用于状态指示与内容分类。

主要能力与类型: 计数徽章(Count badge):表示数量,如通知数(5)。 状态徽章(Status badge):表示状态,如 Active、Inactive、Pending。 标签(Label/Tag):用于分类,如“Design”“Engineering”。 Chip:可筛选的选择项,如已选筛选条件、收件人。

设计规则: 计数徽章:有内容时用红点,有数量时显示数字,上限显示 99+。 状态徽章:全应用使用一致颜色,绿色=active,黄色=warning,红色=error,灰色=inactive。 标签:允许移除(X 按钮),过长文本用省略号截断。 Chip:涉及人员时包含头像/图标,并显示选中状态。

尺寸: 徽章:高度 16–20px,内边距紧凑。 标签:高度 24–28px,内边距舒适。 Chip:高度 32px,包含可交互元素。

限制:资料未提供具体实现代码、框架或安装方式,暂未提供。