●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Tabbed form area with MudTabs and MudTabPanel (Gegevens, Milieuprofielen, Hoofdfases, Schalen).
- Header with search (MudTextField) and top action buttons (MudButton).
- Quantity, unit and read-only lifetime fields using MudTextField.
- Toggle inputs using MudCheckBox and MudRadioGroup.
- Repeating list of scaling rows rendered from DimensionRows: each row shows a MudNumericField, unit label, range caption and a reset action (MudIconButton).
- Right-side single-dimension card inside MudPaper showing a MudNumericField and reset.
## Key components
- MudContainer, MudPaper, MudGrid, MudItem
- MudTextField, MudNumericField, MudButton
- MudTabs, MudTabPanel, MudCheckBox, MudRadioGroup
- MudIconButton, MudText, MudStack
## How it works
- DimensionRows and RightDimension are created in OnInitialized and bound to inputs with @bind-Value (two-way binding).
- ResetRow sets row.Value = row.DefaultValue and calls StateHasChanged to update the UI.
- ActiveTabIndex is bound to MudTabs via @bind-ActivePanelIndex to track the active panel.
- SearchText, QuantityPerMeterText, UnitText and boolean flags use @bind-Value for immediate UI updates.
- No EditForm or DataAnnotationsValidator is used here; the component does not perform model validation or submit to a backend.
## Styling
- Uses MudBlazor components and theme tokens (MudPaper, MudContainer) for visual structure.
- Layout relies on MudGrid/MudItem for responsive columns; additional Bootstrap-like utility classes (d-flex, me-2, ms-1) provide spacing.
- Numeric constraints are provided by model Min/Max (400–2000) and displayed as RangeText.
## Reuse steps
1. Add MudBlazor NuGet and register services in Program.cs (builder.Services.AddMudServices()).
2. Ensure MudBlazor CSS and MudThemeProvider are added in MainLayout or Program.cs.
3. Import MudBlazor namespace in the component and copy ScalingDimensionModel into the project.
4. Replace sample initialization in OnInitialized with injected services or API calls to load real data.
5. Add persistence and validation: wrap inputs in EditForm, add DataAnnotations on the model, and implement save/update handlers.
## Limitations & next steps
- This is a single page scaffold generated by Instruct UI; it lacks backend wiring, authentication, and persistence.
- No validation or save endpoint is implemented; add EditForm/DataAnnotationsValidator and service calls for saving.
- Consider adding localization for labels/units, accessibility attributes, and unit conversion logic.
- Expand tests for ResetRow and component state, and integrate with application services for data sync.