As Henk advised, I rebuilt the code with correct using of the components. So I put component in the project tree like this:
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: