Angular Material

Angular Material expansion API 参考文档

import {MatExpansionModule} from '@angular/material/expansion';

指令

`MatAccordion` extends CdkAccordion

Material Design 手风琴的指令

Directive for a Material Design Accordion.

选择器： mat-accordion

导出为： matAccordion

属性

名称	描述
@Input() `displayMode: MatAccordionDisplayMode`	手风琴中的所有可展开面板的显示模式。目前有两种显示模式： default - 在任何展开的面板周围放置一个类似于沟的间距，把展开的面板放在与手风琴其余部分不同的纵深上。 flat - 展开的面板周围没有间距，所有面板显示在同样的纵深上。 Display mode used for all expansion panels in the accordion. Currently two display modes exist: default - a gutter-like spacing is placed around any expanded panel, placing the expanded panel at a different elevation from the rest of the accordion. flat - no spacing is placed around expanded panels, showing all panels at the same elevation.
@Input() `hideToggle: boolean`	是否应该隐藏展开指示器。 Whether the expansion indicator should be hidden.
@Input() `multi: boolean`	手风琴是否应该允许同时展开多个手风琴条目。 Whether the accordion should allow multiple expanded accordion items simultaneously.
@Input() `togglePosition: MatAccordionTogglePosition`	展开指示器的位置。 The position of the expansion indicator.
id: `cdk-accordion-${nextId++}`	一个只读的 id 值，用于在单选模式下进行协调。 A readonly id value to use for unique selection coordination.

方法

closeAll
允许多选时，可以同时关闭手风琴中的所有可用条目。 Closes all enabled accordion items in an accordion where multi is enabled.

closeAll

允许多选时，可以同时关闭手风琴中的所有可用条目。

Closes all enabled accordion items in an accordion where multi is enabled.

openAll
允许多选时，可以同时打开手风琴中的所有可用条目。 Opens all enabled accordion items in an accordion where multi is enabled.

openAll

允许多选时，可以同时打开手风琴中的所有可用条目。

Opens all enabled accordion items in an accordion where multi is enabled.

`MatExpansionPanel` extends CdkAccordionItem

该组件既可以作为单个元素来显示可展开的内容，也可以作为附加了 MatAccordion 指令的元素的多个子元素之一。

This component can be used as a single element to show expandable content, or as one of multiple children of an element with the MatAccordion directive attached.

选择器： mat-expansion-panel

导出为： matExpansionPanel

属性

名称	描述
@Input() `disabled: boolean`	此条目是否被禁用了。 Whether the AccordionItem is disabled.
@Input() `expanded: boolean`	此条目是否已经展开了。 Whether the AccordionItem is expanded.
@Input() `hideToggle: boolean`	是否应该隐藏切换指示器。 Whether the toggle indicator should be hidden.
@Input() `togglePosition: MatAccordionTogglePosition`	展开指示器的位置。 The position of the expansion indicator.
@Output() `afterCollapse: EventEmitter<void>`	面板体折叠动画发生后触发的事件。。 An event emitted after the body's collapse animation happens.
@Output() `afterExpand: EventEmitter<void>`	面板体展开动画发生后触发的事件。 An event emitted after the body's expansion animation happens.
@Output() `closed: EventEmitter<void>`	每次关闭此条目时都会发出本事件。 Event emitted every time the AccordionItem is closed.
@Output() `destroyed: EventEmitter<void>`	当此条目被销毁时会发出本事件。 Event emitted when the AccordionItem is destroyed.
@Output() `opened: EventEmitter<void>`	每次打开此条目时都会发出本事件。 Event emitted every time the AccordionItem is opened.
`accordion: MatAccordionBase`	（可选的）可展开面板所属的已定义手风琴。 Optionally defined accordion the expansion panel belongs to.
`id: string`	AccordionItem 的唯一 id。 The unique AccordionItem id.

方法

close
将可展开面板的展开状态设置为 false。 Sets the expanded state of the expansion panel to false.

将可展开面板的展开状态设置为 false。

Sets the expanded state of the expansion panel to false.

open
将可展开面板的展开状态设置为 true。 Sets the expanded state of the expansion panel to true.

open

将可展开面板的展开状态设置为 true。

Sets the expanded state of the expansion panel to true.

toggle
切换可展开面板的展开状态。 Toggles the expanded state of the expansion panel.

toggle

切换可展开面板的展开状态。

Toggles the expanded state of the expansion panel.

`MatExpansionPanelActionRow`

Actions of a <mat-expansion-panel>.

选择器： mat-action-row

`MatExpansionPanelHeader`

<mat-expansion-panel> 标头元素。

Header element of a <mat-expansion-panel>.

选择器： mat-expansion-panel-header

属性

