Angular Material

Angular Material tabs API 参考文档

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

指令

`MatTab`

选择器： mat-tab

导出为： matTab

属性

名称	描述
@Input('aria-label') `ariaLabel: string`	选项卡的 Aria 标签。 Aria label for the tab.
@Input('aria-labelledby') `ariaLabelledby: string`	到选项卡标签所标注的元素的引用。如果同时设置了 `aria-label`，该属性将被清除。 Reference to the element that the tab is labelled by. Will be cleared if `aria-label` is set at the same time.
@Input() `disabled: boolean`	Whether the component is disabled.
@Input('label') `textLabel: string`	选项卡的纯文本标签，没有模板标签时使用。 Plain text label for the tab, used when there is no template label.
`isActive: false`	该选项卡目前是否有效。 Whether the tab is currently active.
`origin: number \| null`	该选项卡初始相对索引的原点（如果已经创建并在已选定的选项卡之后被选定）。这个属性提供了此选项卡应该来自哪个位置的上下文。 The initial relatively index origin of the tab if it was created and selected after there was already a selected tab. Provides context of what position the tab should originate from.
`position: number \| null`	相对的索引位置，其中 0 代表中心，负数代表左边，正数代表右边。 The relatively indexed position where 0 represents the center, negative is left, and positive represents the right.
`templateLabel: MatTabLabel`	选项卡标签的内容由 `<ng-template mat-tab-label>` 指定。 Content for the tab label given by `<ng-template mat-tab-label>`.

`MatTabLabel` extends CdkPortal

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

Used to flag tab labels for use with the portal directive

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

属性

名称	描述
`context: C \| undefined`	要传入内嵌式视图中的上下文数据。 Contextual data to be passed in to the embedded view.
`isAttached: boolean`	此传送点是否已附加到宿主上。 Whether this portal is attached to a host.
`origin: ElementRef`
`templateRef: TemplateRef<C>`	嵌入式模板，用于在宿主中实例化一个嵌入式视图。 The embedded template that will be used to instantiate an embedded View in the host.
`viewContainerRef: ViewContainerRef`	要容纳模板生成物的 ViewContainer 的引用。 Reference to the ViewContainer into which the template will be stamped out.

方法

attach
把此传送点添加到所提供的 `PortalOutlet` 中。当提供了上下文时，它会改写 `TemplatePortal` 实例 `context` 属性。 Attach the portal to the provided `PortalOutlet`. When a context is provided it will override the `context` property of the `TemplatePortal` instance.
参数 Parameters
host `PortalOutlet`
context `C = this.context`
返回值 Returns
`EmbeddedViewRef<C>`

detach

setAttachedHost

setAttachedHost
在不执行 `attach()` 的情况下设置 PortalOutlet 的引用。当 PortalOutlet 要执行 `attach()` 或 `detach()` 时会直接使用它。 Sets the PortalOutlet reference without performing `attach()`. This is used directly by the PortalOutlet when it is performing an `attach()` or `detach()`.
host `PortalOutlet`

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

Sets the PortalOutlet reference without performing attach(). This is used directly by the PortalOutlet when it is performing an attach() or detach().

参数

Parameters

host

PortalOutlet

`MatTabNav`

Navigation component matching the styles of the tab group header. Provides anchored navigation with animated ink bar.

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

导出为： matTabNavBar, matTabNav

属性

名称	描述
@Input() `backgroundColor: ThemePalette`	Background color of the tab nav.
@Input() `color: ThemePalette`	Theme color of the nav bar.
@Input() `disablePagination: boolean`	是否应该禁用分页。如果明确知道不需要分页，这可以用来避免不必要的布局重算。 Whether pagination should be disabled. This can be used to avoid unnecessary layout recalculations if it's known that pagination won't be required.
@Input() `disableRipple: any`	Whether the ripple effect is disabled or not.
`focusIndex: number`	跟踪哪个元素有焦点;用于键盘导航 Tracks which element has focus; used for keyboard navigation
`indexFocused: EventEmitter<number>`	选项卡获得焦点时发出的事件。 Event emitted when a label is focused.
`scrollDistance: number`	设置选项卡标头在 X 轴上的变换距离（以像素为单位）。 Sets the distance in pixels that the tab header should be transformed in the X-axis.
`selectFocusedIndex: EventEmitter<number>`	选定该选项卡时会发出本事件。 Event emitted when the option is selected.
`selectedIndex: number`	活动选项卡的索引。 The index of the active tab.

