Tabs

Composition

This component is a composition of 2 key components:

LumexTabs: A component representing a tab list.
LumexTab: A component representing a tab and its content.

Usage

Tabs organize content into multiple sections and allow users to navigate between them seamlessly.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="w-full flex flex-col">
    <LumexTabs>
        <LumexTab Title="Photos">
            <LumexCard>
                <LumexCardBody>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
        <LumexTab Title="Music">
            <LumexCard>
                <LumexCardBody>
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
        <LumexTab Title="Videos">
            <LumexCard>
                <LumexCardBody>
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                    mollit anim id est laborum.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
    </LumexTabs>
</div>

Disabled

You can disable the tabs to prevent user interaction. The disabled tabs are faded and does not respond to user clicks.

<div class="w-full flex flex-col">
    <LumexTabs Disabled="@true">
        <LumexTab Title="Photos">
            <LumexCard>
                <LumexCardBody>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
        <LumexTab Title="Music">
            <LumexCard>
                <LumexCardBody>
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
        <LumexTab Title="Videos">
            <LumexCard>
                <LumexCardBody>
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                    mollit anim id est laborum.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
    </LumexTabs>
</div>

Alternatively, you can prevent user interaction by disabling specific tabs.

<div class="w-full flex flex-col">
    <LumexTabs DisabledItems="@(["music"])">
        <LumexTab Id="photos" Title="Photos">
            <LumexCard>
                <LumexCardBody>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
        <LumexTab Id="music" Title="Music">
            <LumexCard>
                <LumexCardBody>
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
        <LumexTab Id="videos" Title="Videos">
            <LumexCard>
                <LumexCardBody>
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                    mollit anim id est laborum.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
    </LumexTabs>
</div>

It's important to set a unique Id for each tab, otherwise the disabled items will not work.

Sizes

Adjust the size of the tabs, from small to larger ones.

<div class="flex flex-wrap gap-4">
    @foreach (var size in Enum.GetValues<Size>())
    {
        <LumexTabs Size="@size">
            <LumexTab Title="Photos" />
            <LumexTab Title="Music" />
            <LumexTab Title="Videos" />
        </LumexTabs>
    }
</div>

Radius

Customize the border radius of the tabs for rounded or squared edges.

<div class="flex flex-wrap gap-4">
    @foreach (var radius in Enum.GetValues<Radius>())
    {
        <LumexTabs Radius="@radius">
            <LumexTab Title="Photos" />
            <LumexTab Title="Music" />
            <LumexTab Title="Videos" />
        </LumexTabs>
    }
</div>

Colors

Apply different color schemes to the tabs.

<div class="flex flex-wrap gap-4">
    @foreach (var color in Enum.GetValues<ThemeColor>()[1..])
    {
        <LumexTabs Color="@color">
            <LumexTab Title="Photos" />
            <LumexTab Title="Music" />
            <LumexTab Title="Videos" />
        </LumexTabs>
    }
</div>

Variants

Switch between different visual styles, such as Solid, Outlined, Underlined, or Light tabs.

<div class="flex flex-wrap gap-4">
    @foreach (var variant in Enum.GetValues<TabVariant>())
    {
        <LumexTabs Variant="@variant">
            <LumexTab Title="Photos" />
            <LumexTab Title="Music" />
            <LumexTab Title="Videos" />
        </LumexTabs>
    }
</div>

Links

Tabs can be rendered as links by providing the href attribute to the Tab component.

<div class="w-full flex flex-col">
    <LumexTabs>
        <LumexTab Title="Photos" href="/photos">
            <LumexCard>
                <LumexCardBody>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
        <LumexTab Title="Music" href="/music">
            <LumexCard>
                <LumexCardBody>
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
        <LumexTab Title="Videos" href="/videos">
            <LumexCard>
                <LumexCardBody>
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                    mollit anim id est laborum.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
    </LumexTabs>
</div>

Title Content

Add custom content to the tab titles, such as icons or additional information.

<div class="w-full flex flex-col">
    <LumexTabs Color="@ThemeColor.Primary">
        <LumexTab>
            <TitleContent>
                <div class="flex items-center space-x-2">
                    <LumexIcon Icon="@Icons.Rounded.PhotoLibrary" />
                    <span>Photos</span>
                </div>
            </TitleContent>
        </LumexTab>
        <LumexTab>
            <TitleContent>
                <div class="flex items-center space-x-2">
                    <LumexIcon Icon="@Icons.Rounded.LibraryMusic" />
                    <span>Music</span>
                </div>
            </TitleContent>
        </LumexTab>
        <LumexTab>
            <TitleContent>
                <div class="flex items-center space-x-2">
                    <LumexIcon Icon="@Icons.Rounded.VideoLibrary" />
                    <span>Videos</span>
                </div>
            </TitleContent>
        </LumexTab>
    </LumexTabs>
