@talenra/components documentation
  1. Components
  2. ProgressStepComponent

File

progress-stepper/src/progress-step/progress-step.component.ts

Description

Progress Step represents a single step within a Progress Stepper Body context. It acts as a wrapper for the step's content and provides a set of properties to control its state and role (e.g. isDisabled, isRequired or isValid).

Example :
<talenra-progress-stepper-body>
  <talenra-progress-step>...</talenra-progress-step>
  <talenra-progress-step>...</talenra-progress-step>
  <talenra-progress-step>...</talenra-progress-step>
</talenra-progress-stepper-body>

Import

Example :
import { ProgressStepComponent } from '@talenra/components/progress-stepper';

See ProgressStepperBodyComponent See ProgressStepState

Metadata

changeDetection ChangeDetectionStrategy.OnPush
host {
}
selector talenra-progress-step
templateUrl ./progress-step.component.html
styleUrl ./progress-step.component.scss

Index

Inputs
Outputs

Inputs

isDisabled
Type : boolean
Default value : false

Determines whether the step is disabled. Defaults to false. Disabled steps cannot be selected.

Example :
<talenra-progress-step [isDisabled]="myCondition">...</talenra-progress-step>
isRequired
Type : boolean
Default value : true

Determines whether the step is required. Defaults to true. Required steps cannot be skipped.

Example :
<talenra-progress-step [isRequired]="myCondition">...</talenra-progress-step>
isValid
Type : boolean
Default value : true

Determines whether the step is considered valid. Defaults to true. If a step is required and invalid, it cannot be skipped.

Example :
<talenra-progress-step [isValid]="myCondition">...</talenra-progress-step>
title
Type : string
Default value : ''

Title displayed in step header

Example :
<talenra-progress-step title="My step's title">...</talenra-progress-step>

Outputs

isDisabled
Type : boolean

Determines whether the step is disabled. Defaults to false. Disabled steps cannot be selected.

Example :
<talenra-progress-step [isDisabled]="myCondition">...</talenra-progress-step>
isRequired
Type : boolean

Determines whether the step is required. Defaults to true. Required steps cannot be skipped.

Example :
<talenra-progress-step [isRequired]="myCondition">...</talenra-progress-step>
isValid
Type : boolean

Determines whether the step is considered valid. Defaults to true. If a step is required and invalid, it cannot be skipped.

Example :
<talenra-progress-step [isValid]="myCondition">...</talenra-progress-step>
title
Type : string

Title displayed in step header

Example :
<talenra-progress-step title="My step's title">...</talenra-progress-step>

results matching ""

    No results matching ""