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>
You can disable the tabs to prevent user interaction.
The disabled tabs are faded and does not respond to user clicks.
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 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.
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 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.
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>
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.
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.
Selected: photos
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.
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;
}
}