标签Tag

你可能会说

文章得标出是教程还是新闻，让人一眼能分出来。

标签是用短文字标记内容状态、类别、属性或筛选条件的组件订单旁的“已支付”或筛选区的“北京”都可用标签。颜色只辅助扫读，文字必须表达含义；带关闭入口的标签才可移除条件。

进行中已完成已逾期前端×

你可以这样告诉 AI Agent

请统一订单标签：状态标签只显示当前状态，不可点击；筛选区的已选标签可以单独移除，并保留文字含义，不能只靠颜色。验证移除一个筛选条件不会修改订单状态。

组成结构 · Anatomy

前端×

本体：小巧、彩色、只负责标记

用简短文字说清状态或分类

可选，用于可移除的筛选条件

常见变体 · Variants

彩色标签Colored

蓝绿红灰

需要用颜色辅助区分状态或分类时

可关闭Closable

近一周×前端×

已选条件允许用户直接移除时

带圆点With Dot

进行中已完成

用文字说明状态，小圆点只辅助辨认

典型使用场景

任务状态标记

官网首页改版设计进行中

支付流程走查已完成

年度报告初稿已逾期

内容分类

如何用 AI 规划官网内容

从需求梳理到上线部署的完整记录，适合零基础。

前端AI 编程教程 3.2k 阅读

筛选条件

已选筛选：近一周× 前端× 已完成×

共 24 条符合条件的任务

表格状态列

项目负责人状态

官网改版林小hu进行中

年报设计阿油已完成

支付重构KK已逾期

A. 把状态和筛选条件都改成彩色圆点，只在旁边显示匹配数量B. 状态标签只负责标记，已选筛选标签提供明确的移除入口C. 把状态和筛选标签都做成按钮，点击任意标签都切换订单状态