MudTabPanel not rendering child component

Question

I have a MudTabs component, inside there is a MudTab. The MudTab has a big chunk of razor that renders quite a lot of data through MudTextFields. It works fine.

I wanted to refactor the code and move the "big chunk of razor" into separate component. I wish to render this component inside the tab instead.

Neither of the below mentioned approaches are working:

<MudTabPanel Text="Details">
  @DetailsComponent
</MudTabPanel>

<MudTabPanel Text="Details" Component="@DetailsComponent">
</MudTabPanel>

Anything missing in implementation?

Answer 1

MudTabPanel has a ChildContent parameter so you can simply do this to show the Counter and Weather components in two tabs.

@page "/"

<PageTitle>Home</PageTitle>

<MudText Typo="Typo.h3" GutterBottom="true">Hello, world!</MudText>
<MudText Class="mb-8">Welcome to your new app, powered by MudBlazor and the .NET 8 Template!</MudText>

<MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" PanelClass="pa-6">
    <MudTabPanel Text="Counter">
        <Counter />
    </MudTabPanel>
    <MudTabPanel Text="Weather">
        <Weather />
    </MudTabPanel>
</MudTabs>