Angular Material 选项卡的 API 参考

import {MatTabsModule} from '@angular/material/tabs';

指令

`MatTabContent`

修饰 ng-template 标签，并从中读出模板。

选择器： [matTabContent]

属性

名称	描述
`template: TemplateRef<any>`	此标签页的内容。

`MatTabLabel` 继承自 CdkPortal

标出选项卡标签，以供传送点指令使用

选择器： [mat-tab-label] [matTabLabel]

属性

名称	描述
`context: C`	要传入内嵌式视图中的上下文数据。
`injector: Injector`	嵌入视图要使用的注入器。
`isAttached: boolean`	此传送点是否已附着到宿主上。
`origin: ElementRef`
`templateRef: TemplateRef<C>`	嵌入式模板，用于在宿主中实例化一个嵌入式视图。
`viewContainerRef: ViewContainerRef`	要容纳模板生成物的 ViewContainer 的引用。

方法

attach
把此传送点添加到所提供的 `PortalOutlet` 中。当提供了上下文时，它会改写 `TemplatePortal` 实例 `context` 属性。
参数
host `PortalOutlet`
context `C = this.context`
返回值
`EmbeddedViewRef<C>`

detach

setAttachedHost
在不执行 `attach()` 的情况下设置 PortalOutlet 的引用。当 PortalOutlet 要执行 `attach()` 或 `detach()` 时会直接使用它。
参数
host `PortalOutlet`

`MatTab`

选择器： mat-tab

Exported as: matTab

属性

名称	描述
@Input('aria-label') `ariaLabel: string`	选项卡的 Aria 标签。
@Input('aria-labelledby') `ariaLabelledby: string`	到用来标注此选项卡的元素的引用。如果同时设置了 `aria-label`，则被清除。
@Input() `bodyClass: string \| string[]`	要传递给选项卡 mat-tab-body 容器的类。支持字符串和字符串数组值，与 `ngClass` 相同。
@Input({ transform: booleanAttribute }) `disabled: boolean`	选项卡是否被禁用。
@Input() `labelClass: string \| string[]`	要传递给 mat-tab-header 容器内的选项卡标签的类。支持字符串和字符串数组值，与 `ngClass` 相同。
@Input('label') `textLabel: string`	选项卡的纯文本标签，没有模板标签时使用。
`isActive: false`	该选项卡目前是否有效。
`origin: number \| null`	该选项卡初始相对索引的原点（如果已经创建并在已选定的选项卡之后被选定）。这个属性提供了此选项卡应该来自哪个位置的上下文。
`position: number \| null`	相对的索引位置，其中 0 代表中心，负数代表左边，正数代表右边。
`templateLabel: MatTabLabel`	选项卡标签的内容由 `<ng-template mat-tab-label>` 指定。

`MatTabGroup`

Material Design 选项卡组组件。支持基本选项卡对（选项卡+内容），包括动画墨水条、键盘导航和屏幕阅读器。请参阅：https://material.io/design/components/tabs.html

选择器： mat-tab-group

Exported as: matTabGroup

属性

名称	描述
@Input() `animationDuration: string`	选项卡动画的持续时间。如果没有设置单位，它会被标准化为毫秒。
@Input() `color: ThemePalette`	选项卡组的主题颜色。
@Input({ transform: numberAttribute }) `contentTabIndex: number \| null`	在包装制表符内容的内部元素上设置的 `tabindex` 当标签没有聚焦元素或者它具有可滚动的内容时，可用于改进的无障碍性。对于无效的标签页，`tabindex` 将会被自动移除。到 https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html 了解更多信息。
@Input({ transform: booleanAttribute }) `disablePagination: boolean`	是否应该禁用分页。如果明确知道不需要分页，这可以用来避免不必要的布局重算。
@Input({ transform: booleanAttribute }) `disableRipple: boolean`	是否禁用选项卡组中的波纹。
@Input({ transform: booleanAttribute }) `dynamicHeight: boolean`	选项卡组是否应该增长到活动选项卡的大小。
@Input({ transform: booleanAttribute }) `fitInkBarToContent: boolean`	此墨条是否应使其宽度适合选项卡标签内容的大小。
@Input() `headerPosition: MatTabHeaderPosition`	选项卡标头的位置。
@Input({ transform: booleanAttribute }) `preserveContent: boolean`	默认情况下，选项卡在屏幕外时会从 DOM 中删除其内容。将此设置为 `true` 会将其保留在 DOM 中，这将防止 iframe 和视频等元素在下次返回视图时重新加载。
@Input({ transform: numberAttribute }) `selectedIndex: number \| null`	活动选项卡的索引。
@Input({ alias: 'mat-stretch-tabs', transform: booleanAttribute }) `stretchTabs: boolean`	是否应拉伸选项卡以填充标题区。
@Output() `animationDone: EventEmitter<void>`	当本体动画完成后，就会发出此事件
@Output() `focusChange: EventEmitter<MatTabChangeEvent>`	选项卡组中的焦点发生变化时发出的事件。
@Output() `selectedIndexChange: EventEmitter<number>`	用来支持 `[(selectedIndex)]` 双向绑定的输出属性
@Output() `selectedTabChange: EventEmitter<MatTabChangeEvent>`	选项卡的选定值发生变化时发出的事件。
@Input() Deprecated `backgroundColor: ThemePalette`	选项卡组的背景颜色。

