Blazorise Tab component

Tabs are used to organize and group content into sections that the user can navigate between.

The <Tab> component is used for hiding content behind a selectable item. This can also be used as a pseudo-navigation for a page, where the tabs are links and the tab-items are the content.

There are two pieces to a tabbed interface: the tabs themselves, and the content for each tab.

  • <Tabs> container for Tab items.

    • <Items> collection of tab items.

      • <Tab> individual tab item, which can be clicked to navigate to the tab content.

    • <Content> container for tab panels.

      • <TabPanel> individual tab content, which is displayed when the tab item is clicked.

The tabs are container for tab items. Each tab item contains a link to a tab panel. The Name of each tab item should match the Name of a tab panel.

  • <TabsContent> container for tab panels
    • <TabPanel> container for tab content

The tab content container is used to hold tab panels. Each content pane also has a unique Name, which is targeted by a link in the tab-strip.

Most of the time you will only need to use Tabs component as it is crafted to hold both clickable tab items and tab content. Only in the advanced scenario where the content will be separated from the tab items you will need to use <TabsContent> component.

Examples

Basic

Content for home.
Content for profile.
Content for messages.
Content for settings. 
<Tabs SelectedTab="@selectedTab" SelectedTabChanged="@OnSelectedTabChanged">
    <Items>
        <Tab Name="home">Home</Tab>
        <Tab Name="profile">Profile</Tab>
        <Tab Name="messages">Messages</Tab>
        <Tab Name="settings">Settings</Tab>
    </Items>
    <Content>
        <TabPanel Name="home">
            Content for home.
        </TabPanel>
        <TabPanel Name="profile">
            Content for profile.
        </TabPanel>
        <TabPanel Name="messages">
            Content for messages.
        </TabPanel>
        <TabPanel Name="settings">
            Content for settings.
        </TabPanel>
    </Content>
</Tabs>

@code{
    string selectedTab = "profile";

    private Task OnSelectedTabChanged( string name )
    {
        selectedTab = name;

        return Task.CompletedTask;
    }
}

Lazy Load

You are able to set the Tabs component to lazy load your tabs.
This Tabs component is set to LazyLoad mode, meaning each tab will only be rendered/loaded the first time it is visited. This is specially useful when you want to delay some heavy or long waited operations for when the tab is actually clicked instead. 
<Tabs RenderMode="TabsRenderMode.LazyLoad" SelectedTab="tab1">
    <Items>
        <Tab Name="tab1">Tab 1</Tab>
        <Tab Name="tab2">Tab 2</Tab>
    </Items>
    <Content>
        <TabPanel Name="tab1">
            This Tabs component is set to <code>LazyLoad</code> mode, meaning each tab will only be rendered/loaded the first time it is visited.
            This is specially useful when you want to delay some heavy or long waited operations for when the tab is actually clicked instead.
            <TextEdit></TextEdit>
        </TabPanel>
        <TabPanel Name="tab2">
            <TextEdit></TextEdit>
        </TabPanel>
    </Content>
</Tabs>

Lazy Reload

You are able to set the Tabs component to lazy load your tabs everytime.
This Tabs component is set to LazyReload mode, meaning that only the active tab will have it's html rendered at a time. Try typing some text in the provided Text components and changing between tabs, the tab will always be refresh as the tab content is always lazy loaded, therefore re-calculated. 
<Tabs RenderMode="TabsRenderMode.LazyReload" SelectedTab="tab1">
    <Items>
        <Tab Name="tab1">Tab 1</Tab>
        <Tab Name="tab2">Tab 2</Tab>
    </Items>
    <Content>
        <TabPanel Name="tab1">
            This Tabs component is set to <code>LazyReload</code> mode, meaning that only the active tab will have it's html rendered at a time. 
            Try typing some text in the provided Text components and changing between tabs, the tab will always be refresh as the tab content is always lazy loaded, 
            therefore re-calculated.
            <TextEdit></TextEdit>
        </TabPanel>
        <TabPanel Name="tab2">
            <TextEdit></TextEdit>
        </TabPanel>
    </Content>
</Tabs>

API

Parameters

Tabs

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this Tabs.

 RenderFragmentnull
Content

Container for tab panes.

 RenderFragmentnull
FullWidth

Makes the tab items to extend the full available width.

 boolfalse
Items

Container for tab items.

 RenderFragmentnull
Justified

Makes the tab items to extend the full available width, but every item will be the same width.

 boolfalse
Pills

Makes the tab items to appear as pills.

 boolfalse
RenderMode

Defines how the tabs content will be rendered.

Possible values:Default, LazyLoad, LazyReload

 TabsRenderModeTabsRenderMode.Default
SelectedTab

Gets or sets currently selected tab name.

 string
TabPosition

Position of tab items.

Possible values:Top, Bottom, Start, End

 TabPositionTabPosition.Top
VerticalItemsColumnSize

Controls the size of the items bar when in vertical mode. If left undefined it will default to the ColumnSize.IsAuto.

 IFluentColumnnull

Tab

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this Tab.

 RenderFragmentnull
Disabled

Flag to indicate that the tab is not responsive for user interaction.

 boolfalse
Name

Defines the tab name. Must match the corresponding panel name.

 string

TabsContent

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this TabsContent.

 RenderFragmentnull
RenderMode

Defines how the tabs content will be rendered.

Possible values:Default, LazyLoad, LazyReload

 TabsRenderModeTabsRenderMode.Default
SelectedPanel

Gets or sets currently selected panel name.

 string

TabPanel

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this TabPanel.

 RenderFragmentnull
Name

Defines the panel name. Must match the corresponding tab name.

 string

Events

Tabs

Event Description Type
SelectedTabChanged

Occurs after the selected tab has changed.

 EventCallback<string>

Tab

Event Description Type
Clicked

Occurs when the item is clicked.

 EventCallback<MouseEventArgs>

TabsContent

Event Description Type
SelectedPanelChanged

Occurs after the selected panel has changed.

 EventCallback<string>

Methods

Tabs

Method DescriptionReturnParameters
SelectTab Sets the active tab by the name. Taskstring tabName

TabsContent

Method DescriptionReturnParameters
SelectPanel Sets the active panel by the name. Taskstring name
On this page