标签页

Tabs

UI 组件也叫：页签、选项卡、标签栏、Tab 切换

一句话：一排可点击的标签，点哪个就在下方显示对应的内容面板，用来在同一位置切换几块平级的内容。

详细解释

标签页把几块平级的内容叠放在同一个位置，上方一排标签，点击某个标签就显示它对应的面板，其余隐藏。常见于详情页的「基本信息 / 订单记录 / 操作日志」和设置页的分组。选中的标签会有下划线或底色高亮。

标签页里的各块内容互相独立，用户可以按任意顺序查看。步骤条则表示有先后顺序的流程，做完第一步才能进第二步。所以按顺序填写的分步表单应该用步骤条，不要用标签页。

标签以 2~6 个为宜，太多会横向溢出。如果只是在同一份数据的两三种视图之间切换（比如列表和网格），分段控制器更轻量。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

在详情页标题下方放一组标签页，包含「基本信息」「订单记录」「操作日志」三个标签。当前标签文字加粗并带 2px 深色下划线，其余为灰色，悬停时变深。点击标签只切换下方面板内容，不刷新页面，并把当前标签记在网址参数里，刷新后仍保持选中。

由一排标签头和下方对应的内容面板组成，同一时间只显示一个面板。

插件本地识别时匹配的 CSS 选择器（标签、ARIA role、常见组件库 class）。