方法

updateActiveLink
Notifies the component that the active link has been changed.

updatePagination
更新视图是否应该启用分页。 Updates the view whether pagination should be enabled or not. 警告：就性能而言，调用此方法的成本非常高。它应尽可能从选项卡列表组件的外部调用，因为它会导致页面重排。 WARNING: Calling this method can be very costly in terms of performance. It should be called as infrequently as possible from outside of the Tabs component as it causes a reflow of the page.

updatePagination

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

Updates the view whether pagination should be enabled or not.

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

WARNING: Calling this method can be very costly in terms of performance. It should be called as infrequently as possible from outside of the Tabs component as it causes a reflow of the page.

`MatTabLink`

Link inside of a mat-tab-nav-bar.

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

导出为： matTabLink

属性

名称	描述
@Input() `active: boolean`	Whether the link is active.
@Input() `disableRipple: boolean`	Whether ripples are disabled.
@Input() `disabled: boolean`	Whether the component is disabled.
`defaultTabIndex: number`	Tabindex to which to fall back to if no value is set.

方法

focus
Focuses the tab link.

`MatTabContent`

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

Decorates the ng-template tags and reads out the template from it.

选择器： [matTabContent]

属性

名称	描述
`template: TemplateRef<any>`	Content for the tab.

`MatTabGroup`

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

Material design tab-group component. Supports basic tab pairs (label + content) and includes animated ink-bar, keyboard navigation, and screen reader. See: https://material.io/design/components/tabs.html

选择器： mat-tab-group

导出为： matTabGroup

属性

名称	描述
@Input() `animationDuration: string`	选项卡动画的持续时间。如果没有设置单位，它会被标准化为毫秒。 Duration for the tab animation. Will be normalized to milliseconds if no units are set.
@Input() `backgroundColor: ThemePalette`	选项卡组的背景颜色。 Background color of the tab group.
@Input() `color: ThemePalette`	Theme color palette for the component.
@Input() `contentTabIndex: number \| null`	`tabindex` to be set on the inner element that wraps the tab content. Can be used for improved accessibility when the tab does not have focusable elements or if it has scrollable content. The `tabindex` will be removed automatically for inactive tabs. Read more at https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-2/tabs.html
@Input() `disablePagination: boolean`	是否应该禁用分页。如果明确知道不需要分页，这可以用来避免不必要的布局重算。 Whether pagination should be disabled. This can be used to avoid unnecessary layout recalculations if it's known that pagination won't be required.
@Input() `disableRipple: boolean`	Whether ripples are disabled.
@Input() `dynamicHeight: boolean`	选项卡组是否应该增长到活动选项卡的大小。 Whether the tab group should grow to the size of the active tab.
@Input() `headerPosition: MatTabHeaderPosition`	选项卡标头的位置。 Position of the tab header.
@Input() `selectedIndex: number \| null`	活动选项卡的索引。 The index of the active tab.
@Output() `animationDone: EventEmitter<void>`	当本体动画完成后，就会发出此事件 Event emitted when the body animation has completed
@Output() `focusChange: EventEmitter<MatTabChangeEvent>`	选项卡组中的焦点发生变化时发出的事件。 Event emitted when focus has changed within a tab group.
@Output() `selectedIndexChange: EventEmitter<number>`	用来支持 `[(selectedIndex)]` 双向绑定的输出属性 Output to enable support for two-way binding on `[(selectedIndex)]`
@Output() `selectedTabChange: EventEmitter<MatTabChangeEvent>`	选项卡的选定值发生变化时发出的事件。 Event emitted when the tab selection has changed.
`defaultColor: ThemePalette \| undefined`	Default color to fall back to if no value is set.

方法

focusTab

focusTab
Sets focus to a particular tab. @param index Index of the tab to be focused.
index `number`

Sets focus to a particular tab. @param index Index of the tab to be focused.

参数

Parameters

index

number

realignInkBar
将墨水条与选定的选项卡元素重新对齐。 Re-aligns the ink bar to the selected tab element.