名称	描述
@Input() `collapsedHeight: string`	当面板折叠时，标题的高度。 Height of the header while the panel is collapsed.
@Input() `expandedHeight: string`	当面板展开时，标题的高度。 Height of the header while the panel is expanded.
`defaultTabIndex: number`	Tabindex to which to fall back to if no value is set.
`panel: MatExpansionPanel`

`MatExpansionPanelDescription`

<mat-expansion-panel-header> 的描述元素。

Description element of a <mat-expansion-panel-header>.

选择器： mat-panel-description

`MatExpansionPanelTitle`

<mat-expansion-panel-header> 的标头元素

Title element of a <mat-expansion-panel-header>.

选择器： mat-panel-title

`MatExpansionPanelContent`

这些可展开面板的内容会在面板第一次打开后惰性渲染。

Expansion panel content that will be rendered lazily after the panel is opened for the first time.

选择器： ng-template[matExpansionPanelContent]

接口

`MatExpansionPanelDefaultOptions`

该对象可以用来改写模块中所有可展开面板的默认选项。

Object that can be used to override the default options for all of the expansion panels in a module.

属性

名称描述

名称	描述
`collapsedHeight: string`	当面板折叠时，标题的高度。 Height of the header while the panel is collapsed.
`expandedHeight: string`	当面板展开时，标题的高度。 Height of the header while the panel is expanded.
`hideToggle: boolean`	是否应该隐藏切换指示器。 Whether the toggle indicator should be hidden.

collapsedHeight: string

当面板折叠时，标题的高度。

Height of the header while the panel is collapsed.

expandedHeight: string

当面板展开时，标题的高度。

Height of the header while the panel is expanded.

hideToggle: boolean

是否应该隐藏切换指示器。

Whether the toggle indicator should be hidden.

类型别名

`MatAccordionDisplayMode`

MatAccordion 的显示模式。

MatAccordion's display modes.

type MatAccordionDisplayMode = 'default' | 'flat';

`MatAccordionTogglePosition`

MatAccordion 的切换位置。

MatAccordion's toggle positions.

type MatAccordionTogglePosition = 'before' | 'after';

`MatExpansionPanelState`

MatExpansionPanel 的状态。

MatExpansionPanel's states.

type MatExpansionPanelState = 'expanded' | 'collapsed';

常量

`MAT_ACCORDION`

该令牌用于向 MatExpansionPanel 提供 MatAccordion。主要用于打破 MatAccordion 和 MatExpansionPanel 之间的循环导入。

Token used to provide a MatAccordion to MatExpansionPanel. Used primarily to avoid circular imports between MatAccordion and MatExpansionPanel.

const MAT_ACCORDION: InjectionToken<MatAccordionBase>;

`MAT_EXPANSION_PANEL_DEFAULT_OPTIONS`

这个注入令牌可以用来为可展开面板组件指定默认配置项。

Injection token that can be used to configure the defalt options for the expansion panel component.

const MAT_EXPANSION_PANEL_DEFAULT_OPTIONS: InjectionToken<MatExpansionPanelDefaultOptions>;

`EXPANSION_PANEL_ANIMATION_TIMING`

可展开面板动画的时间和时序曲线。

Time and timing curve for expansion panel animations.

const EXPANSION_PANEL_ANIMATION_TIMING: "225ms cubic-bezier(0.4,0.0,0.2,1)";

Angular Material expansion-testing API 参考文档

import {MatAccordionHarness} from '@angular/material/expansion/testing';

类

`MatAccordionHarness` extends ComponentHarness

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

Harness for interacting with a standard mat-accordion in tests.

方法

异步 getExpansionPanels
Gets all expansion panels which are part of the accordion.
参数 Parameters
filter `ExpansionPanelHarnessFilters = {}`
返回值 Returns
`Promise<MatExpansionPanelHarness[]>`

异步 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>

异步 isMulti
Whether the accordion allows multiple expanded panels simultaneously.
`Promise<boolean>`

异步

isMulti

Whether the accordion allows multiple expanded panels simultaneously.

返回值

Returns

Promise<boolean>

`MatExpansionPanelHarness` extends ContentContainerComponentHarness

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

Harness for interacting with a standard mat-expansion-panel in tests.

方法

异步 blur
Blurs the panel.
`Promise<void>`	Promise that resolves when the action completes.

异步

blur

Blurs the panel.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 collapse
Collapses the expansion panel if expanded.
`Promise<void>`	Promise that resolves when the action completes.

异步

collapse

Collapses the expansion panel if expanded.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 expand
Expands the expansion panel if collapsed.
`Promise<void>`	Promise that resolves when the action completes.

异步

expand

Expands the expansion panel if collapsed.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

异步 focus
Focuses the panel.
`Promise<void>`	Promise that resolves when the action completes.

异步

focus

Focuses the panel.

返回值

Returns

Promise<void>

Promise that resolves when the action completes.

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

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

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

