Custom Rendering

The Stepper enables you to customize its steps.

To customize the appearance of the items, use the item property of the Stepper.

The following example demonstrates how to customize the look and feel of the steps.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Stepper, Step } from '@progress/kendo-react-layout';

const items = [
    { label: 'Delivery Address', icon: 'k-i-marker-pin-target' },
    { label: 'Payment Method', icon: 'k-i-dollar' },
    { label: 'Finish Order', icon: 'k-i-track-changes-accept' }
];

const CustomStep = (props) => {
    return (
        <Step {...props}>
            <span className={'custom-step'}>
                <span className={'k-step-indicator-icon k-icon k-i-circle'} />
                <span className="text-wrap">
                    <span className="custom-label">{props.label}</span>
                    <span className="custom-description">This is a description.</span>
                </span>
            </span>
        </Step>
    );
};

const App = () => {
    const [value, setValue] = React.useState(0);

    const handleChange = (e) => {
        setValue(e.value);
    };

    return (
        <React.Fragment>
            <Stepper value={value} onChange={handleChange} items={items} item={CustomStep} />
            <style>
                {`
                    .custom-step {
                        display: flex;
                        padding: 6px;
                        background: white;
                    }
                    .text-wrap {
                        display: flex;
                        flex-direction: column;
                        color: #3f4d5c;
                    }
                    .k-icon {
                       color: #3f4d5c;
                    }
                    .custom-label {
                        background: white;
                        padding-left: 5px;
                        text-align: left;
                    }
                    .custom-description {
                        font-style: italic;
                    }
                `}
            </style>
        </React.Fragment>
    );
};

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);