Tabs
Switch between related panels (Angular Aria).
Account
Password
import {
Tabs, TabList, Tab, TabPanel, TabContent,
BuiTabs, BuiTabList, BuiTabTrigger, BuiTabPanel,
} from 'ng-blatui';
<div ngTabs buiTabs>
<div ngTabList buiTabList selectedTab="a">
<div ngTab value="a" buiTabTrigger>Account</div>
<div ngTab value="b" buiTabTrigger>Password</div>
</div>
<div ngTabPanel value="a" buiTabPanel><ng-template ngTabContent>…</ng-template></div>
<div ngTabPanel value="b" buiTabPanel><ng-template ngTabContent>…</ng-template></div>
</div>With icons
Account
Billing
<div ngTab value="account" buiTabTrigger>
<svg><!-- user --></svg> Account
</div>Disabled tab
Account
Password
Team
<div ngTab value="team" buiTabTrigger [disabled]="true">Team</div>Line
Overview
Analytics
<!-- underlined tabs: clear the list bg, border-b the triggers -->
<div ngTabList buiTabList class="rounded-none border-b bg-transparent p-0">
<div ngTab buiTabTrigger class="rounded-none border-0 border-b-2 border-transparent aria-selected:border-b-primary aria-selected:bg-transparent aria-selected:shadow-none">Overview</div>
</div>Pills
All
Active
Archived
<div ngTab buiTabTrigger class="rounded-full border aria-selected:bg-primary aria-selected:text-primary-foreground">All</div>Simple
Tab one
Tab two
<div ngTab buiTabTrigger class="aria-selected:bg-transparent aria-selected:text-primary aria-selected:shadow-none">Tab one</div>Vertical
General
Security
Billing
<!-- flip the layout: flex-row tabs + a column tab list -->
<div ngTabs buiTabs class="flex-row gap-4">
<div ngTabList buiTabList class="h-auto flex-col">…</div>
<div ngTabPanel buiTabPanel class="flex-1">…</div>
</div>