Angular Material 的选项卡（tabs）把内容拆分成几个视图，而同一时刻只有一个视图可见。 每个选项卡（tab）的标签都显示在其头部，而激活选项卡的标签通过一个带动画效果的墨水条（ink bar）标记出来。 当选项卡标签的列表超出了标题的宽度时，就会出现一个分页器，让用户可以向左或向右滚动这些标签。
可以通过输入属性 selectedIndex 来设置激活选项卡，也可以由用户在标题中选取一个选项卡的标签来设置。
当激活选项卡发生变化时，会发出一个事件 selectedTabChange。
当用户（通常是用键盘导航的方式）把焦点移到头中的任何一个选项卡的标签上时，就会发出一个 focusChange 事件。
如果选项卡的标签是纯文本，那么可以使用简单的选项卡组（tab-group） API。
对于更复杂的标签，可以在 mat-tab 中用 mat-tab-label 指令来添加一个模板。
默认情况下，选项卡组不会把自己的高度调整为当前激活选项卡的高度。如果要改成自动调整的，请把输入属性 dynamicHeight 设置为 true。
选项卡的卡体会以动画形式把它的高度调整成激活页的高度。
<mat-tab-group> 用于在单个路由中切换视图，而 <nav mat-tab-nav-bar> 提供了一种标签式的 UI，用于在路由之间进行导航。
mat-tab-nav-bar 不会绑定到任何特定的路由器；它适用于普通 <a> 元素并使用 active 属性来确定当前哪个选项卡处于活动状态。相应的 <router-outlet> 必须包裹在 <mat-tab-nav-panel> 组件中，并且通常应放置在相对靠近 mat-tab-nav-bar 的位置（请参阅无障碍性）。
默认情况下，选项卡内容是急性加载的。急性加载的选项卡将初始化子组件，但不会将其注入 DOM，直到选项卡被激活。
如果该选项卡包含一些复杂的子组件，或者该选项卡的内容在初始化期间依赖于对 DOM 的某些计算，则建议惰性加载该选项卡的内容。
通过在 ng-template 上使用 matTabContent 属性来声明卡体，可以惰性加载选项卡的内容。
如果要把选项卡标签对齐到中间或容器的两端，你还可以使用 [mat-align-tabs] 属性。
你可以通过输入参数 animationDuration 来控制选项卡动画的持续时间。如果想完全禁用动画，你可以把该属性设置为 0ms。这个持续时间可以通过注入 MAT_TABS_CONFIG 令牌来进行全局配置。
默认情况下， <mat-tab-group> 将从 DOM 中删除屏幕外选项卡的内容，直到它们进入视图。这对于大多数情况来说是最佳的，因为它可以保持 DOM 的大小更小，但对于其他情况（例如某个选项卡具有 <audio> 或 <video> 元素）来说，这并不是很好，因为每当用户导航到时内容都会重新初始化选项卡。如果要在 DOM 中保留屏幕外选项卡的内容，可以将 preserveContent 输入属性设置为 true 。
MatTabGroup 和 MatTabNavBar 都实现了 ARIA Tabs 设计模式。这两个组件组合了 tablist 、 tab 和 tabpanel 元素，并负责处理键盘输入和焦点管理。
使用 MatTabNavBar 时，你应该将 <mat-tab-nav-panel> 组件放置在相对靠近（如果不是紧邻） <nav mat-tab-nav-bar> 组件的位置，以便屏幕阅读器用户可以轻松识别关联.
始终通过 aria-label 或 aria-describedby 为没有描述性文本内容的选项卡提供无障碍标签。
使用 MatTabNavGroup 时，始终为 <nav> 元素指定标签。
MatTabGroup 和 MatTabNavBar 都实现了以下键盘交互。
| 快捷键 | 操作 |
|---|---|
LEFT_ARROW |
将焦点移动到上一个选项卡 |
RIGHT_ARROW |
将焦点移动到下一个选项卡 |
HOME |
将焦点移动到第一个选项卡 |
END |
将焦点移动到最后一个选项卡 |
SPACE 或
ENTER |
切换到聚焦的选项卡 |