Confirm?

Are you sure you want to proceed?
L
Lux Day

Parametres Raccourcis Rapides Design

Clone & Customize via AI

The MudBlazor Settings Page implements a navigation list and a reorderable shortcuts section using drag-and-drop. It features a custom dark theme and a floating action button with responsive layout.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Navigation list with selection using MudList and MudListItem. - Drag-and-drop reorderable shortcuts using MudDropContainer and MudDropZone. - Floating Action Button (FAB) placed with custom CSS. - Dark-themed layout using a customized MudTheme. - Informational text area describing shortcut reordering. ## Key components - MudList, MudListItem for navigation. - MudDropContainer, MudDropZone for drag-and-drop. - MudPaper and MudContainer for layout and styling. - MudToolBar, MudIcon, MudText, MudFab for toolbar and actions. ## How it works - Navigation selection binds to a string property `_selectedNavItem` via @bind-SelectedValue. - Shortcuts are represented by a local ShortcutItem class with text and icon. - Drag-and-drop reordering triggers OnItemDropped event to modify the shortcuts list. - The MudThemeProvider applies a dark theme with custom palette. - FAB positioned using fixed CSS for persistent bottom-right placement. ## Styling - Uses MudBlazor components with custom theme palette for dark background and accent colors. - Custom CSS styles the selected navigation item and positions the FAB. - Layout uses MudGrid responsive breakpoints (xs=12, sm=4/8). ## Reuse steps 1. Add MudBlazor NuGet package to the project. 2. Register MudBlazor services in Program.cs. 3. Import MudBlazor namespace in the component. 4. Include the custom theme and styles in the component. 5. Implement ShortcutItem model and drag-drop logic. 6. Connect navigation selection and shortcut data with app state as needed. ## Limitations & next steps - The page is standalone; backend integration for settings persistence is required. - Navigation selections switch content but only the shortcuts panel is shown. - Drag-drop logic is local; further events or service calls needed for data sync. - Authentication and authorization are outside this scope. - Extend with forms or dialogs to edit shortcut details or other settings sections.