方法

focusTab

focusTab
将焦点设置到特定选项卡。
index `number`	要设置焦点的选项卡的索引。

将焦点设置到特定选项卡。

参数

index

number

要设置焦点的选项卡的索引。

realignInkBar
将墨水条与选定的选项卡元素重新对齐。

updatePagination
重新计算选项卡组的分页尺寸。警告：就性能而言，调用此方法的成本非常高。它应尽可能从选项卡列表组件的外部调用，因为它会导致页面重排。

updatePagination

重新计算选项卡组的分页尺寸。

警告：就性能而言，调用此方法的成本非常高。它应尽可能从选项卡列表组件的外部调用，因为它会导致页面重排。

`MatTabNav`

与选项卡组标题样式匹配的导航组件。提供带有动画墨水栏的链接导航。

选择器： [mat-tab-nav-bar]

Exported as: matTabNavBar, matTabNav

属性

名称	描述
@Input() `animationDuration: string`
@Input() `backgroundColor: ThemePalette`	此标签导航的背景颜色。
@Input() `color: ThemePalette`	此导航栏的主题颜色。
@Input({ transform: booleanAttribute }) `disablePagination: boolean`	是否应该禁用分页。如果明确知道不需要分页，这可以用来避免不必要的布局重算。
@Input({ transform: booleanAttribute }) `disableRipple: boolean`	是否已禁用涟漪效果。
@Input({ transform: booleanAttribute }) `fitInkBarToContent: boolean`	此墨条是否应使其宽度适合选项卡标签内容的大小。
@Input({ transform: numberAttribute }) `selectedIndex: number`	活动选项卡的索引。
@Input({ alias: 'mat-stretch-tabs', transform: booleanAttribute }) `stretchTabs: boolean`	是否应拉伸选项卡以填充标题区。
@Input() `tabPanel: MatTabNavPanel`	由导航栏控制的关联选项卡面板。如果未提供，则导航栏遵循 ARIA 链接/导航地标模式。如果提供，它遵循 ARIA 选项卡设计模式。
@Output() `indexFocused: EventEmitter<number>`	选项卡获得焦点时发出的事件。
@Output() `selectFocusedIndex: EventEmitter<number>`	选定该选项卡时会发出本事件。
`focusIndex: number`	跟踪哪个元素有焦点;用于键盘导航
`scrollDistance: number`	设置选项卡标头在 X 轴上的变换距离（以像素为单位）。

方法

updateActiveLink
通知组件此活动链接已更改。

updatePagination
更新视图是否应该启用分页。警告：就性能而言，调用此方法的成本非常高。它应尽可能从选项卡列表组件的外部调用，因为它会导致页面重排。

updatePagination

更新视图是否应该启用分页。

警告：就性能而言，调用此方法的成本非常高。它应尽可能从选项卡列表组件的外部调用，因为它会导致页面重排。

`MatTabNavPanel`

与 MatTabNav 关联的选项卡面板组件。

选择器： mat-tab-nav-panel

Exported as: matTabNavPanel

属性

名称	描述
@Input() id: `mat-tab-nav-panel-${nextUniqueId++}`	选项卡面板的唯一 ID。

`MatTabLink`

mat-tab-nav-bar 内部的链接。

选择器： [mat-tab-link] [matTabLink]

Exported as: matTabLink

属性

