Tabs 选项卡
/TABZ/ · noun · 导航类模式 · #075
横排在一块区域顶部的一组标签，每个标签在同一位置打开各自的面板。只放平级内容——如果一个标签离开另一个就看不懂，它们就该合成一页。
别名：标签页、tab切换。
你可能会这样叫它
- “顶部切换的标签”
- “页面上方的选项卡”
- “点一下换一块内容的标题”
- “带下划线的切换标签”
- “一排可以切换的标签”
……它的名字是 选项卡（Tabs）。
常见问题
选项卡是什么意思？
选项卡（Tabs，也叫标签页）是一排标签，每个标签在同一块区域打开不同的面板，不用离开当前页面就能在相关内容之间切换，比如商品页的“详情 / 评价 / 参数”。同一时刻只显示一个面板。
选项卡和底部标签栏有什么区别？
选项卡在某块内容的顶部，切换的是同一屏里的面板；标签栏在手机 App 的底部，切换的是整个 App 的几大入口（首页、搜索、我的）。
代码里叫什么
| SwiftUI / UIKit | 没有顶部选项卡组件：TabView 和 UITabBarController 是底部标签栏；Apple 在这种场景用分段控制器 |
|---|---|
| Jetpack Compose | PrimaryTabRow Tab HorizontalPager |
| Android (Views) | TabLayout ViewPager2 TabLayoutMediator |
| Flutter | TabBar TabBarView DefaultTabController |
| Web (HTML / ARIA) | role="tablist" role="tab" role="tabpanel" aria-selected |
复制给 AI 编程工具
给这块区域加选项卡：顶部一排简短的标签，每个对应一个面板；选中的标签要有明显标记（下划线或填充底色），下方只显示它的面板。遵循 ARIA 的 tabs 模式——role="tablist"、带 aria-selected 和 aria-controls 的 role="tab"、role="tabpanel"——让方向键在标签间切换，Tab 键进入面板。只放同类的平级内容；小屏上让标签行横向滚动，而不是折行。