Tabs

Simple Tabs

Content One

<MudTabs Elevation="2" Rounded="true" ApplyEffectsToContainer="true" TabPanelsClass="pa-6">
    <MudTabPanel Text="Tab One">
        <MudText>Content One</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Tab Two">
        <MudText>Content Two</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Tab Three">
        <MudText>Content Three</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Tab Disabled" Disabled="true">
        <MudText>Content Disabled</MudText>
    </MudTabPanel>
</MudTabs>

Icon Tabs

Icons can be added alongside text in the tabs to enhance visuals.

<MudTabs Outlined="true">
    <MudTabPanel Text="Api" Icon="@Icons.Material.Filled.Api"/>
    <MudTabPanel Icon="@Icons.Material.Filled.Build"/>
    <MudTabPanel Text="Bug Report" Icon="@Icons.Material.Filled.BugReport"/>
</MudTabs>

Tabs Position

The position of the tab bar can be changed with the Position property.

Content One

Tabs Position

<MudTabs Outlined="true" Position="@Position" Rounded="true" Border="true"
         ApplyEffectsToContainer="true" Class="mt-8" TabPanelsClass="pa-6">
    <MudTabPanel Text="Item One">
        <MudText>Content One</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Two">
        <MudText>Content Two</MudText>
    </MudTabPanel>
    <MudTabPanel Text="Item Three">
        <MudText>Content Three</MudText>
    </MudTabPanel>
</MudTabs>

<MudSelect Label="Tabs Position" @bind-Value="Position" Variant="Variant.Outlined">
    <MudSelectItem T="Position" Value="@Position.Top">Top</MudSelectItem>
    <MudSelectItem T="Position" Value="@Position.Start">Start</MudSelectItem>
    <MudSelectItem T="Position" Value="@Position.Left">Left</MudSelectItem>
    <MudSelectItem T="Position" Value="@Position.Right">Right</MudSelectItem>
    <MudSelectItem T="Position" Value="@Position.End">End</MudSelectItem>
    <MudSelectItem T="Position" Value="@Position.Bottom">Bottom</MudSelectItem>
</MudSelect>

@code {
    public Position Position { get; set; } = Position.Left;

    private void OnSelectedValue(Position value)
    {
        switch (value)
        {
            case Position.Top:
                Position = Position.Top;
                break;
            case Position.Start:
                Position = Position.Start;
                break;
            case Position.Left:
                Position = Position.Left;
                break;
            case Position.Right:
                Position = Position.Right;
                break;
            case Position.End:
                Position = Position.End;
                break;
            case Position.Bottom:
                Position = Position.Bottom;
                break;
        }
    }
}

API

Simple Tabs

Icon Tabs

Tabs Position