名称	描述
@Input({ transform: booleanAttribute }) `active: boolean`	此链接是否处于活动状态。
@Input({ transform: booleanAttribute }) `disableRipple: boolean`	是否禁用选项卡链接上的波纹。
@Input({ transform: booleanAttribute }) `disabled: boolean`	选项卡链接是否被禁用。
@Input({ transform: booleanAttribute }) `fitInkBarToContent: boolean`	墨迹条是否应该适合整个选项卡，还是只适合其内容。
@Input() id: `mat-tab-link-${nextUniqueId++}`	选项卡的唯一 ID。

方法

activateInkBar
将墨迹条对齐到当前条目。
参数
previousIndicatorClientRect ? `DOMRect`

deactivateInkBar
从当前条目中移除墨迹条。

focus
让此选项卡链接获得焦点。

类

`MatTabChangeEvent`

焦点或选定状态发生变化时会发出的简单变更事件。

属性

名称	描述
`index: number`	当前选定的选项卡的索引。
`tab: MatTab`	到当前选定的选项卡的引用。

接口

`MatTabsConfig`

可用于配置选项卡模块默认选项的对象。

属性

名称	描述
`animationDuration: string`	选项卡动画的持续时间。必须是一个有效的 CSS 值（比如 600ms）。
`contentTabIndex: number`	在包装制表符内容的内部元素上设置的 `tabindex`
`disablePagination: boolean`	是否应该禁用分页。如果明确知道不需要分页，这可以用来避免不必要的布局重算。
`dynamicHeight: boolean`	选项卡组是否应该增长到活动选项卡的大小。
`fitInkBarToContent: boolean`	墨水条的宽度是否与选项卡内容的大小相符。这仅适用于基于 MDC 的选项卡。
`preserveContent: boolean`	默认情况下，选项卡在屏幕外时会从 DOM 中删除其内容。将此设置为 `true` 会将其保留在 DOM 中，这将防止 iframe 和视频等元素在下次返回视图时重新加载。
`stretchTabs: boolean`	是否应拉伸选项卡以填充标题区。

类型别名

`ScrollDirection`

当标头上的选项卡超出标头宽度时，可以滚动的方向。'after' 会把标头滚动到选项卡列表的末尾，'before' 会滚动到列表的开头。

type ScrollDirection = 'after' | 'before';

`MatTabBodyPositionState`

这些位置状态在内部用作选项卡本体的动画状态。将位置状态设置为 left、right 或 center，会把选项卡本体从当前位置转移到各自的状态。如果没有当前位置（对于新的选项卡本体是 void），那么它的状态就没有过渡动画了）。

如果新选项卡主体应立即以动画过渡对齐到中央，则可以使用 left-origin-center 或 right-origin-center，这将使用 left 或 right 作为其伪前置状态。

type MatTabBodyPositionState = 'left' | 'center' | 'right' | 'left-origin-center' | 'right-origin-center';

`MatTabBodyOriginState`

原始状态是一个内部使用的状态，它在新的选项卡本体上设置，表明它是从前一个选定索引的左侧还是右侧开始的。例如，如果选定索引设置为 1，并且在索引 2 处创建并选定了一个新选项卡，则该选项卡本体的原点是右侧，因为它的索引大于之前选择的索引。

type MatTabBodyOriginState = 'left' | 'right';

`MatTabHeaderPosition`

选项卡标头的可能位置。

type MatTabHeaderPosition = 'above' | 'below';

常量

`MAT_TABS_CONFIG`

这个注入令牌可以用来提供选项卡模块的默认选项。

const MAT_TABS_CONFIG: InjectionToken<MatTabsConfig>;

`MAT_TAB_CONTENT`

这个注入令牌可以用来引用 MatTabContent 实例。它可以作为实际 MatTabContent 类的备用令牌，直接使用实际类可能导致该类及其元数据无法被优化掉。

const MAT_TAB_CONTENT: InjectionToken<MatTabContent>;

`MAT_TAB_LABEL`

这个注入令牌可以用来引用 MatTabLabel 实例。它可以作为实际 MatTabLabel 类的备用令牌，直接使用实际类可能导致该类及其元数据无法被优化掉。

const MAT_TAB_LABEL: InjectionToken<MatTabLabel>;

Angular Material 选项卡的 API 参考

指令

MatTabContent

属性

MatTabLabel 继承自 CdkPortal

属性

方法

MatTab

属性

MatTabGroup

属性

方法

MatTabNav

属性

方法

MatTabNavPanel

属性

MatTabLink

属性

方法

类

MatTabChangeEvent

属性

接口

MatTabsConfig

属性