JavaScript/jQuery 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

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a jQuery object of the template's container.
  • Assign a DOM Node of the template's container.
  • Assign a function that returns the jQuery object or a DOM Node of the template's container.

The following example adds a custom item to the component.

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

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a DOM Node of the template's container.

The following example adds a custom item to the component. Note that Angular uses custom templates instead of the template property.

app.component.html
app.component.ts
app.module.ts
<dx-stepper ... >
    <dxi-item ... >
        <div *dxTemplate>
            <div>Custom Item</div>
        </div>
    </dxi-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

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a DOM Node of the template's container.

The following example adds a custom item to the component. Note that Vue uses custom templates instead of the template property.

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

The following types of the specified value are available.

  • Assign a string containing the name of the required template.
  • Assign a DOM Node of the template's container.

The following example adds a custom item to the component. In React, specify the render or component properties.

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.