步进器 Stepper

stepper 的 API

Angular CDK stepper API 参考文档

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

选择器: 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.

select

选择此步骤组件。

Selects this step component.

选择器: [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.

previous

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

Selects and focuses the previous step in list.

reset

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

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

选择器: [cdkStepLabel]

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

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.

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

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.

选择器: [cdkStepHeader]
方法
focus

为步骤头设置焦点。

Focuses the step header.

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

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.

步进器的可配置选项。

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.

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

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

步进器可能的方向。

Possible orientation of a stepper.

type StepperOrientation = 'horizontal' | 'vertical';

每一步的状态。

The state of each step.

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

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

Enum to represent the different states of the steps.

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

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

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

const STEPPER_GLOBAL_OPTIONS: InjectionToken<StepperOptions>;