realignInkBar

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

Re-aligns the ink bar to the selected tab element.

类

`MatTabChangeEvent`

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

A simple change event emitted on focus or selection changes.

属性

名称描述

名称	描述
`index: number`	当前选定的选项卡的索引。 Index of the currently-selected tab.
`tab: MatTab`	到当前选定的选项卡的引用。 Reference to the currently-selected tab.

index: number

当前选定的选项卡的索引。

Index of the currently-selected tab.

tab: MatTab

到当前选定的选项卡的引用。

Reference to the currently-selected tab.

接口

`MatTabsConfig`

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

Object that can be used to configure the default options for the tabs module.

属性

名称	描述
`animationDuration: string`	选项卡动画的持续时间。必须是一个有效的 CSS 值（比如 600ms）。 Duration for the tab animation. Must be a valid CSS value (e.g. 600ms).
`contentTabIndex: number`	`tabindex` to be set on the inner element that wraps the tab content.
`disablePagination: boolean`	是否应该禁用分页。如果明确知道不需要分页，这可以用来避免不必要的布局重算。 Whether pagination should be disabled. This can be used to avoid unnecessary layout recalculations if it's known that pagination won't be required.
`dynamicHeight: boolean`	选项卡组是否应该增长到活动选项卡的大小。 Whether the tab group should grow to the size of the active tab.
`fitInkBarToContent: boolean`	墨水条的宽度是否与选项卡内容的大小相符。这仅适用于基于 MDC 的选项卡。 Whether the ink bar should fit its width to the size of the tab label content. This only applies to the MDC-based tabs.

类型别名

`MatTabBodyOriginState`

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

The origin state is an internally used state that is set on a new tab body indicating if it began to the left or right of the prior selected index. For example, if the selected index was set to 1, and a new tab is created and selected at index 2, then the tab body would have an origin of right because its index was greater than the prior selected index.

type MatTabBodyOriginState = 'left' | 'right';

`MatTabBodyPositionState`

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

These position states are used internally as animation states for the tab body. Setting the position state to left, right, or center will transition the tab body from its current position to its respective state. If there is not current position (void, in the case of a new tab body), then there will be no transition animation to its state.

如果新的选项卡本体应该立即以动画过渡到居中位置，那么就可以使用 left-origin-center 或 right-origin-center，它会用 left 或 right 作为伪造的先前状态。

In the case of a new tab body that should immediately be centered with an animating transition, then left-origin-center or right-origin-center can be used, which will use left or right as its psuedo-prior state.

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

`ScrollDirection`

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

The directions that scrolling can go in when the header's tabs exceed the header width. 'After' will scroll the header towards the end of the tabs list and 'before' will scroll towards the beginning of the list.

type ScrollDirection = 'after' | 'before';

`MatTabHeaderPosition`

选项卡标头的可能位置。

Possible positions for the tab header.

type MatTabHeaderPosition = 'above' | 'below';

常量

`MAT_TABS_CONFIG`

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

Injection token that can be used to provide the default options the tabs module.

const MAT_TABS_CONFIG: InjectionToken<MatTabsConfig>;

Angular Material tabs-testing API 参考文档

import {MatTabGroupHarness} from '@angular/material/tabs/testing';

类

`MatTabGroupHarness` extends ComponentHarness

在测试中用来与标准 mat-tab-group 进行交互的测试工具。

Harness for interacting with a standard mat-tab-group in tests.

方法

异步 getSelectedTab
Gets the selected tab of the tab group.
`Promise<MatTabHarness>`

异步

getSelectedTab

Gets the selected tab of the tab group.

返回值

Returns

Promise<MatTabHarness>

异步 getTabs
Gets the list of tabs in the tab group. @param filter Optionally filters which tabs are included.
参数 Parameters
filter `TabHarnessFilters = {}`
返回值 Returns
`Promise<MatTabHarness[]>`

异步 host
获取一个代表该组件宿主元素的 `TestElement` 型 `Promise`。 Gets a `Promise` for the `TestElement` representing the host element of the component.
`Promise<TestElement>`

异步

host

获取一个代表该组件宿主元素的 TestElement 型 Promise。

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>

