79605793

Date: 2025-05-04 16:10:49
Score: 1
Natty:
Report link

As Henk advised, I rebuilt the code with correct using of the components. So I put component in the project tree like this:

enter image description here

Valve.razor file contains code:

<div class="lamp">
    <div class="on @(IsOn ? "on" : "off")"></div>
</div>

Valve.razor.cs is:

using Microsoft.AspNetCore.Components;

namespace GardenHMI.Components.Pages.Components
{
    public partial class Valve : ComponentBase
    {
        [Parameter]
        public bool IsOn { get; set; }

        public void Toggle()
        {
            IsOn = !IsOn;
        }
    }
}

Valve.razor.css is:

.lamp div {
    margin-bottom: 0.5em;
    border: 2px solid grey;
    width: 4em;
    height: 4em;
    border-radius: 50%;
}

div.on {
    background-color: greenyellow;
}

div.off {
    background-color: dimgrey;
}

the code looks now in Home.razor:

"@page "/"
@using GardenHMI.Components.Pages.Components

<PageTitle>Home</PageTitle>

<h1>Sterowanie ogrodem</h1>

Stan zaworów

<Valve [email protected]> </Valve>


@code{
    private Valve valve = new();

    protected override void OnInitialized()
    {
        base.OnInitialized();

        valve = new Valve() { IsOn = true };
    }
}

The result is which I expected:

enter image description here

Reasons:
  • Probably link only (1):
  • Long answer (-1):
  • Has code block (-0.5):
  • Self-answer (0.5):
  • Low reputation (1):
Posted by: Witold Lisiecki