Table of Contents

Class MudTabs

Namespace
MudBlazor
Assembly
MudBlazor.dll

A set of views organized into one or more MudTabPanel components.

public class MudTabs : MudComponentBase, IComponent, IHandleEvent, IHandleAfterRender, IMudStateHasChanged, IAsyncDisposable
Inheritance
MudTabs
Implements
Derived
Inherited Members
Extension Methods

Constructors

MudTabs() 

public MudTabs()

Properties

ActivePanel

The currently selected tab panel.

public MudTabPanel? ActivePanel { get; }

Property Value

MudTabPanel

ActivePanelIndex

The index of the currently selected tab panel.

[Parameter]
[Category("Behavior")]
public int ActivePanelIndex { get; set; }

Property Value

int

Remarks

Defaults to 0 (the first tab). When this value changes, ActivePanelIndexChanged occurs.

ActivePanelIndexChanged

Occurs when ActivePanelIndex has changed.

[Parameter]
public EventCallback<int> ActivePanelIndexChanged { get; set; }

Property Value

EventCallback<int>

ActiveTabClass

The CSS classes applied to the currently selected tab.

[Parameter]
[Category("Appearance")]
public string? ActiveTabClass { get; set; }

Property Value

string

Remarks

Defaults to null. Multiple classes must be separated by spaces.

AlwaysShowScrollButtons

Shows the scroll buttons even if all tabs are visible.

[Parameter]
[Category("Appearance")]
public bool AlwaysShowScrollButtons { get; set; }

Property Value

bool

Remarks

Defaults to false.

ApplyEffectsToContainer

Applies the Elevation, Rounded and Outlined effects to the tab panel.

[Parameter]
[Category("Appearance")]
public bool ApplyEffectsToContainer { get; set; }

Property Value

bool

Remarks

Defaults to false.
When false, effects are only applied to the header.
When true, effects are applied to both the tab header and panel.

Border

Shows a border between the tab content and tab header.

[Parameter]
[Category("Appearance")]
public bool Border { get; set; }

Property Value

bool

Remarks

Defaults to false.

Centered

Centers tabs horizontally in the tab header.

[Parameter]
[Category("Appearance")]
public bool Centered { get; set; }

Property Value

bool

Remarks

Defaults to false.

ChildContent

The content within this component.

[Parameter]
[Category("Behavior")]
public RenderFragment? ChildContent { get; set; }

Property Value

RenderFragment

Remarks

Typically a set of MudTabPanel components.

Color

The color of the tab header.

[Parameter]
[Category("Appearance")]
public Color Color { get; set; }

Property Value

Color

Remarks

Defaults to Default.

Elevation

The size of the drop shadow.

[Parameter]
[Category("Appearance")]
public int Elevation { get; set; }

Property Value

int

Remarks

Defaults to 0. Use a higher number for a larger drop shadow.

Header

The custom content added before or after the list of tabs.

[Parameter]
[Category("Behavior")]
public RenderFragment<MudTabs>? Header { get; set; }

Property Value

RenderFragment<MudTabs>

Remarks

The location of this header is controlled via the HeaderPosition parameter.

HeaderPosition

The location of custom header content provided in Header.

[Parameter]
[Category("Behavior")]
public TabHeaderPosition HeaderPosition { get; set; }

Property Value

TabHeaderPosition

Remarks

Defaults to After.

HideSlider

Hides the slider underneath the tab header.

[Parameter]
[Category("Appearance")]
public bool HideSlider { get; set; }

Property Value

bool

Remarks

Defaults to false.

IconColor

The color of each tab panel's icon.

[Parameter]
[Category("Appearance")]
public Color IconColor { get; set; }

Property Value

Color

Remarks

Defaults to Inherit.

InternalClassName

Can be used in derived class to add a class to the main container. If not overwritten return an empty string

protected virtual string InternalClassName { get; }

Property Value

string

KeepPanelsAlive

Persists the content of tabs when they are not visible.

[Parameter]
[Category("Behavior")]
public bool KeepPanelsAlive { get; set; }

Property Value

bool

Remarks

Defaults to false.
When false, selecting a tab will initialize its content each time the tab is visited.
When true, a tab's content is initialized only once and is hidden via display:none.

MaxHeight

The maximum height for this component, in pixels.

[Parameter]
[Category("Appearance")]
public int? MaxHeight { get; set; }

Property Value

int?

Remarks

Defaults to null.

MaxHeightStyles 

protected string MaxHeightStyles { get; }

Property Value

string

MinimumTabWidth

The minimum width of each tab panel.

[Parameter]
[Category("Appearance")]
public string MinimumTabWidth { get; set; }

Property Value

string

Remarks

Defaults to 160px. Can be a CSS width or a percentage (e.g. 30%).

NextIcon

The icon for scrolling to the next page of tabs.

[Parameter]
[Category("Appearance")]
public string NextIcon { get; set; }

Property Value

string

Remarks

Defaults to ChevronRight.

OnPreviewInteraction

Occurs before a panel is activated.

[Parameter]
[Category("Behavior")]
public Func<TabInteractionEventArgs, Task>? OnPreviewInteraction { get; set; }

Property Value

Func<TabInteractionEventArgs, Task>

Remarks

Set Cancel to true to prevent the tab from being activated.
The returned Task will be awaited.

Outlined

Shows an outline around the tab header.

[Parameter]
[Category("Appearance")]
public bool Outlined { get; set; }

