Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/germandf/blazorwizarddemo
Responsive and dynamic wizard component built with Blazor.
https://github.com/germandf/blazorwizarddemo
blazor wizard
Last synced: 3 months ago
JSON representation
Responsive and dynamic wizard component built with Blazor.
- Host: GitHub
- URL: https://github.com/germandf/blazorwizarddemo
- Owner: Germandf
- Created: 2024-07-05T19:45:23.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-29T13:09:58.000Z (5 months ago)
- Last Synced: 2024-10-14T05:22:40.597Z (3 months ago)
- Topics: blazor, wizard
- Language: HTML
- Homepage:
- Size: 4.79 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Blazor Wizard Demo
Based on: https://codepen.io/kaueburiti/pen/YNZGZO
## Overview
This repository contains a responsive and dynamic wizard component built with Blazor. The wizard component allows for an unlimited number of steps that can be added or removed dynamically. It supports callback methods for conditional navigation, providing a highly customizable and user-friendly interface.
Features
- Responsive Design: The wizard adapts to different screen sizes and provides a smooth user experience.
- Unlimited Steps: You can add as many steps as needed. The steps are scrollable, ensuring no issues with space.
- Dynamic Steps: Steps can be added or removed dynamically based on user actions.
- Callbacks: Use callback methods to conditionally move to the next step.
- Customizable: Specify minimum height, maximum width, title, and subtitle for the wizard. Configure each step with icons, enable/disable previous navigation, position, dynamic step addition, and OnNext callbacks.
- Default Values: If specific attributes are not provided, the wizard and its steps will use sensible default values.
Here's an example of how to use the wizard component in your Blazor application:
```html
Create a Github account.
With GitHub, you can showcase your projects and discover new things every day!
Add More Steps to Your Journey.
You can include additional steps to tailor the process to your needs.
@for (var i = 0; i < _additionalSteps; i++)
{
Additional Step
Just to make it more interesting.
}
Learn more about pure Javascript.
We have cool frameworks, but none is better than VanillaJS.
Stay in touch with the community.
Community is everything, and here we do some crazy stuff.
Explore Open Source Projects.
Contributing to open source projects can significantly enhance your skills and visibility in the community.
Participate in Coding Challenges.
Take part in online coding challenges to sharpen your skills and compete with others.
Provide Your Details
Please fill out the form below with your information:
Confirm Your Details
Here is the information you provided:
-
GitHub Username: @userInfoForm.Info.GitHubUsername -
Experience Level: @userInfoForm.Info.ExperienceLevel -
Interests: @userInfoForm.Info.Interests
Congratulations!
You are now in a world of pain and suffering.
```
## Wizard Component
The `Wizard` component encapsulates the steps and provides navigation controls.
Parameters
- `Title` (required): The title of the wizard.
- `SubTitle` (required): The subtitle of the wizard.
- `MinHeight` (optional): Minimum height for the wizard content.
- `MaxWidth` (optional): Maximum width for the wizard content.
- `Steps` (required): Render fragment for the wizard steps.
- `Completed` (required): Render fragment for the completion content.
## WizardStep Component
The `WizardStep` component represents an individual step within the wizard.
Parameters
- `IconClass` (optional, default: "fa fa-arrow-right"): The icon class for the step.
- `EnablePrevious` (optional): Indicates whether the previous button should be enabled.
- `OnNext` (optional): Callback method to be executed before moving to the next step.
- `Position` (optional): The position of the step within the wizard.
- `AddsDynamicSteps` (optional): Indicates whether this step can add dynamic steps.
- `ChildContent` (required): The content of the step.