Tabs

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>

<div ngTab value="account" buiTabTrigger>
  <svg><!-- user --></svg> Account
</div>

<div ngTab value="team" buiTabTrigger [disabled]="true">Team</div>

<!-- 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>

<div ngTab buiTabTrigger class="rounded-full border aria-selected:bg-primary aria-selected:text-primary-foreground">All</div>

<div ngTab buiTabTrigger class="aria-selected:bg-transparent aria-selected:text-primary aria-selected:shadow-none">Tab one</div>

<!-- 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>