Confirm?

Are you sure you want to proceed?
D
D Stremio

Simulador Consumo Eléctrico Hogar

Clone & Customize via AI

The MudBlazor Consumption Calc presents a step-based electricity estimator with subsidy selection, selectable appliance categories, and a results panel. Uses MudToggleGroup for subsidy choices and a MudGrid layout for category cards.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Three-step UI: subsidy selection, appliance category selection, and results overview. - Selectable category cards laid out in a responsive grid with click selection state. - Visual consumption bar with segmented ranges and a pointer indicator. - Circular progress component showing estimated consumption percentage and a small results summary. - Primary actions: a large call-to-action button to view detailed results. ## Key components - MudToggleGroup / MudToggleItem (subsidy level selection) - MudGrid / MudItem (responsive card layout) - MudPaper, MudAvatar, MudIcon, MudText, MudStack (layout and typographic elements) - MudProgressCircular (visual consumption indicator) - MudButton (primary action) - Custom model: ApplianceCategoryViewModel - Custom CSS classes: .selected-subsidy, .selected-category, .consumption-bar and child selectors ## How it works - Data is initialized in OnInitialized by populating a List<ApplianceCategoryViewModel>. - Subsidy selection uses @bind-Value on MudToggleGroup to update _selectedSubsidy. - Category selection updates a local _selectedCategoryId via an onclick handler that calls SelectCategory and triggers StateHasChanged. - Results are rendered from static values in the page (e.g., consumption numbers, progress value); the consumption bar position is controlled by inline style and CSS segments. - No EditForm or DataAnnotationsValidator are present; validation and server-side calculations are not implemented in this page. ## Styling - Uses MudBlazor components and the framework's layout system for responsiveness (MudGrid breakpoints xs/sm/md). - Adds a small local stylesheet that defines selected state visuals (.selected-subsidy, .selected-category) and the segmented .consumption-bar with an absolute indicator triangle. - Visuals rely on MudBlazor theme colors and a few inline styles for icon and progress sizing. ## Reuse steps 1. Add the MudBlazor NuGet package and register services in Program.cs (builder.Services.AddMudServices()). 2. Import MudBlazor namespace in _Imports.razor and reference MudBlazor CSS/Icons in index.html/_Host.cshtml. 3. Add ApplianceCategoryViewModel to the project and copy the Razor component and CSS rules (or adapt to a shared stylesheet). 4. Wire real calculation logic and data sources: replace hard-coded kWh and counts with injected services or state management. 5. Hook navigation and result detail action to a dialog or page that runs full consumption calculations. ## Limitations & next steps - This is a single page scaffold generated by Instruct UI; it contains UI state and sample data but no backend services, persistence, or business logic for consumption calculation. - No form validation or user input forms for appliance quantities/hours are implemented; add EditForm and DataAnnotations if inputs are required. - Internationalization and accessibility checks are not addressed; consider adding aria labels and resource texts. - Extend by injecting a calculation service, adding per-appliance inputs, and persisting user preferences or results.