</div>

Two-Way Data Binding

The Tabs component supports two-way data binding, allowing you to programmatically control the selected tab. You can achieve this using the @bind-Value directive, or the @Value and @ValueChanged parameters.

Selected: photos

<div class="w-full flex flex-col gap-2">
    <LumexTabs @bind-SelectedId="@_selectedTabIdOne">
        <LumexTab Id="@("photos")" Title="Photos">
            <LumexCard>
                <LumexCardBody>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
        <LumexTab Id="@("music")" Title="Music">
            <LumexCard>
                <LumexCardBody>
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
        <LumexTab Id="@("videos")" Title="Videos">
            <LumexCard>
                <LumexCardBody>
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                    mollit anim id est laborum.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
    </LumexTabs>

    <p class="text-sm text-default-500">
        Selected: @_selectedTabIdOne
    </p>
</div>

<div class="w-full flex flex-col gap-2">
    <LumexTabs SelectedId="@_selectedTabIdTwo"
               SelectedIdChanged="@OnSelectedTabChange">
        <LumexTab Id="@("photos")" Title="Photos">
            <LumexCard>
                <LumexCardBody>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
        <LumexTab Id="@("music")" Title="Music">
            <LumexCard>
                <LumexCardBody>
                    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
                    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
        <LumexTab Id="@("videos")" Title="Videos">
            <LumexCard>
                <LumexCardBody>
                    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
                    mollit anim id est laborum.
                </LumexCardBody>
            </LumexCard>
        </LumexTab>
    </LumexTabs>

    <p class="text-sm text-default-500">
        Selected: @_selectedTabIdTwo
    </p>
</div>

@code {
    private string? _selectedTabIdOne;
    private string? _selectedTabIdTwo;

    private void OnSelectedTabChange( string? id )
    {
        _selectedTabIdTwo = id;
    }
}

Custom Styles

This component supports named slots that allow you to apply custom CSS to specific parts of the component.

Root: The main container for the entire tabs component.
TabList: The wrapper for all the tabs.
Tab: The individual tab that users click to switch between panels.
TabContent: The content displayed within a tab.
TabPanel: The container for the content associated with the selected tab.
Cursor: The indicator that highlights the selected tab.

You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:

Class: The CSS class names to style the wrapper.
Classes: The CSS class names to style the slots.

<div class="w-full flex flex-col">
    <LumexTabs Variant="@TabVariant.Underlined"
               Color="@ThemeColor.Primary"
               Classes="@_classes">
        <LumexTab>
            <TitleContent>
                <div class="flex items-center space-x-2">
                    <LumexIcon Icon="@Icons.Rounded.PhotoLibrary" />
                    <span>Photos</span>
                    @_chip(12)
                </div>
            </TitleContent>
        </LumexTab>
        <LumexTab>
            <TitleContent>
                <div class="flex items-center space-x-2">
                    <LumexIcon Icon="@Icons.Rounded.LibraryMusic" />
                    <span>Music</span>
                    @_chip(2)
                </div>
            </TitleContent>
        </LumexTab>
        <LumexTab>
            <TitleContent>
                <div class="flex items-center space-x-2">
                    <LumexIcon Icon="@Icons.Rounded.VideoLibrary" />
                    <span>Videos</span>
                    @_chip(7)
                </div>
            </TitleContent>
        </LumexTab>
    </LumexTabs>
</div>

@code {
    private RenderFragment<int> _chip = content =>
        @<div class="size-5 inline-flex items-center justify-center border-2 border-default-200 bg-default-100 text-default-foreground rounded-full">
            <span class="text-tiny">@content</span>
        </div>;

    private TabsSlots _classes = new()
    {
        TabList = "gap-6 w-full rounded-none p-0 border-b border-divider",
        Tab = "max-w-fit px-0 h-12",
        TabContent = "group-data-[selected=true]:text-secondary",
        Cursor = "w-full bg-secondary"
    };
}

API

See the API references below for a complete guide to all the parameters available for the components mentioned here.

Tabs

On this page