组件 · 导航 · 13
标签页
标签页 = 一排标签，仅有且必有一项选中并控制下方面板；需说明是下划线还是胶囊样式。
直达修改 Prompt →
Name radius, hover, and contrast. Do not say “make it nice”.
标签页是什么？
标签页切换同级视图。写明方向、选中指示和面板内边距。
变体
点击属性即可在预览中高亮。
-
- 用激活项下方的线条来标记的标签页。
-
- 标签页置于填充容器内，激活项获得对比色胶囊。
-
- 当前选中的值或标签，需与其余项明显区分。
-
- 指针悬停时的反馈：抬起、变色或边框变化。写清楚，别让模型自己猜。
-
- 与当前激活标签对应的内容区。
状态
点击属性即可在预览中高亮。
-
- 输入或报错前字段的默认有效状态。
-
- 指针悬停时的反馈：抬起、变色或边框变化。写清楚，别让模型自己猜。
-
- 当前选中的值或标签，需与其余项明显区分。
结构解剖
这些是 Prompt 里应该点名的部件。
什么时候用
- 切换同级视图：概览 / 配置 / 用法
- 有 2–5 个分区的设置页
- 详情页的二级数据视图
什么时候别用
- 顺序步骤——改用步骤条
- 跳转到不同页面——改用链接
- 超过 6 个标签——重新分组内容
Create an underline tab set.
STYLE
- selected: 2px accent underline
- quiet unselected labels
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui