{"id":15092967,"url":"https://github.com/germandf/blazorwizarddemo","last_synced_at":"2026-03-09T17:38:51.286Z","repository":{"id":246958735,"uuid":"824727303","full_name":"Germandf/BlazorWizardDemo","owner":"Germandf","description":"Responsive and dynamic wizard component built with Blazor.","archived":false,"fork":false,"pushed_at":"2024-08-29T13:09:58.000Z","size":5023,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-14T05:22:40.597Z","etag":null,"topics":["blazor","wizard"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Germandf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-05T19:45:23.000Z","updated_at":"2024-09-15T16:34:17.000Z","dependencies_parsed_at":"2024-08-29T14:51:15.688Z","dependency_job_id":null,"html_url":"https://github.com/Germandf/BlazorWizardDemo","commit_stats":{"total_commits":41,"total_committers":2,"mean_commits":20.5,"dds":"0.024390243902439046","last_synced_commit":"c15f575029ab50b8cbb14565148b386e3581af7a"},"previous_names":["germandf/blazorwizarddemo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Germandf%2FBlazorWizardDemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Germandf%2FBlazorWizardDemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Germandf%2FBlazorWizardDemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Germandf%2FBlazorWizardDemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Germandf","download_url":"https://codeload.github.com/Germandf/BlazorWizardDemo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219848590,"owners_count":16556334,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","wizard"],"created_at":"2024-09-25T11:02:10.961Z","updated_at":"2026-03-09T17:38:51.233Z","avatar_url":"https://github.com/Germandf.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blazor Wizard Demo\n\nBased on: https://codepen.io/kaueburiti/pen/YNZGZO\n\n![Blazor Wizard Demo](docs/wizard.gif)\n\n## Overview\nThis 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.\n\nFeatures\n- Responsive Design: The wizard adapts to different screen sizes and provides a smooth user experience.\n- Unlimited Steps: You can add as many steps as needed. The steps are scrollable, ensuring no issues with space.\n- Dynamic Steps: Steps can be added or removed dynamically based on user actions.\n- Callbacks: Use callback methods to conditionally move to the next step.\n- 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.\n- Default Values: If specific attributes are not provided, the wizard and its steps will use sensible default values.\n\nHere's an example of how to use the wizard component in your Blazor application:\n\n```html\n\u003cWizard Title=\"@_title\"\n        SubTitle=\"@_subTitle\"\n        MinHeight=\"@(_fixedMinHeight ? \"390px\" : null)\"\n        MaxWidth=\"@(_fixedMaxWidth ? \"620px\" : null)\"\u003e\n    \u003cSteps\u003e\n        \u003cWizardStep\u003e\n            \u003ch2\u003eCreate a Github account.\u003c/h2\u003e\n            \u003cp\u003eWith GitHub, you can showcase your projects and discover new things every day!\u003c/p\u003e\n        \u003c/WizardStep\u003e\n        \u003cWizardStep EnablePrevious IconClass=\"fa fa-question\" OnNext=\"AddAdditionalSteps\" AddsDynamicSteps\u003e\n            \u003ch2\u003eAdd More Steps to Your Journey.\u003c/h2\u003e\n            \u003cp\u003eYou can include additional steps to tailor the process to your needs.\u003c/p\u003e\n            \u003cAdditionalStepsForm @ref=\"additionalStepsForm\" /\u003e\n        \u003c/WizardStep\u003e\n        @for (var i = 0; i \u003c _additionalSteps; i++)\n        {\n            \u003cWizardStep EnablePrevious IconClass=\"fa fa-exclamation\" Position=\"i + 2\"\u003e\n                \u003ch2\u003eAdditional Step\u003c/h2\u003e\n                \u003cp\u003eJust to make it more interesting.\u003c/p\u003e\n                \u003cLoremIpsum /\u003e\n            \u003c/WizardStep\u003e\n        }\n        \u003cWizardStep EnablePrevious IconClass=\"fa fa-code\"\u003e\n            \u003ch2\u003eLearn more about pure Javascript.\u003c/h2\u003e\n            \u003cp\u003eWe have cool frameworks, but none is better than VanillaJS.\u003c/p\u003e\n        \u003c/WizardStep\u003e\n        \u003cWizardStep EnablePrevious IconClass=\"fa fa-comments\"\u003e\n            \u003ch2\u003eStay in touch with the community.\u003c/h2\u003e\n            \u003cp\u003eCommunity is everything, and here we do some crazy stuff.\u003c/p\u003e\n        \u003c/WizardStep\u003e\n        \u003cWizardStep EnablePrevious IconClass=\"fa fa-code-branch\"\u003e\n            \u003ch2\u003eExplore Open Source Projects.\u003c/h2\u003e\n            \u003cp\u003eContributing to open source projects can significantly enhance your skills and visibility in the community.\u003c/p\u003e\n            \u003cLoremIpsum /\u003e\n            \u003cLoremIpsum /\u003e\n            \u003cLoremIpsum /\u003e\n            \u003cLoremIpsum /\u003e\n            \u003cLoremIpsum /\u003e\n            \u003cLoremIpsum /\u003e\n        \u003c/WizardStep\u003e\n        \u003cWizardStep EnablePrevious IconClass=\"fa fa-trophy\"\u003e\n            \u003ch2\u003eParticipate in Coding Challenges.\u003c/h2\u003e\n            \u003cp\u003eTake part in online coding challenges to sharpen your skills and compete with others.\u003c/p\u003e\n            \u003cLoremIpsum /\u003e\n            \u003cLoremIpsum /\u003e\n            \u003cLoremIpsum /\u003e\n            \u003cLoremIpsum /\u003e\n            \u003cLoremIpsum /\u003e\n            \u003cLoremIpsum /\u003e\n        \u003c/WizardStep\u003e\n        \u003cWizardStep EnablePrevious IconClass=\"fa fa-id-card\" OnNext=\"userInfoForm.Validate\"\u003e\n            \u003ch2\u003eProvide Your Details\u003c/h2\u003e\n            \u003cp\u003ePlease fill out the form below with your information:\u003c/p\u003e\n            \u003cUserInfoForm @ref=\"userInfoForm\" /\u003e\n        \u003c/WizardStep\u003e\n        \u003cWizardStep EnablePrevious IconClass=\"fa fa-paperclip\" OnNext=\"Submit\"\u003e\n            \u003ch2\u003eConfirm Your Details\u003c/h2\u003e\n            \u003cp\u003eHere is the information you provided:\u003c/p\u003e\n            \u003cul\u003e\n                \u003cli\u003e\u003cstrong\u003eGitHub Username:\u003c/strong\u003e @userInfoForm.Info.GitHubUsername\u003c/li\u003e\n                \u003cli\u003e\u003cstrong\u003eExperience Level:\u003c/strong\u003e @userInfoForm.Info.ExperienceLevel\u003c/li\u003e\n                \u003cli\u003e\u003cstrong\u003eInterests:\u003c/strong\u003e @userInfoForm.Info.Interests\u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/WizardStep\u003e\n    \u003c/Steps\u003e\n    \u003cCompleted\u003e\n        \u003ch2\u003eCongratulations!\u003c/h2\u003e\n        \u003cp\u003eYou are now in a world of pain and suffering.\u003c/p\u003e\n    \u003c/Completed\u003e\n\u003c/Wizard\u003e\n```\n\n## Wizard Component\nThe `Wizard` component encapsulates the steps and provides navigation controls.\n\nParameters\n- `Title` (required): The title of the wizard.\n- `SubTitle` (required): The subtitle of the wizard.\n- `MinHeight` (optional): Minimum height for the wizard content.\n- `MaxWidth` (optional): Maximum width for the wizard content.\n- `Steps` (required): Render fragment for the wizard steps.\n- `Completed` (required): Render fragment for the completion content.\n\n## WizardStep Component\nThe `WizardStep` component represents an individual step within the wizard.\n\nParameters\n- `IconClass` (optional, default: \"fa fa-arrow-right\"): The icon class for the step.\n- `EnablePrevious` (optional): Indicates whether the previous button should be enabled.\n- `OnNext` (optional): Callback method to be executed before moving to the next step.\n- `Position` (optional): The position of the step within the wizard.\n- `AddsDynamicSteps` (optional): Indicates whether this step can add dynamic steps.\n- `ChildContent` (required): The content of the step.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgermandf%2Fblazorwizarddemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgermandf%2Fblazorwizarddemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgermandf%2Fblazorwizarddemo/lists"}