CODEWITHSUNDEEP
c#blazormaui
Somecode
Somecode

Reputation: 39

Blazor NET MAUI empty child component not rendering, but parent is

I have a Blazor component, called ToggleButtonBaseComponent. It has a bit of c# code, html, and css inside of it, and I was planning to use it as a base for Toggle buttons with different behaviors.

When I inherit from that component to an otherwise empty Child component, and I put the child component on a page, the child component does not appear.

Example:

        <ChildComponent></ChildComponent>
        <ToggleButtonBaseComponent></ToggleButtonBaseComponent>
        <ToggleButtonBaseComponent></ToggleButtonBaseComponent>

Parent component:

 @inherits IDisposableComponent;

<style>
    ....
</style>

<button class="toggle-button @(IsToggled ? "toggled-on" : "toggled-off")" @onclick="ToggleClick" style="height:@(Height)px; width:@(Width)px; border-radius:@(BorderRadius)px">
    <span class="circle @(IsToggled ? "toggled-on" : "toggled-off")" style="height:@(Height)px; width:@(Height)px;"></span>
</button>

@code {

    [Parameter]
    public int Width{ get;set;} = 40;

    private int Height { get; set; }
    private int BorderRadius { get; set; }

    protected bool IsToggled 
    {
        get; 
        set; 
    }

    protected override void OnParametersSet()
    {
        Height = Width / 2;
        BorderRadius = Height / 2;
    }

    protected virtual void ToggleClick() { }

    public override void Dispose() { }

}

Child component:

@using ....
@inherits ToggleButtonBaseComponent;

@code {

}

Upvotes: 0

Views: 163

Answers (1)

Mayur Ekbote
Mayur Ekbote

Reputation: 2080

In Blazor, the child component does not inherit the markup. It only inherits class members. So, you need to factor out the functionality in the base class (members, methods, events etc.) and then write separate markup for each of the derived classes.

Upvotes: 1

Related Questions