Angular Material

Angular CDK stepper API 参考文档

import {CdkStepperModule} from '@angular/cdk/stepper';

指令

`CdkStep`

选择器： cdk-step

导出为： cdkStep

属性

名称	描述
@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() `completed: boolean`	步骤是否标记为已完成。 Whether step is marked as completed.
@Input() `editable: boolean`	一旦标记为已完成，用户是否可以返回此步骤。 Whether the user can return to this step once it has been marked as completed.
@Input() `errorMessage: string`	当出现错误时显示的错误信息。 Error message to display when there's an error.
@Input() `hasError: boolean`	步骤是否有错误。 Whether step has an error.
@Input() `label: string`	该步骤的纯文本标签。 Plain text label of the step.
@Input() `optional: boolean`	是否可以不必完成此步骤。 Whether the completion of step is optional.
@Input() `state: StepState`	步骤的状态。 State of the step.
@Input() `stepControl: AbstractControlLike`	该步骤的顶级抽象控件。 The top level abstract control of the step.
@Output('interacted') `interactedStream: EventEmitter<CdkStep>`	Emits when the user has attempted to move away from the step.
`content: TemplateRef<any>`	步骤内容的模板。 Template for step content.
`interacted: false`	用户是否试图从这一步离开。 Whether user has attempted to move away from the step.
`stepLabel: CdkStepLabel`	步进器标签的模板（如果存在）。 Template for step label if it exists.

方法

reset
把步骤重置为初始状态。请注意，这也包括重置表单数据。 Resets the step to its initial state. Note that this includes resetting form data.

reset

把步骤重置为初始状态。请注意，这也包括重置表单数据。

Resets the step to its initial state. Note that this includes resetting form data.

select
选择此步骤组件。 Selects this step component.

select

选择此步骤组件。

Selects this step component.

`CdkStepper`

选择器： [cdkStepper]

导出为： cdkStepper

属性

名称	描述
@Input() `linear: boolean`	是否检查前一个步骤的有效性。 Whether the validity of previous steps should be checked or not.
@Input() `orientation: StepperOrientation`	Orientation of the stepper.
@Input() `selected: CdkStep \| undefined`	选定的步骤 The step that is selected.
@Input() `selectedIndex: number`	选定步骤的索引。 The index of the selected step.
@Output() `selectionChange: EventEmitter<StepperSelectionEvent>`	选定的步骤发生变化时发出的事件。 Event emitted when the selected step has changed.
`steps: QueryList<CdkStep>`	属于当前步进器的步骤（不包括那些来自嵌套步进器中的步骤）。 Steps that belong to the current stepper, excluding ones from nested steppers.

方法

next
选择并让列表中的下一步获得焦点。 Selects and focuses the next step in list.

选择并让列表中的下一步获得焦点。

Selects and focuses the next step in list.

previous
选择并让列表中的上一步获得焦点。 Selects and focuses the previous step in list.

选择并让列表中的上一步获得焦点。

Selects and focuses the previous step in list.

reset
步进器的初始状态是 1。请注意，这包括清除表单数据。 Resets the stepper to its initial state. Note that this includes clearing form data.

reset

步进器的初始状态是 1。请注意，这包括清除表单数据。

Resets the stepper to its initial state. Note that this includes clearing form data.

`CdkStepLabel`

选择器： [cdkStepLabel]

`CdkStepperNext`

可以进入步进器工作流中下一步的按钮。

Button that moves to the next step in a stepper workflow.

选择器： button[cdkStepperNext]

属性

名称描述

名称	描述
@Input() `type: string`	下一个按钮的类型如果没有指定，默认为 “submit”。 Type of the next button. Defaults to "submit" if not specified.

@Input()

type: string

下一个按钮的类型如果没有指定，默认为 “submit”。

Type of the next button. Defaults to "submit" if not specified.

`CdkStepperPrevious`

移动到步进器工作流中上一步的按钮。

