@itwin/itwinui-react/esm/core/Stepper/Stepper.d.ts

A react component library for iTwinUI

import * as React from 'react';
import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
export type StepperLocalization = {
    stepsCountLabel: (currentStep: number, totalSteps: number) => string;
};
export type StepProperties = {
    /**
     * The title/label of the step.
     */
    name: string;
    /**
     * A tooltip giving detailed description to this step.
     */
    description?: string;
    /**
     * Custom content displayed in the step's circle.
     */
    stepContent?: () => React.ReactNode;
} & React.ComponentProps<'li'>;
export type StepperProps = {
    /**
     * Current step index, 0 - based.
     */
    currentStep?: number;
    /**
     * An array of step objects.
     */
    steps: StepProperties[];
    /**
     *  The type of Stepper to display.
     *  @default 'default'
     */
    type?: 'default' | 'long';
    /**
     *  Option to provide localized strings.
     */
    localization?: StepperLocalization;
    /**
     *  Click handler on completed step.
     */
    onStepClick?: (clickedIndex: number) => void;
    /**
     * Callback that can provide additional props for `<li>` representing a step.
     */
    stepProps?: (index: number) => React.ComponentProps<'li'>;
    /**
     * Allows props to be passed for track content.
     */
    trackContentProps?: (index: number) => React.ComponentProps<'div'>;
    /**
     * Allows props to be passed for circle.
     */
    circleProps?: (index: number) => React.ComponentProps<'span'>;
    /**
     * Allows props to be passed for name.
     */
    nameProps?: (index: number) => React.ComponentProps<'span'>;
    /**
     * Allows props to be passed for label.
     */
    labelProps?: React.ComponentProps<'div'>;
    /**
     * Allows props to be passed for label count.
     */
    labelCountProps?: React.ComponentProps<'span'>;
};
export declare const Stepper: PolymorphicForwardRefComponent<"div", StepperProps>;