Angular Material expansion API 参考文档
import {MatExpansionModule} from '@angular/material/expansion';
MatAccordion
extends
CdkAccordion
Material Design 手风琴的指令
Directive for a Material Design Accordion.
属性
| 名称 | 描述 |
|---|---|
@Input()
|
手风琴中的所有可展开面板的显示模式。目前有两种显示模式： 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()
|
是否应该隐藏展开指示器。 Whether the expansion indicator should be hidden. |
@Input()
|
手风琴是否应该允许同时展开多个手风琴条目。 Whether the accordion should allow multiple expanded accordion items simultaneously. |
@Input()
|
展开指示器的位置。 The position of the expansion indicator. |
|
一个只读的 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. |
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.
属性
| 名称 | 描述 |
|---|---|
@Input()
|
此条目是否被禁用了。 Whether the AccordionItem is disabled. |
@Input()
|
此条目是否已经展开了。 Whether the AccordionItem is expanded. |
@Input()
|
是否应该隐藏切换指示器。 Whether the toggle indicator should be hidden. |
@Input()
|
展开指示器的位置。 The position of the expansion indicator. |
@Output()
|
面板体折叠动画发生后触发的事件。。 An event emitted after the body's collapse animation happens. |
@Output()
|
面板体展开动画发生后触发的事件。 An event emitted after the body's expansion animation happens. |
@Output()
|
每次关闭此条目时都会发出本事件。 Event emitted every time the AccordionItem is closed. |
@Output()
|
当此条目被销毁时会发出本事件。 Event emitted when the AccordionItem is destroyed. |
@Output()
|
每次打开此条目时都会发出本事件。 Event emitted every time the AccordionItem is opened. |
|
（可选的）可展开面板所属的已定义手风琴。 Optionally defined accordion the expansion panel belongs to. |
|
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. |
MatExpansionPanelActionRow
Actions of a <mat-expansion-panel>.
MatExpansionPanelHeader
<mat-expansion-panel> 标头元素。
Header element of a <mat-expansion-panel>.
属性
| 名称 | 描述 |
|---|---|
@Input()
|
当面板折叠时，标题的高度。 Height of the header while the panel is collapsed. |
@Input()
|
当面板展开时，标题的高度。 Height of the header while the panel is expanded. |
|
MatExpansionPanelDescription
<mat-expansion-panel-header> 的描述元素。
Description element of a <mat-expansion-panel-header>.
MatExpansionPanelTitle
<mat-expansion-panel-header> 的标头元素
Title element of a <mat-expansion-panel-header>.
MatExpansionPanelContent
这些可展开面板的内容会在面板第一次打开后惰性渲染。
Expansion panel content that will be rendered lazily after the panel is opened for the first time.
MatExpansionPanelDefaultOptions
该对象可以用来改写模块中所有可展开面板的默认选项。
Object that can be used to override the default options for all of the expansion panels in a module.
属性
| 名称 | 描述 |
|---|---|
|
当面板折叠时，标题的高度。 Height of the header while the panel is collapsed. |
|
当面板展开时，标题的高度。 Height of the header while the panel is expanded. |
|
是否应该隐藏切换指示器。 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
|
|
|---|---|
|
获取一个代表该组件宿主元素的 Gets a |
|
返回值 Returns |
|
Promise<TestElement>
|
|
异步
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. |
|
返回值 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 |
异步
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 |
异步
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
|
|
|---|---|
|
获取一个代表该组件宿主元素的 Gets a |
|
返回值 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 |
|
返回值 Returns |
|
Promise<HarnessLoader>
|
|
AccordionHarnessFilters
ExpansionPanelHarnessFilters
属性
| 名称 | 描述 |
|---|---|
|
|
|
|
|
|
|
|
|