Find Ngx Joyride Examples and Templates
Use this online ngx-joyride playground to view and fork ngx-joyride example apps and templates on CodeSandbox. Click any example below to run it instantly or find templates that can be used as a pre-built solution!
Angular Stepper (forked)The DevExtreme Stepper allows you to indicate progress within a multi-step process and allows users to navigate between individual steps. Use our Stepper UI component to implement multi-page navigation in lengthy forms such as store/cart checkout.
To get started with DevExtreme Stepper, refer to the following step-by-step tutorial: Getting Started with Stepper.
Component Configuration
The following settings are available to you:
orientation (default: horizontal)
Stepper orientation (horizontal or vertical).
linear (default: true)
Specifies whether users must navigate the Stepper sequentially or can skip steps.
selectOnFocus (default: true)
Specifies whether steps focused with keyboard navigation are selected automatically.
rtlEnabled (default: false)
Switches the Stepper to Right-to-Left mode.
Step Settings
To add steps, populate the items collection or specify a dataSource.
Use the following properties to customize steps:
text
Indicator text. If you do not define this option, Stepper numbers steps sequentially.
icon
Indicator icon. Stepper prioritizes icons over the text property.
label
Step caption displayed next to the indicator.
optional
Adds an (Optional) label to the step.
isValid
Allows you to indicate step-related validation errors.
disabled
Deactivates the step.
hint
Tooltip text for the step.
template
Allows you to customize step-related appearance. This property overrides all other step settings.
