How to inherit MudButton and MudMenu with my default values

Question

There are many MudButtons and MudMenus in a Blazor page and I am trying to remove repeated properties like Variant="Variant.Outlined" Color="Color.Primary" Size="Size.Medium".

So, I added custom MudButton razor component which inherits MudButton as the followings;

@inherits MudButton


@{
    //Is it required?
    base.BuildRenderTree(__builder);
}

@code {

    protected override void OnInitialized()
    {
        base.OnInitialized();
        this.Variant = Variant.Outlined;
        this.Color = Color.Primary;
        this.Size = Size.Medium;
    }

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
    }

}

@inherits MudMenu

@code {

    protected override void OnInitialized()
    {
        this.Variant = Variant.Outlined;
        this.Color = Color.Primary;
        this.Size = Size.Medium;
        
        this.EndIcon = Icons.Filled.KeyboardArrowDown;
        this.IconColor = Color.Primary;

        this.AnchorOrigin = Origin.BottomCenter;
    }

}

However, the custom MudButton and MudMenu could not be rendered correctly - only text was displayed.

Is it any way to inherit MudComponent with original style kept?

Best regards.

Brian Parker · Accepted Answer · 2022-12-27 09:09:00Z

4

Using a normal class file .cs not .razor. This stops the razor compiler being invoked and clobbering the inherited RenderFragment.

public class AppButton : MudButton
{
    protected override void OnParametersSet()
    {
        this.Variant = Variant.Outlined;
        this.Color = Color.Primary;
        this.Size = Size.Medium;
        base.OnParametersSet();
    }
}


public class AppMenu : MudMenu
{
    protected override void OnParametersSet()
    {
        this.Variant = Variant.Outlined;
        this.Color = Color.Primary;
        this.Size = Size.Medium;

        this.EndIcon = Icons.Filled.KeyboardArrowDown;
        this.IconColor = Color.Primary;

        this.AnchorOrigin = Origin.BottomCenter;
        base.OnParametersSet();
    }
}

Now you have two new components inheriting mudblazor with defaults set. <AppButton /> and <AppMenu />

edited Dec 27, 2022 at 9:09

answered Dec 27, 2022 at 8:21

Brian Parker

15k3 gold badges41 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Firuz Over a year ago

But what if I am want use components and write html code in my custom button class?

MrC aka Shaun Curtis · Accepted Answer · 2022-12-27 15:04:37Z

My referred way is to override them in CTor (as long as they are not required!). You can then set any specific preferences in the individual Razor declarations.

public class MyMudButton : MudButton
{
    public MyMudButton()
    {
        this.Variant = Variant.Outlined;
        this.Color = Color.Primary;
        this.Size = Size.Medium;
    }
}

If you want to use Razor you need to deal with the default RenderFragment.

@inherits MudButton

@this.ParentContent

@code {
    public RenderFragment ParentContent;

    public MyMudButton()
    {
        ParentContent = (builder) => base.BuildRenderTree(builder);

        this.Variant = Variant.Outlined;
        this.Color = Color.Primary;
        this.Size = Size.Medium;
    }
}

Collectives™ on Stack Overflow

How to inherit MudButton and MudMenu with my default values

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related