可展开面板 Expansion Panel

expansion 的 API

Angular Material expansion API 参考文档

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

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.

openAll

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

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

该组件既可以作为单个元素来显示可展开的内容,也可以作为附加了 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: any

此条目是否被禁用了。

Whether the AccordionItem is disabled.

@Input()

expanded: any

此条目是否已经展开了。

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.

open

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

Sets the expanded state of the expansion panel to true.

toggle

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

Toggles the expanded state of the expansion panel.

Actions of a <mat-expansion-panel>.

选择器: mat-action-row

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

panel: MatExpansionPanel

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

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

选择器: mat-panel-description

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

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

选择器: mat-panel-title

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

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

选择器: ng-template[matExpansionPanelContent]

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

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.

MatAccordion 的显示模式。

MatAccordion's display modes.

type MatAccordionDisplayMode = 'default' | 'flat';

MatAccordion 的切换位置。

MatAccordion's toggle positions.

type MatAccordionTogglePosition = 'before' | 'after';

MatExpansionPanel 的状态。

MatExpansionPanel's states.

type MatExpansionPanelState = 'expanded' | 'collapsed';

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

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

const MAT_ACCORDION: InjectionToken<MatAccordionBase>;

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

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

const MAT_EXPANSION_PANEL_DEFAULT_OPTIONS: InjectionToken<MatExpansionPanelDefaultOptions>;

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

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

在测试中用来与标准 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

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

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.

返回值

Returns

Promise<boolean>

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

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

方法
异步
blur

Blurs the panel.

返回值

Returns

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.

返回值

Returns

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

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.

返回值

Returns

Promise<string>
异步
getTitle

Gets the title text of the panel.

返回值

Returns

Promise<string | null>

Title text or null if no title is set up.

异步
getToggleIndicatorPosition

Gets the position of the toggle indicator.

返回值

Returns

Promise<'before' | 'after'>
异步
hasToggleIndicator

Whether the panel has a toggle indicator displayed.

返回值

Returns

Promise<boolean>
异步
host

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

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

返回值

Returns

Promise<TestElement>
异步
isDisabled

Whether the panel is disabled.

返回值

Returns

Promise<boolean>
异步
isExpanded

Whether the panel is expanded.

返回值

Returns

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.

返回值

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.

返回值

Returns

Promise<HarnessLoader>
属性
名称 描述

content: string | RegExp

description: string | RegExp | null

disabled: boolean

expanded: boolean

title: string | RegExp | null