Tabs

Basics

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

  • <Tabs> container for Tab items
    • <Items> container for tab items
      • <Tab> clickable tab items
    • <Content> container for tab panels
      • <TabPanel> container for tab content

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.

So for a basic tabs when we put it all together, we get this:

Example

<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 void OnSelectedTabChanged( string name )
    {
        selectedTab = name;
    }
}

Functions

Name Description
SelectTab(string name) Sets the active tab by the name.

Attributes

Tabs

Name Type Default Description
Pills boolean false Makes the tab items to appear as pills.
FullWidth boolean false Makes the tab items to extend the full available width.
Justified boolean false Makes the tab items to extend the full available width, but every item will be the same width.
TabPosition TabPosition Top Defines the placement of a tab items.
SelectedTab string   Currently selected tab name.
SelectedTabChanged event   Occurs after the selected tab has changed.

Tab

Name Type Default Description
Name string null Defines the unique tab name.

TabsContent

Name Type Default Description
SelectedPanel string   Currently selected panel name.
SelectedPanelChanged event   Occurs after the selected panel has changed.

TabPanel

Name Type Default Description
Name string null Defines the panel name that must match the corresponding tab name.