异步 getDescription
Gets the description text of the panel. @returns Description text or `null` if no description is set up.
`Promise<string \| null>`	Description text or `null` if no description is set up.

异步

getDescription

Gets the description text of the panel. @returns Description text or null if no description is set up.

返回值

Returns

Promise<string | null>

Description text or null if no description is set up.

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

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

异步

getTextContent

Gets the text content of the panel.

返回值

Returns

Promise<string>

异步 getTitle
Gets the title text of the panel. @returns Title text or `null` if no title is set up.
`Promise<string \| null>`	Title text or `null` if no title is set up.

异步

getTitle

Gets the title text of the panel. @returns Title text or null if no title is set up.

返回值

Returns

Promise<string | null>

Title text or null if no title is set up.

异步 getToggleIndicatorPosition
Gets the position of the toggle indicator.
`Promise<'before' \| 'after'>`

异步

getToggleIndicatorPosition

Gets the position of the toggle indicator.

返回值

Returns

Promise<'before' | 'after'>

异步 hasToggleIndicator
Whether the panel has a toggle indicator displayed.
`Promise<boolean>`

异步

hasToggleIndicator

Whether the panel has a toggle indicator displayed.

返回值

Returns

Promise<boolean>

异步 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 panel is disabled.
`Promise<boolean>`

异步

isDisabled

Whether the panel is disabled.

返回值

Returns

Promise<boolean>

异步 isExpanded
Whether the panel is expanded.
`Promise<boolean>`

异步

isExpanded

Whether the panel is expanded.

返回值

Returns

Promise<boolean>

异步 isFocused
Whether the panel is focused.
`Promise<boolean>`

异步

isFocused

Whether the panel is focused.

返回值

Returns

Promise<boolean>

异步 toggle
Toggles the expanded state of the panel by clicking on the panel header. This method will not work if the panel is disabled.
`Promise<void>`	Promise that resolves when the action completes.

异步

toggle

Toggles the expanded state of the panel by clicking on the panel header. This method will not work if the panel is 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 panel's content area. @deprecated Use either `getChildLoader(MatExpansionPanelSection.CONTENT)`, `getHarness` or `getAllHarnesses` instead. @breaking-change 12.0.0
`Promise<HarnessLoader>`

已弃用

异步

getHarnessLoaderForContent

Gets a HarnessLoader that can be used to load harnesses for components within the panel's content area. @deprecated Use either getChildLoader(MatExpansionPanelSection.CONTENT), getHarness or getAllHarnesses instead. @breaking-change 12.0.0

返回值

Returns

Promise<HarnessLoader>

接口

`AccordionHarnessFilters`

`ExpansionPanelHarnessFilters`

属性

名称	描述
`content: string \| RegExp`
`description: string \| RegExp \| null`
`disabled: boolean`
`expanded: boolean`
`title: string \| RegExp \| null`

可展开面板 API 目录

Testing

Angular Material expansion API 参考文档

link 指令

link MatAccordion extends CdkAccordion

属性

方法

link MatExpansionPanel extends CdkAccordionItem

属性

方法

link MatExpansionPanelActionRow

link MatExpansionPanelHeader

属性

link MatExpansionPanelDescription

link MatExpansionPanelTitle

link MatExpansionPanelContent

link 接口

link MatExpansionPanelDefaultOptions

属性

link 类型别名

link MatAccordionDisplayMode

link MatAccordionTogglePosition

link MatExpansionPanelState

link 常量

link MAT_ACCORDION

link MAT_EXPANSION_PANEL_DEFAULT_OPTIONS

link EXPANSION_PANEL_ANIMATION_TIMING

Angular Material expansion-testing API 参考文档

link 类

link MatAccordionHarness extends ComponentHarness

方法

link MatExpansionPanelHarness extends ContentContainerComponentHarness

方法

link 接口

link AccordionHarnessFilters

link ExpansionPanelHarnessFilters

属性

指令

`MatAccordion` extends CdkAccordion

`MatExpansionPanel` extends CdkAccordionItem

`MatExpansionPanelActionRow`

`MatExpansionPanelHeader`

`MatExpansionPanelDescription`

`MatExpansionPanelTitle`

`MatExpansionPanelContent`

接口

`MatExpansionPanelDefaultOptions`

类型别名

`MatAccordionDisplayMode`

`MatAccordionTogglePosition`

`MatExpansionPanelState`

常量

`MAT_ACCORDION`

`MAT_EXPANSION_PANEL_DEFAULT_OPTIONS`

`EXPANSION_PANEL_ANIMATION_TIMING`

类

`MatAccordionHarness` extends ComponentHarness

`MatExpansionPanelHarness` extends ContentContainerComponentHarness

接口

`AccordionHarnessFilters`

`ExpansionPanelHarnessFilters`