Property Value

bool

Remarks

Defaults to false.

PanelClass

The CSS classes applied to all tab panels.

[Parameter]
[Category("Appearance")]
public string? PanelClass { get; set; }

Property Value

string

Remarks

Defaults to null. Multiple classes must be separated by spaces.

Panels

A read-only list of the panels within this component.

public IReadOnlyList<MudTabPanel> Panels { get; }

Property Value

IReadOnlyList<MudTabPanel>

Remarks

Tab panels are controlled by either adding more MudTabPanel components in the Razor page, or by using the MudDynamicTabs component instead.

PanelsClassnames 

protected string PanelsClassnames { get; }

Property Value

string

Position

The location of the tab header.

[Parameter]
[Category("Behavior")]
public Position Position { get; set; }

Property Value

Position

Remarks

Defaults to Top.

PrePanelContent

This fragment is placed between tabHeader and panels. It can be used to display additional content like an address line in a browser. The active tab will be the content of this RenderFragement

[Parameter]
[Category("Behavior")]
public RenderFragment<MudTabPanel>? PrePanelContent { get; set; }

Property Value

RenderFragment<MudTabPanel>

PrevIcon

The icon for scrolling to the previous page of tabs.

[Parameter]
[Category("Appearance")]
public string PrevIcon { get; set; }

Property Value

string

Remarks

Defaults to ChevronLeft.

RightToLeft

Displays text right-to-left.

[CascadingParameter(Name = "RightToLeft")]
public bool RightToLeft { get; set; }

Property Value

bool

Remarks

Controlled via the MudRTLProvider component.

Ripple

Shows a ripple effect when a tab is clicked.

[Parameter]
[Category("Appearance")]
public bool Ripple { get; set; }

Property Value

bool

Remarks

Defaults to true.

Rounded

Uses rounded corners on the tab's edges.

[Parameter]
[Category("Appearance")]
public bool Rounded { get; set; }

Property Value

bool

Remarks

Defaults to false. Can be overridden by Rounded When true, the border-radius style is set to the theme's default value.

ScrollIconColor

The color of the scroll icon buttons.

[Parameter]
[Category("Appearance")]
public Color ScrollIconColor { get; set; }

Property Value

Color

Remarks

Defaults to Inherit.

SliderAnimation

Shows an animated line which slides to the selected tab.

[Parameter]
[Category("Appearance")]
public bool SliderAnimation { get; set; }

Property Value

bool

Remarks

Defaults to true.

SliderClass 

protected string SliderClass { get; }

Property Value

string

SliderColor

The color of the tab slider.

[Parameter]
[Category("Appearance")]
public Color SliderColor { get; set; }

Property Value

Color

Remarks

Defaults to Inherit.

SliderStyle 

protected string SliderStyle { get; }

Property Value

string

TabBarClassnames 

protected string TabBarClassnames { get; }

Property Value

string

TabHeaderClass

The CSS classes applied to the tab header.

[Parameter]
[Category("Appearance")]
public string? TabHeaderClass { get; set; }

Property Value

string

Remarks

Defaults to null. Multiple classes must be separated by spaces.
The "header" is the set of tab names which users click on to change the active tab.

TabPanelClass

The CSS classes applied to tab panels.

[Parameter]
[Category("Appearance")]
public string? TabPanelClass { get; set; }

Property Value

string

Remarks

Defaults to null. Multiple classes must be separated by spaces.

TabPanelHeader

Custom content added before or after each tab panel.

[Parameter]
[Category("Behavior")]
public RenderFragment<MudTabPanel>? TabPanelHeader { get; set; }

Property Value

RenderFragment<MudTabPanel>

Remarks

The location of this header is controlled via the TabPanelHeaderPosition parameter.

TabPanelHeaderPosition

The location of custom tab panel content provided in TabPanelHeader.

[Parameter]
[Category("Behavior")]
public TabHeaderPosition TabPanelHeaderPosition { get; set; }

Property Value

TabHeaderPosition

TabsClassnames 

protected string TabsClassnames { get; }

Property Value

string

WrapperClassnames 

protected string WrapperClassnames { get; }

Property Value

string

WrapperScrollStyle 

protected string WrapperScrollStyle { get; }

Property Value

string

Methods

ActivatePanel(MudTabPanel?, bool)

Sets the active panel.

public void ActivatePanel(MudTabPanel? panel, bool ignoreDisabledState = false)

Parameters

panel MudTabPanel

The panel to activate.

ignoreDisabledState bool

When true, the panel will be activated even if it is disabled.

ActivatePanel(int, bool)

Sets the active panel.

public void ActivatePanel(int index, bool ignoreDisabledState = false)

Parameters

index int

The index of the panel to activate.

ignoreDisabledState bool

When true, the panel will be activated even if it is disabled.

ActivatePanel(object, bool)

Sets the active panel.

public void ActivatePanel(object id, bool ignoreDisabledState = false)

Parameters

id object

The unique ID of the panel to activate.

ignoreDisabledState bool

When true, the panel will be activated even if it is disabled.

BuildRenderTree(RenderTreeBuilder) 

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder

DisposeAsync()

Releases resources used by this component.

public ValueTask DisposeAsync()

Returns

ValueTask

OnAfterRenderAsync(bool) 

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

firstRender bool

Returns

Task

OnInitialized() 

protected override void OnInitialized()

OnParametersSet() 

protected override void OnParametersSet()