Skip to content

Commit ba527c9

Browse files
Stepper: add Overview demo description (DevExpress#29701)
1 parent c2cda7d commit ba527c9

File tree

1 file changed

+38
-3
lines changed

1 file changed

+38
-3
lines changed
Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,40 @@
1-
Our upcoming major release (v25.1) will introduce a Stepper component designed to describe/detail progress as users navigate through a defined sequence.
1+
The DevExtreme Stepper is a UI component that indicates progress in a multi-step process and enables users to navigate between individual steps. You can add Stepper components to lengthy data entry forms such as guest checkouts or credit card applications.
2+
3+
To get started with DevExtreme Stepper, refer to the following step-by-step tutorial: [Getting Started with Stepper](/Documentation/Guide/UI_Components/Stepper/Getting_Started_with_Stepper/).
24
<!--split-->
3-
Stepper will work especially well for multi-step processes like filling forms, onboarding flows, or wizards.
45

5-
You will be able to customize the appearance of individual steps and modify component settings to address specific usage scenarios.
6+
## Component Configuration
7+
8+
The following settings are available:
9+
10+
- [orientation](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/#orientation) (default: *'horizontal'*)
11+
The Stepper's orientation.
12+
- [linear](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/#linear) (default: `true`)
13+
Specifies whether users must navigate the Stepper sequentially or can skip steps.
14+
- [selectOnFocus](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/#selectOnFocus) (default: `true`)
15+
Specifies whether steps focused with keyboard arrows are selected automatically.
16+
- [rtlEnabled](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/#rtlEnabled) (default: `false`)
17+
Switches the Stepper to Right-to-Left mode.
18+
19+
## Step Settings
20+
21+
To add steps, populate the [items](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/) collection or specify a [dataSource](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/#dataSource).
22+
23+
Use the following properties to customize steps:
24+
25+
- [text](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#text)
26+
Indicator text. If you do not define this option, Stepper numbers steps sequentially.
27+
- [icon](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#icon)
28+
Indicator icon. Stepper prioritizes icons over the **text** property.
29+
- [label](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#label)
30+
Step caption displayed next to the indicator.
31+
- [optional](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#optional)
32+
Adds an *(Optional)* label to the step.
33+
- [isValid](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#isValid)
34+
Allows you to indicate that user input on the step results in validation errors.
35+
- [disabled](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#disabled)
36+
Deactivates the step.
37+
- [hint](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#hint)
38+
Tooltip text for the step.
39+
- [template](/Documentation/ApiReference/UI_Components/dxStepper/Configuration/items/#template)
40+
Allows you to customize the step. This property overrides all other step properties.

0 commit comments

Comments
 (0)