Angular Material 展开面板 API 参考

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

Material Design 手风琴的指令

选择器： mat-accordion

Exported as: matAccordion
属性
名称 描述
@Input()

displayMode: MatAccordionDisplayMode

手风琴中的所有可展开面板的显示模式。目前有两种显示模式： default - 在任何展开的面板周围放置一个类似于沟的间距，把展开的面板放在与手风琴其余部分不同的纵深上。 flat - 展开的面板周围没有间距，所有面板显示在同样的纵深上。
@Input({ transform: booleanAttribute })

hideToggle: boolean

是否应该隐藏展开指示器。
@Input({ transform: booleanAttribute })

multi: boolean

手风琴是否应该允许同时展开多个手风琴条目。
@Input()

togglePosition: MatAccordionTogglePosition

展开指示器的位置。

id: string

一个只读的 id 值，用于在单选模式下进行协调。
方法
closeAll

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

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

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

选择器： mat-expansion-panel

Exported as: matExpansionPanel
属性
名称 描述
@Input({ transform: booleanAttribute })

disabled: boolean

此条目是否已禁用了。
@Input({ transform: booleanAttribute })

expanded: boolean

此条目是否已经展开了。
@Input({ transform: booleanAttribute })

hideToggle: boolean

是否应该隐藏切换指示器。
@Input()

togglePosition: MatAccordionTogglePosition

展开指示器的位置。
@Output()

afterCollapse: EventEmitter<void>

面板体折叠动画发生后触发的事件。。
@Output()

afterExpand: EventEmitter<void>

面板体展开动画发生后触发的事件。
@Output()

closed: EventEmitter<void>

每次关闭此条目时都会发出本事件。
@Output()

destroyed: EventEmitter<void>

当此条目被销毁时会发出本事件。
@Output()

opened: EventEmitter<void>

每次打开此条目时都会发出本事件。

accordion: MatAccordionBase

（可选的）可展开面板所属的已定义手风琴。

id: string

AccordionItem 的唯一 id。
方法
close

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

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

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

<mat-expansion-panel> 的操作。

选择器： mat-action-row

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

选择器： mat-expansion-panel-header

属性
名称 描述
@Input()

collapsedHeight: string

当面板折叠时，标题的高度。
@Input()

expandedHeight: string

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

panel: MatExpansionPanel

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

选择器： mat-panel-description

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

选择器： mat-panel-title

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

选择器： ng-template[matExpansionPanelContent]

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

属性
名称 描述

collapsedHeight: string

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

expandedHeight: string

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

hideToggle: boolean

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

MatAccordion 的显示模式。

type MatAccordionDisplayMode = 'default' | 'flat';

MatAccordion 的切换位置。

type MatAccordionTogglePosition = 'before' | 'after';

MatExpansionPanel 的状态。

type MatExpansionPanelState = 'expanded' | 'collapsed';

用于向 MatExpansionPanelContent 提供 MatExpansionPanel 的令牌。用于避免 MatExpansionPanel 和 MatExpansionPanelContent 之间的循环导入。

const MAT_EXPANSION_PANEL: InjectionToken<MatExpansionPanelBase>;

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

const MAT_ACCORDION: InjectionToken<MatAccordionBase>;

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

const MAT_EXPANSION_PANEL_DEFAULT_OPTIONS: InjectionToken<MatExpansionPanelDefaultOptions>;

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

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