选项卡 Tabs

tabs 的 API

Angular Material tabs API 参考文档

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

选择器: 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>.

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

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

在不执行 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

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

@Input()

disableRipple: any

Whether the ripple effect is disabled or not.

focusIndex: number

indexFocused: EventEmitter<number>

scrollDistance: number

selectFocusedIndex: EventEmitter<number>

selectedIndex: number

方法
updateActiveLink

Notifies the component that the active link has been changed.

updatePagination

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.

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

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

选择器: [matTabContent]
属性
名称 描述

template: TemplateRef<any>

Content for the tab.

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()

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.

方法
realignInkBar

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

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

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

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.

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

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).

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.

原始状态是一个内部使用的状态,它在新的选项卡本体上设置,表明它是从前一个选定索引的左侧还是右侧开始的。 例如,如果选定索引设置为 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';

这些位置状态在内部用作选项卡本体的动画状态。将位置状态设置为 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';

当标头上的选项卡超出标头宽度时,可以滚动的方向。 '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';

选项卡标头的可能位置。

Possible positions for the tab header.

type MatTabHeaderPosition = 'above' | 'below';

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

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';

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

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

方法
异步
getSelectedTab

Gets the selected tab of the tab group.

返回值

Returns

Promise<MatTabHarness>
异步
getTabs

Gets the list of tabs in the tab group.

参数

Parameters

filter

TabHarnessFilters = {}

Optionally filters which tabs are included.

返回值

Returns

Promise<MatTabHarness[]>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

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

返回值

Returns

Promise<TestElement>
异步
selectTab

Selects a tab in this tab group.

参数

Parameters

filter

TabHarnessFilters = {}

An optional filter to apply to the child tabs. The first tab matching the filter will be selected.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

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.

返回值

Returns

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.

返回值

Returns

Promise<string>
异步
getRootHarnessLoader

返回值

Returns

Promise<HarnessLoader>
异步
getTextContent

Gets the text content of the tab.

返回值

Returns

Promise<string>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

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

返回值

Returns

Promise<TestElement>
异步
isDisabled

Whether the tab is disabled.

返回值

Returns

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.

返回值

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.

返回值

Returns

Promise<HarnessLoader>

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

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

方法
异步
clickLink

Clicks a link inside the nav bar.

参数

Parameters

filter

TabLinkHarnessFilters = {}

An optional filter to apply to the child link. The first link matching the filter will be clicked.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
getActiveLink

Gets the active link in the nav bar.

返回值

Returns

Promise<MatTabLinkHarness>
异步
getLinks

Gets the list of links in the nav bar.

参数

Parameters

filter

TabLinkHarnessFilters = {}

Optionally filters which links are included.

返回值

Returns

Promise<MatTabLinkHarness[]>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

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

返回值

Returns

Promise<TestElement>

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

方法
异步
click

Clicks on the link.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步
getLabel

Gets the label of the link.

返回值

Returns

Promise<string>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

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

返回值

Returns

Promise<TestElement>
异步
isActive

Whether the link is active.

返回值

Returns

Promise<boolean>
异步
isDisabled

Whether the link is disabled.

返回值

Returns

Promise<boolean>

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.

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.

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.

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