你可能会说
这个区域用标签页切换:全部、已发布、草稿。
同一区域内切换不同内容的组件。
同一区域内切换不同内容的组件。如「全部 | 已发布 | 草稿」,点击不同标签显示不同列表。
生活类比
像文件夹的分隔标签——同一个柜子里,拉不同标签看不同的文件。
🎮 动手试试
关于「标签页」,以下哪个描述最准确?
你可以这样告诉 AI
帮我在内容区加标签页切换:三个标签'全部、已发布、草稿',点击切换下方列表,当前标签高亮加下划线。
标签页所有标签始终可见、点击切换内容;折叠面板只看到标题行、点击展开后才显示内容。
同一区域切换视图
需要在同一区域内切换不同内容视角(如「全部/已读/未读」),用标签页让用户点击标签即可切换,不需要跳转页面。
和 AI 协作时
想让 AI 做标签页时,说「帮做三个标签:全部、已发布、草稿,点击切换下方列表,当前标签高亮加下划线」,AI 会生成 Tabs。
标签数量超过5个
标签太多会挤满一行甚至换行,用户体验变差——考虑改用下拉选择或侧边导航替代,避免标签溢出。
与需要对比查看的场景无关
需要同时对照 AB 两份内容时(如旧版 vs 新版),标签页一次只显示一个反而妨碍对比,用并排视图更佳。
同一区域内切换不同内容的组件。如「全部 | 已发布 | 草稿」,点击不同标签显示不同列表。
像文件夹的分隔标签——同一个柜子里,拉不同标签看不同的文件。
和 AI 沟通时提到「用 Tab 切换内容」,就是做标签页组件。