Button that moves to the previous step in a stepper workflow.

选择器： button[cdkStepperPrevious]

属性

名称描述

名称	描述
@Input() `type: string`	上一个按钮的类型如果没有指定，默认为 “button”。 Type of the previous button. Defaults to "button" if not specified.

@Input()

type: string

上一个按钮的类型如果没有指定，默认为 “button”。

Type of the previous button. Defaults to "button" if not specified.

`CdkStepHeader`

选择器： [cdkStepHeader]

方法

focus
为步骤头设置焦点。 Focuses the step header.

focus

为步骤头设置焦点。

Focuses the step header.

类

`StepperSelectionEvent`

在选定值变化时发出的变更事件。

Change event emitted on selection changes.

属性

名称	描述
`previouslySelectedIndex: number`	前一个步骤的索引。 Index of the step previously selected.
`previouslySelectedStep: CdkStep`	以前选定的步骤实例。 The step instance previously selected.
`selectedIndex: number`	当前步骤的索引。 Index of the step now selected.
`selectedStep: CdkStep`	此步骤的实例已被选定。 The step instance now selected.

接口

`StepperOptions`

步进器的可配置选项。

Configurable options for stepper.

属性

名称描述

名称	描述
`displayDefaultIndicatorType: boolean`	步进器是否应该显示默认的指示器类型。假设默认行为是 true。 Whether the stepper should display the default indicator type or not. Default behavior is assumed to be true.
`showError: boolean`	步进器是否应该显示错误状态。假定默认行为是 false。 Whether the stepper should display an error state or not. Default behavior is assumed to be false.

displayDefaultIndicatorType: boolean

步进器是否应该显示默认的指示器类型。假设默认行为是 true。

Whether the stepper should display the default indicator type or not. Default behavior is assumed to be true.

showError: boolean

步进器是否应该显示错误状态。假定默认行为是 false。

Whether the stepper should display an error state or not. Default behavior is assumed to be false.

类型别名

`StepContentPositionState`

步进器中每个步骤内容的位置状态，用于在选定的步骤改变时将内容转移到正确的位置。

Position state of the content of each step in stepper that is used for transitioning the content into correct position upon step selection change.

type StepContentPositionState = 'previous' | 'current' | 'next';

`StepperOrientation`

步进器可能的方向。

Possible orientation of a stepper.

type StepperOrientation = 'horizontal' | 'vertical';

`StepState`

每一步的状态。

The state of each step.

type StepState = 'number' | 'edit' | 'done' | 'error' | string;

常量

`STEP_STATE`

枚举表示步骤的不同状态。

Enum to represent the different states of the steps.

const STEP_STATE: { NUMBER: string; EDIT: string; DONE: string; ERROR: string; };

`STEPPER_GLOBAL_OPTIONS`

这个注入令牌可以用来指定全局的步进器选项。

InjectionToken that can be used to specify the global stepper options.

const STEPPER_GLOBAL_OPTIONS: InjectionToken<StepperOptions>;

步进器 API 目录

Angular CDK stepper API 参考文档

link 指令

link CdkStep

属性

方法

link CdkStepper

属性

方法

link CdkStepLabel

link CdkStepperNext

属性

link CdkStepperPrevious

属性

link CdkStepHeader

方法

link 类

link StepperSelectionEvent

属性

link 接口

link StepperOptions

属性

link 类型别名

link StepContentPositionState

link StepperOrientation

link StepState

link 常量

link STEP_STATE

link STEPPER_GLOBAL_OPTIONS

指令

`CdkStep`

`CdkStepper`

`CdkStepLabel`

`CdkStepperNext`

`CdkStepperPrevious`

`CdkStepHeader`

类

`StepperSelectionEvent`

接口

`StepperOptions`

类型别名

`StepContentPositionState`

`StepperOrientation`

`StepState`

常量

`STEP_STATE`

`STEPPER_GLOBAL_OPTIONS`