Confirm?

Are you sure you want to proceed?
G
Gijs CaptureSoft

Banking App UI Pages

Clone & Customize via AI

MudBlazor Wizard Screen demonstrating a single-step mobile-style wizard using a reusable WizardStepScreen component and MudButton actions.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Mobile-style wizard step container inside a phone-frame - Reusable WizardStepScreen wrapper with header, body RenderFragment and footer buttons - Option cards for account selection and a transfer amount display - Primary and secondary MudButton actions (Continue / Cancel) ## Key components - MudPaper, MudText, MudButton - WizardStepScreen (component using RenderFragment) - WizardDemoPage (page at /wizard-demo) - WizardStepModel (POCO for step metadata) ## How it works - WizardStepScreen exposes Title, Subtitle, PrimaryButtonText, SecondaryButtonText and a BodyContent RenderFragment - Parent page passes a BodyContent fragment and subscribes to EventCallback OnPrimaryClicked and OnSecondaryClicked - UI events use MudButton OnClick; no @bind-* state or EditForm validation is present in the sample ## Styling - Custom scoped CSS in WizardDemoPage.razor.css drives the phone-frame, left rail, content area and responsive breakpoints - Uses MudBlazor components for layout and theme primitives (MudPaper/MudText/MudButton) - Responsive rules adjust frame size and rail/content widths at 1200px and 768px ## Reuse steps 1. Add the MudBlazor NuGet package and register services in Program.cs (e.g. builder.Services.AddMudServices()). 2. Import MudBlazor namespace in _Imports.razor or at the top of components. 3. Copy WizardStepScreen.razor, WizardDemoPage.razor, WizardStepModel.cs and the scoped CSS into the project. 4. Adjust models and wire navigation/state; implement logic for OnPrimaryClicked and OnSecondaryClicked. ## Limitations & next steps - This is a single UI page; no backend services, navigation between steps or shared state are wired. - No EditForm or data validation is included; add EditForm/DataAnnotations for input steps when needed. - Accessibility and keyboard focus handling are not implemented; add ARIA attributes and focus management for production. - Extend by adding step state, routing between steps, and integrating account data services.