New to Kendo UI for VueStart a free 30-day trial

StepperProps

Interface

Represents the props of the Kendo UI for Vue Stepper component.

Definition

Package:@progress/kendo-vue-layout

Properties

animationDuration?

number | boolean

Sets the duration of the Stepper animation. Defaults to 400ms.

Specifies a list of CSS classes that will be added to the Stepper.

dir?

string

Represents the dir HTML attribute. This is used to switch from LTR to RTL.

disabled?

boolean

Disables the whole Stepper.

Specifies a custom icon that will be rendered inside the step for invalid steps.

Overrides the default component responsible for visualizing a single item (see example).

The default Component is: Step.

The collection of steps that will be rendered in the Stepper (see example).

linear?

boolean

Specifies the linear flow of the Stepper. (see example).

mode?

string

Specifies the display mode of the Stepper (see example).

  • The possible values are:
  • (Default) steps. Render step indicator and optional label.
  • labels. Render labels only.

The event handler that will be fired when the value is changed.

Parameters:eventStepperChangeEvent

onFocus?

(event: StepperFocusEvent) => void

The event handler that will be fired when a Step is focused.

Parameters:eventStepperFocusEvent

Specifies the orientation of the Stepper (see example).

The possible values are:

  • (Default) horizontal
  • vertical

progress?

number

Specifies the current progress of the ProgressBar inside the Stepper. If not defined it is equal to the current value.

The maximum value of the ProgressBar inside the Stepper. If not defined it is equal to the number of steps defined.

Specifies a custom icon that will be rendered inside the step for valid steps.

value

number

Specifies the index of the selected Step.