@progress/kendo-vue-layout
Version:
96 lines (95 loc) • 3.23 kB
TypeScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { StepProps } from './StepProps';
import { StepperChangeEvent } from './StepperChangeEvent';
import { StepperFocusEvent } from './StepperFocusEvent';
/**
* Represents the props of the [Kendo UI for Vue Stepper component]({% slug overview_stepper %}).
*/
export interface StepperProps {
/**
* Sets the duration of the Stepper animation. Defaults to `400ms`.
*/
animationDuration?: boolean | number;
/**
* Specifies a list of CSS classes that will be added to the Stepper.
*/
className?: string;
/**
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
*/
dir?: string;
/**
* Disables the whole Stepper.
*/
disabled?: boolean;
/**
* Specifies a custom icon that will be rendered inside the step for invalid steps.
*/
errorIcon?: string;
/**
* Overrides the default component responsible for visualizing a single item ([see example]({% slug custom_rendering_stepper %})).
*
* The default Component is: [Step]({% slug api_layout_step %}).
*/
item?: any;
/**
* The collection of steps that will be rendered in the Stepper ([see example]({% slug overview_stepper %})).
*/
items: Array<StepProps>;
/**
* Specifies the linear flow of the Stepper.
* ([see example]({% slug linear_mode_stepper %})).
*/
linear?: boolean;
/**
* Specifies the display mode of the Stepper
* ([see example]({% slug display_modes_stepper %})).
* * The possible values are:
* * (Default) `steps`. Render step indicator and optional label.
* * `labels`. Render labels only.
*/
mode?: 'steps' | 'labels' | string;
/**
* Specifies the orientation of the Stepper
* ([see example]({% slug orientation_stepper %})).
*
* The possible values are:
* * (Default) `horizontal`
* * `vertical`
*/
orientation?: 'horizontal' | 'vertical' | string;
/**
* Specifies a custom icon that will be rendered inside the step for valid steps.
*/
successIcon?: string;
/**
* Specifies the index of the selected Step.
*/
value: number;
/**
* The maximum value of the ProgressBar inside the Stepper. If not defined it is equal to the number of steps defined.
*/
progressTotal?: number;
/**
* Specifies the current progress of the ProgressBar inside the Stepper. If not defined it is equal to the current value.
*/
progress?: number;
/**
* @hidden
*/
modelValue?: number;
/**
* The event handler that will be fired when the value is changed.
*/
onChange?: (event: StepperChangeEvent) => void;
/**
* The event handler that will be fired when a Step is focused.
*/
onFocus?: (event: StepperFocusEvent) => void;
}