异步 selectTab
Selects a tab in this tab group. @param filter An optional filter to apply to the child tabs. The first tab matching the filter will be selected.
参数 Parameters
filter `TabHarnessFilters = {}`
返回值 Returns
`Promise<void>`	Promise that resolves when the action completes.

`MatTabHarness` extends ContentContainerComponentHarness

Harness for interacting with a standard Angular Material tab-label in tests.

方法

异步 getAllChildLoaders
参数 Parameters
selector `S`
返回值 Returns
`Promise<HarnessLoader[]>`

异步 getAllHarnesses
参数 Parameters
query `HarnessQuery<T>`
返回值 Returns
`Promise<T[]>`

异步 getAriaLabel
Gets the aria-label of the tab.
`Promise<string \| null>`

异步

getAriaLabel

Gets the aria-label of the tab.

返回值

Returns

Promise<string | null>

异步 getAriaLabelledby
Gets the value of the "aria-labelledby" attribute.
`Promise<string \| null>`

异步

getAriaLabelledby

Gets the value of the "aria-labelledby" attribute.

返回值

Returns

Promise<string | null>

异步 getChildLoader
参数 Parameters
selector `S`
返回值 Returns
`Promise<HarnessLoader>`

异步 getHarness
参数 Parameters
query `HarnessQuery<T>`
返回值 Returns
`Promise<T>`

异步 getLabel
Gets the label of the tab.
`Promise<string>`

异步

getLabel

Gets the label of the tab.

返回值

Returns

Promise<string>

异步 getRootHarnessLoader
`Promise<HarnessLoader>`

异步

getRootHarnessLoader

返回值

Returns

Promise<HarnessLoader>

异步 getTextContent
Gets the text content of the tab.
`Promise<string>`

异步

getTextContent

Gets the text content of the tab.

返回值

Returns

Promise<string>

异步 host
获取一个代表该组件宿主元素的 `TestElement` 型 `Promise`。 Gets a `Promise` for the `TestElement` representing the host element of the component.
`Promise<TestElement>`

异步

host

获取一个代表该组件宿主元素的 TestElement 型 Promise。

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>

异步 isDisabled
Whether the tab is disabled.
`Promise<boolean>`

异步

isDisabled

Whether the tab is disabled.

返回值

Returns

Promise<boolean>

异步 isSelected
Whether the tab is selected.
`Promise<boolean>`

异步

isSelected

Whether the tab is selected.

返回值

Returns

Promise<boolean>

异步 select
Selects the given tab by clicking on the label. Tab cannot be selected if disabled.
`Promise<void>`	Promise that resolves when the action completes.

异步

select

Selects the given tab by clicking on the label. Tab cannot be selected if disabled.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

已弃用异步 getHarnessLoaderForContent
Gets a `HarnessLoader` that can be used to load harnesses for components within the tab's content area. @deprecated Use `getHarness` or `getChildLoader` instead. @breaking-change 12.0.0
`Promise<HarnessLoader>`

已弃用

异步

getHarnessLoaderForContent

Gets a HarnessLoader that can be used to load harnesses for components within the tab's content area. @deprecated Use getHarness or getChildLoader instead. @breaking-change 12.0.0

返回值

Returns

Promise<HarnessLoader>

`MatTabNavBarHarness` extends ComponentHarness

在测试中用来与标准 mat-tab-nav-bar 进行交互的测试工具。

Harness for interacting with a standard mat-tab-nav-bar in tests.

方法

异步 clickLink
Clicks a link inside the nav bar. @param filter An optional filter to apply to the child link. The first link matching the filter will be clicked.
参数 Parameters
filter `TabLinkHarnessFilters = {}`
返回值 Returns
`Promise<void>`	Promise that resolves when the action completes.

异步 getActiveLink
Gets the active link in the nav bar.
`Promise<MatTabLinkHarness>`

异步

getActiveLink

Gets the active link in the nav bar.

返回值

Returns

Promise<MatTabLinkHarness>

异步 getLinks
Gets the list of links in the nav bar. @param filter Optionally filters which links are included.
参数 Parameters
filter `TabLinkHarnessFilters = {}`
返回值 Returns
`Promise<MatTabLinkHarness[]>`

异步 host
获取一个代表该组件宿主元素的 `TestElement` 型 `Promise`。 Gets a `Promise` for the `TestElement` representing the host element of the component.
`Promise<TestElement>`

