diff --git a/README.md b/README.md index 579349f..000aee8 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,75 @@ -![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/1082578250/25.1.4%2B) [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1311551) [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) -# Product/Platform - Task +# DevExpress Blazor - Implement a Stepper Component -This is the repository template for creating new examples. Describe the solved task here. +A **Stepper** is a UI component that guides users through a sequential process by breaking complex tasks into smaller, manageable steps. It is commonly used for e-commerce checkouts, account registrations, and user onboarding. -Put a screenshot that illustrates the result here. +This example demonstrates how to build a custom Stepper component for Blazor applications using [DevExpress DxGridLayout](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridLayout). The component supports both horizontal and vertical orientation, and can fit your specific design requirements. -Then, add implementation details (steps, code snippets, and other technical information in a free form), or add a link to an existing document with implementation details. +![Custom Stepper Component](stepper-component.gif) + +## Implementation Details + +The implementation consists of two components: `DxStepper` and `DxStep`. + +```razor + + + + + + + +``` + +### DxStepper + +The `DxStepper` [component](CS/blazor_stepper/Components/Stepper/DxStepper.razor) uses `DxGridLayout` to manage the order and layout of steps: + +- **Nodes (steps)** are placed in even columns/rows. +- **Connectors** (lines between steps) are placed in odd columns/rows. +- **Labels** are positioned below (horizontal orientation) or next to (vertical orientation) nodes. + +`DxStepper` implements the following properties: + +- `Steps` - Specifies the collection of steps. +- `SelectedIndex` - Returns the zero-based index of the selected step. +- `SelectedIndexChanged` event - Fires when the step is selected. +- `Orientation` - Specifies whether steps are arranged vertically or horizontally. + +### DxStep Component + +The `DxStep` [component](CS/blazor_stepper/Components/Stepper/DxStep.razor) implements an individual step in the stepper. `DxStep` components should be declared within the `Steps` collection. + +Each step can contain: + +- Custom content (the `ChildContent` property) +- An icon (the `IconCssClass` property) +- Display text (the `Text` property) +- A label (the `Label` property) ## Files to Review -- link.cs (VB: link.vb) -- link.js -- ... +- [DxStep.razor](CS/blazor_stepper/Components/Stepper/DxStep.razor) +- [DxStepper.razor](CS/blazor_stepper/Components/Stepper/DxStepper.razor) +- [DxStepper.razor.cs](CS/blazor_stepper/Components/Stepper/DxStepper.razor.cs) +- [DxStepper.razor.css](CS/blazor_stepper/Components/Stepper/DxStepper.razor.css) +- [Index.razor](CS/blazor_stepper/Components/Pages/Index.razor) +- [Recipe.razor](CS/blazor_stepper/Components/Pages/Recipe.razor) ## Documentation -- link -- link -- ... +- [DxGridLayout](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridLayout) +- [DxGridLayoutItem](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridLayoutItem) +- [DxGridLayoutItem.Template](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridLayoutItem.Template) ## More Examples -- link -- link -- ... +- [Form Layout for Blazor - Tabbed Wizard](https://github.com/DevExpress-Examples/blazor-formlayout-implement-tabbed-wizard) ## Does this example address your development requirements/objectives? diff --git a/stepper-component.gif b/stepper-component.gif new file mode 100644 index 0000000..db1a489 Binary files /dev/null and b/stepper-component.gif differ