JavaScript/jQuery Stepper - StepperItem

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.

$(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.

<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.

<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.

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;