Confirm?

Are you sure you want to proceed?
J
Jan Dev_Tester

Scrollable Toggle Group Cards

Clone & Customize via AI

The MudBlazor Card Gallery displays MudCard items inside a MudToggleGroup with horizontal scrolling, arrow navigation and an adjustable height slider. Selection binds to an int value and JS interop checks overflow.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Horizontal toggle group of selectable cards with fixed card width and natural height. - Arrow buttons to scroll the card row left/right. - Adjustable group height via a MudSlider. - Selected-card visual state with border and shadow. - JS interop checks for overflow and performs smooth scrolling. ## Key components - MudPaper, MudText - MudToggleGroup<T>, MudToggleItem - MudCard, MudCardContent, MudCardActions - MudSlider, MudIconButton, MudSpacer - ElementReference, IJSRuntime interop ## How it works - Cards are generated on OnInitialized into a List<CardModel> and the selected card id is stored in an int bound to MudToggleGroup via @bind-Value. - Scrolling is triggered from MudIconButton click handlers which call ScrollByAsync; this uses JS.InvokeVoidAsync with a scrollBy call to animate DOM scrolling. - OnAfterRenderAsync calls CheckOverflowAsync when height changes or on first render; CheckOverflowAsync uses a small JS expression (eval) to detect scrollWidth > clientWidth and sets a local _hasOverflow flag. - ElementReference and a fixed element id allow direct DOM access from the JS snippets. ## Styling - Uses MudBlazor components for layout and typography. - Custom CSS targets classes such as .toggle-scroll-wrapper, .toggle-group, .card-toggle-item, .card-content.selected and .arrow-button to implement the horizontal scroll, fixed card width (200px), bottom-aligned card content and selected highlight. - Arrows are absolutely positioned and the scroll wrapper includes side padding to avoid overlapping content. - Layout is responsive by relying on overflow-x:auto; however virtualization is not implemented so large item counts may impact performance. ## Reuse steps 1. Add the MudBlazor NuGet package and register services (builder.Services.AddMudServices()) in Program.cs. 2. Import MudBlazor namespace in the component and include MudBlazor CSS in host pages. 3. Copy CardModel and the Razor/CSS files; ensure app.css is loaded by the app. 4. Replace inline JS eval calls with a named JS function in wwwroot and call via IJSRuntime.InvokeVoidAsync("myNamespace.scrollBy", elementId, amount) to satisfy CSP and improve maintainability. 5. Wire real data by replacing the sample Cards generation with a service call and handle persistence for selection if needed. ## Limitations & next steps - The component uses JS eval expressions; move DOM logic to a static JS file to avoid CSP issues and improve testability. - Accessibility: keyboard focus management and ARIA roles for the toggle items should be added for screen reader support. - Performance: add virtualization for large lists or lazy-loading of cards. - Integration: authentication, persistent data services, and centralized state management are not included and must be wired by the host app. - Consider replacing smooth scrolling delay heuristics with scroll event hooks or ResizeObserver to detect end state more reliably.