StepperComponent
represents the react Stepper Component.
<StepperComponent steps={stepItems} />
number
Defines the current step index of the Stepper.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { StepperComponent, StepModel } from '@syncfusion/ej2-react-navigations';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase<{}, {}> {
render() {
return (
<div>
<StepperComponent id="stepper" steps={[{}, {}, {}, {}, {}]} activeStep={2}></StepperComponent>
</div>
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to 0
Defines the step progress animation of the Stepper.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { StepperComponent, StepModel } from '@syncfusion/ej2-react-navigations';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase<{}, {}> {
render() {
return (
<div>
<StepperComponent id="stepper" steps={[{}, {}, {}, {}, {}]} animation={{enable: true, duration: 2000, delay: 1000}}></StepperComponent>
</div>
);
}
}
render(<Default />, document.getElementById("sample"));
string
Defines the CSS class to customize the Stepper appearance.
Defaults to ”
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
string
| StepLabelPosition
Defines the label position in the Stepper. The possible values are:
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { StepperComponent, StepModel } from '@syncfusion/ej2-react-navigations';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase<{}, {}> {
public steps: StepModel[] = [
{ icon: 'sf-icon-shopping-02', label: 'Ordered' },
{ icon: 'sf-icon-van-02-wf', label: 'Dispatched' },
{ icon: 'sf-icon-supplier1', label: 'Out for delivery' },
{ icon: 'sf-icon-supplier2', label: 'Arrived' }
];
render() {
return (
<div>
<StepperComponent id="stepper" steps={this.steps} labelPosition="bottom"></StepperComponent>
</div>
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to StepLabelPosition.Bottom
boolean
Defines whether allows to complete one step in order to move to the next or not.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { StepperComponent, StepModel } from '@syncfusion/ej2-react-navigations';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase<{}, {}> {
render() {
return (
<div>
<StepperComponent id="stepper" steps={[{}, {}, {}, {}, {}]} linear={true}></StepperComponent>
</div>
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to false
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
string
| StepperOrientation
Defines the orientation type of the Stepper. The possible values are:
Defaults to StepperOrientation.Horizontal
boolean
Defines whether the read-only mode is enabled for a Stepper control, which means that the user will not be able to interact with it.
Defaults to false
boolean
Defines a value that defines whether to show tooltip or not on each step.
Defaults to false
string
| StepType
Defines whether steps are display with only indicator, only labels or combination of both. The possible values are:
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { StepperComponent, StepModel } from '@syncfusion/ej2-react-navigations';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase<{}, {}> {
public steps: StepModel[] = [
{ icon: 'sf-icon-shopping-02', label: 'Ordered' },
{ icon: 'sf-icon-van-02-wf', label: 'Dispatched' },
{ icon: 'sf-icon-supplier1', label: 'Out for delivery' },
{ icon: 'sf-icon-supplier2', label: 'Arrived' }
];
render() {
return (
<div>
<StepperComponent id="stepper" steps={this.steps} stepType="indicator"></StepperComponent>
</div>
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to StepType.Default
Defines the list of steps.
Defaults to []
string
| Function
Defines the template content for each step.
import { render } from "react-dom";
import "./index.css";
import * as React from "react";
import { StepperComponent, StepModel } from '@syncfusion/ej2-react-navigations';
import { SampleBase } from "./sample-base";
export class Default extends SampleBase<{}, {}> {
render() {
return (
<div>
<StepperComponent id="stepper" steps={[{}, {}, {}, {}, {}]} template='<span>${currentStep}</span>'></StepperComponent>
</div>
);
}
}
render(<Default />, document.getElementById("sample"));
Defaults to ”
string
| Function
Defines the template content for the tooltip.
Defaults to ”
EmitType<StepperRenderingEventArgs>
Event triggers before rendering each step.
EmitType<Event>
Event callback that is raised after rendering the stepper.
EmitType<StepperChangedEventArgs>
Event triggers after active step changed.
EmitType<StepperChangingEventArgs>
Event triggers before active step change.
EmitType<StepperClickEventArgs>
Event triggers when clicked on step.