Vue Stepper - StepperItem

A stepper item (step).

Type:

Object

disabled

Specifies whether the UI component item responds to user interaction.

Type:

Boolean

Default Value: false

hint

Specifies the hint text that appears when an item (step) is hovered over or long-pressed.

Type:

String

NOTE
An item's hint has priority over the component's hint.

icon

Specifies the indicator icon.

Type:

String

This property accepts one of the following:

NOTE
Do not use the icon property if you use text, and vice versa.

isValid

Specifies a visual indicator for validation.

Type:

Boolean

  • If false, a step displays a "validation failed" state.
  • If true, a step displays a "validation succeeded" state.
  • If undefined, a step shows no validation information.

View Demo

label

Specifies the caption displayed next to the step.

Type:

String

optional

Marks the step as optional.

Type:

Boolean

  • If false or undefined, a step shows no "optional" information.
  • If true, a step displays an "(Optional)" caption.

template

Specifies a template that should be used to render this item only.

Type:

template

Template Data:

CollectionWidgetItem

The item object to be rendered.

jQuery

This property supports the following values:

  • A template container as a jQuery object or DOM Node
  • A function that returns a template container (as a jQuery object or DOM node)

For more information about templates, refer to the following help topic: DevExtreme Vue - Custom Templates.

index.js
$(function() {
    $("#stepperContainer").dxStepper({
        // ...
        items: [
            {
                // ...
                template: '<div>Custom Item</div>'
            }
        ]
    });
});
Angular

For more information about templates, refer to the following help topic: DevExtreme Vue - Custom Templates.

app.component.html
app.component.ts
app.module.ts
<dx-stepper ... >
    <dxi-stepper-item ... >
        <div *dxTemplate>
            <div>Custom Item</div>
        </div>
    </dxi-stepper-item>
</dx-stepper>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // ...
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxStepperModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxStepperModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue

For more information about templates, refer to the following help topic: DevExtreme Vue - Custom Templates.

App.vue
<template>
    <DxStepper ... >
        <DxItem ... >
            <div>Custom Item</div>
        </DxItem>
    </DxStepper>
</template>

<script>

import DxStepper, {
    DxItem
} from 'devextreme-vue/stepper';

export default {
    components: {
        DxStepper,
        DxItem
    },
    // ...
}
</script>
React
NOTE
Use the React-specific render and component properties instead of template.

For more information about templates, refer to the following help topic: DevExtreme Vue - Custom Templates.

App.js
import React from 'react';

import Stepper, {
    Item
} from 'devextreme-react/stepper';

const renderCustomItem = () => {
    return <div>Custom Item</div>;
}

const App() = () => {
    return (
        <Stepper ... >
            <Item ...
                render={renderCustomItem}
            >
            </Item>
        </Stepper>
    );
}
export default App;
See Also

text

Specifies text displayed for the UI component item.

Type:

String

If you use both this property and a template, the template overrides the text.