异步

host

获取一个代表该组件宿主元素的 TestElement 型 Promise。

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>

`MatTabLinkHarness` extends ComponentHarness

Harness for interacting with a standard Angular Material tab link in tests.

方法

异步 click
Clicks on the link.
`Promise<void>`	Promise that resolves when the action completes.

异步

click

Clicks on the link.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 getLabel
Gets the label of the link.
`Promise<string>`

异步

getLabel

Gets the label of the link.

返回值

Returns

Promise<string>

异步 host
获取一个代表该组件宿主元素的 `TestElement` 型 `Promise`。 Gets a `Promise` for the `TestElement` representing the host element of the component.
`Promise<TestElement>`

异步

host

获取一个代表该组件宿主元素的 TestElement 型 Promise。

Gets a Promise for the TestElement representing the host element of the component.

返回值

Returns

Promise<TestElement>

异步 isActive
Whether the link is active.
`Promise<boolean>`

异步

isActive

Whether the link is active.

返回值

Returns

Promise<boolean>

异步 isDisabled
Whether the link is disabled.
`Promise<boolean>`

异步

isDisabled

Whether the link is disabled.

返回值

Returns

Promise<boolean>

接口

`TabHarnessFilters`

A set of criteria that can be used to filter a list of MatTabHarness instances.

属性

名称描述

名称	描述
`label: string \| RegExp`	只查找标签与指定值匹配的实例。 Only find instances whose label matches the given value.

label: string | RegExp

只查找标签与指定值匹配的实例。

Only find instances whose label matches the given value.

`TabGroupHarnessFilters`

A set of criteria that can be used to filter a list of MatTabGroupHarness instances.

属性

名称	描述
`selectedTabLabel: string \| RegExp`	Only find instances whose selected tab label matches the given value.

`TabLinkHarnessFilters`

A set of criteria that can be used to filter a list of MatTabLinkHarness instances.

属性

名称描述

名称	描述
`label: string \| RegExp`	只查找标签与指定值匹配的实例。 Only find instances whose label matches the given value.

label: string | RegExp

只查找标签与指定值匹配的实例。

Only find instances whose label matches the given value.

`TabNavBarHarnessFilters`

A set of criteria that can be used to filter a list of MatTabNavBarHarness instances.

选项卡 API 目录

Testing

Angular Material tabs API 参考文档

link 指令

link MatTab

属性

link MatTabLabel extends CdkPortal

属性

方法

link MatTabNav

属性

方法

link MatTabLink

属性

方法

link MatTabContent

属性

link MatTabGroup

属性

方法

link 类

link MatTabChangeEvent

属性

link 接口

link MatTabsConfig

属性

link 类型别名

link MatTabBodyOriginState

link MatTabBodyPositionState

link ScrollDirection

link MatTabHeaderPosition

link 常量

link MAT_TABS_CONFIG

Angular Material tabs-testing API 参考文档

link 类

link MatTabGroupHarness extends ComponentHarness

方法

link MatTabHarness extends ContentContainerComponentHarness

方法

link MatTabNavBarHarness extends ComponentHarness

方法

link MatTabLinkHarness extends ComponentHarness

方法

link 接口

link TabHarnessFilters

属性

link TabGroupHarnessFilters

属性

link TabLinkHarnessFilters

属性

link TabNavBarHarnessFilters

指令

`MatTab`

`MatTabLabel` extends CdkPortal

`MatTabNav`

`MatTabLink`

`MatTabContent`

`MatTabGroup`

类

`MatTabChangeEvent`

接口

`MatTabsConfig`

类型别名

`MatTabBodyOriginState`

`MatTabBodyPositionState`

`ScrollDirection`

`MatTabHeaderPosition`

常量

`MAT_TABS_CONFIG`

类

`MatTabGroupHarness` extends ComponentHarness

`MatTabHarness` extends ContentContainerComponentHarness

`MatTabNavBarHarness` extends ComponentHarness

`MatTabLinkHarness` extends ComponentHarness

接口

`TabHarnessFilters`

`TabGroupHarnessFilters`

`TabLinkHarnessFilters`

`TabNavBarHarnessFilters`