Confirm?

Are you sure you want to proceed?
?

Dynamic Content Selector with Navigation

Clone & Customize via AI

A Blazor Content Stepper component that renders numbered steps in a Bootstrap list-group and a central content panel. Includes previous/next navigation and @onclick selection handlers.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Numbered step navigation rendered as a Bootstrap list-group. - Central content display area showing Title and Description per step. - Previous/Next navigation buttons with disabled states. - Empty-state alert when no items are provided. - Component-scoped CSS for panel styling and responsive layout. ## Key components - Parameter: List<ContentStepModel> Items - Razor UI: buttons, list-group items, alert, h4/p for content - Events: @onclick handlers (SelectItem, GoToPrevious, GoToNext) - Lifecycle: OnParametersSet override to initialize selection - Model: ContentStepModel (Id, Title, Description) - Styling: component CSS file (ContentStepper.razor.css) and Bootstrap utility classes ## How it works - The Items parameter supplies ordered ContentStepModel entries. - Selection state is held in a private _selectedItemId field; SelectedItem resolves via Items.FirstOrDefault. - OnParametersSet ensures a valid initial selection when Items changes. - Step buttons call SelectItem(item.Id) via @onclick to update the selected id. - Navigation buttons compute CanGoPrevious/CanGoNext from Items.FindIndex and update _selectedItemId accordingly. - UI updates are driven by standard Blazor re-rendering (no external state container required). ## Styling - Uses Bootstrap layout classes: row, col-*, list-group, btn, alert. - Custom component CSS sets panel padding, border, background and rounded corners and overrides .list-group-item.active. - Font Awesome icons are referenced in markup (requires including FA in the host page). - Layout is responsive via Bootstrap columns; side nav stacks on smaller viewports. ## Reuse steps 1. Add ContentStepModel.cs, ContentStepper.razor and ContentStepper.razor.css to the project (Components or Shared folder). 2. Ensure Bootstrap CSS is available (Blazor templates include it by default) and include Font Awesome if icons are required. 3. Import the component namespace where used or add @using for the folder. 4. Provide a List<ContentStepModel> to the Items parameter from a page or parent component. 5. Optionally adapt Item ordering, accessibility attributes, and wire server or state services for dynamic content. ## Limitations & next steps - This is a single self-contained component generated by Instruct UI; it does not include data services, persistence, or authentication. - No keyboard navigation management, ARIA attributes, or focus handling are implemented — add for accessibility. - Consider adding animations, step validation, or integration with a wizard-state service for multi-step forms. - Add unit or bUnit tests and server-side wiring to load steps from APIs or a store when integrating into an application.