Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Account
Make changes to your account here. Click save when you're done.
Password
Change your password here. After saving, you'll be logged out.
import { Component } from '@angular/core';
import { HlmButton } from '@spartan-ng/helm/button';
import {
HlmCard,
HlmCardContent,
HlmCardDescription,
HlmCardFooter,
HlmCardHeader,
HlmCardTitle,
} from '@spartan-ng/helm/card';
import { HlmInput } from '@spartan-ng/helm/input';
import { HlmLabel } from '@spartan-ng/helm/label';
import { HlmTabs, HlmTabsContent, HlmTabsList, HlmTabsTrigger } from '@spartan-ng/helm/tabs';
@Component({
selector: 'spartan-tabs-preview',
imports: [
HlmTabs,
HlmTabsList,
HlmTabsTrigger,
HlmTabsContent,
HlmCardContent,
HlmCardDescription,
HlmCard,
HlmCardFooter,
HlmCardHeader,
HlmCardTitle,
HlmLabel,
HlmInput,
HlmButton,
],
host: {
class: 'block w-full max-w-lg',
},
template: `
<hlm-tabs tab="account" class="w-full">
<hlm-tabs-list aria-label="tabs example">
<button hlmTabsTrigger="account">Account</button>
<button hlmTabsTrigger="password">Password</button>
</hlm-tabs-list>
<div hlmTabsContent="account">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Account</h3>
<p hlmCardDescription>Make changes to your account here. Click save when you're done.</p>
</div>
<p hlmCardContent>
<label class="my-4 block" hlmLabel>
Name
<input class="mt-1.5 w-full" value="Pedro Duarte" hlmInput />
</label>
<label class="my-4 block" hlmLabel>
Username
<input class="mt-1.5 w-full" placeholder="@peduarte" hlmInput />
</label>
</p>
<div hlmCardFooter>
<button hlmBtn>Save Changes</button>
</div>
</section>
</div>
<div hlmTabsContent="password">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Password</h3>
<p hlmCardDescription>Change your password here. After saving, you'll be logged out.</p>
</div>
<p hlmCardContent>
<label class="my-4 block" hlmLabel>
Old Password
<input class="mt-1.5 w-full" type="password" hlmInput />
</label>
<label class="my-4 block" hlmLabel>
New Password
<input class="mt-1.5 w-full" type="password" hlmInput />
</label>
</p>
<div hlmCardFooter>
<button hlmBtn>Save Password</button>
</div>
</section>
</div>
</hlm-tabs>
`,
})
export class TabsPreview {}Installation
npx nx g @spartan-ng/cli:ui tabs
ng g @spartan-ng/cli:ui tabs
Usage
import {
HlmTabs
HlmTabsContent
HlmTabsList
HlmTabsTrigger
} from '@spartan-ng/helm/tabs';<hlm-tabs tab="account" class="w-full">
<hlm-tabs-list class="grid w-full grid-cols-2" aria-label="tabs example">
<button hlmTabsTrigger="account">Account</button>
<button hlmTabsTrigger="password">Password</button>
</hlm-tabs-list>
<div hlmTabsContent="account">Make your account here</div>
<div hlmTabsContent="password">Change your password here</div>
</hlm-tabs>Brain API
BrnTabsContent
Selector: [brnTabsContent]
ExportAs: brnTabsContent
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| contentFor* (required) | string | - | - |
BrnTabsList
Selector: [brnTabsList]
ExportAs: brnTabsList
BrnTabsPaginatedList
Selector:
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| disablePagination | unknown | false | Whether pagination should be disabled. This can be used to avoid unnecessary layout recalculations if it's known that pagination won't be required. |
Outputs
| Prop | Type | Default | Description |
|---|---|---|---|
| selectFocusedIndex | number | - | Event emitted when the option is selected. |
| indexFocused | number | - | Event emitted when a label is focused. |
BrnTabsTrigger
Selector: button[brnTabsTrigger]
ExportAs: brnTabsTrigger
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| triggerFor* (required) | string | - | - |
| disabled | boolean | false | - |
BrnTabsDirectiveSpec
Selector:
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| showTrigger | unknown | true | - |
| showContent | unknown | true | - |
BrnTabs
Selector: [brnTabs]
ExportAs: brnTabs
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | BrnTabsOrientation | horizontal | - |
| direction | BrnTabsDirection | ltr | - |
| activationMode | BrnActivationMode | automatic | - |
| activeTab | string | undefined | undefined | - |
Outputs
| Prop | Type | Default | Description |
|---|---|---|---|
| tabActivated | string | - | - |
| activeTabChanged | string | undefined | undefined | - |
Helm API
HlmTabsContent
Selector: [hlmTabsContent]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| contentFor* (required) | string | - | - |
| class | ClassValue | - | - |
HlmTabsList
Selector: hlm-tabs-list
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | ListVariants['orientation'] | horizontal | - |
| class | ClassValue | - | - |
HlmTabsPaginatedList
Selector: hlm-paginated-tabs-list
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
| tabListClass | ClassValue | - | - |
| paginationButtonClass | ClassValue | - | - |
HlmTabsTrigger
Selector: [hlmTabsTrigger]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| triggerFor* (required) | string | - | - |
| class | ClassValue | - | - |
HlmTabs
Selector: hlm-tabs
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| tab* (required) | string | - | - |
| class | ClassValue | - | - |
Examples
Vertical
Account
Make changes to your account here. Click save when you're done.
Password
Change your password here. After saving, you'll be logged out.
Delete Account
Are you sure you want to delete your account? You cannot undo this action.
import { Component } from '@angular/core';
import { HlmButton } from '@spartan-ng/helm/button';
import {
HlmCard,
HlmCardContent,
HlmCardDescription,
HlmCardFooter,
HlmCardHeader,
HlmCardTitle,
} from '@spartan-ng/helm/card';
import { HlmInput } from '@spartan-ng/helm/input';
import { HlmLabel } from '@spartan-ng/helm/label';
import { HlmTabs, HlmTabsContent, HlmTabsList, HlmTabsTrigger } from '@spartan-ng/helm/tabs';
@Component({
selector: 'spartan-tabs-vertical',
imports: [
HlmTabs,
HlmTabsList,
HlmTabsTrigger,
HlmTabsContent,
HlmCardContent,
HlmCardDescription,
HlmCard,
HlmCardFooter,
HlmCardHeader,
HlmCardTitle,
HlmLabel,
HlmInput,
HlmButton,
],
host: {
class: 'block w-full max-w-lg min-h-[400px]',
},
template: `
<hlm-tabs tab="account" class="mx-auto flex max-w-3xl flex-row space-x-2" orientation="vertical">
<hlm-tabs-list orientation="vertical" aria-label="tabs example">
<button class="w-full" hlmTabsTrigger="account">Account</button>
<button class="w-full" hlmTabsTrigger="password">Password</button>
<button class="w-full" hlmTabsTrigger="danger">Danger Zone</button>
</hlm-tabs-list>
<div hlmTabsContent="account">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Account</h3>
<p hlmCardDescription>Make changes to your account here. Click save when you're done.</p>
</div>
<p hlmCardContent>
<label class="my-4 block" hlmLabel>
Name
<input class="mt-1.5 w-full" value="Pedro Duarte" hlmInput />
</label>
<label class="my-4 block" hlmLabel>
Username
<input class="mt-1.5 w-full" placeholder="@peduarte" hlmInput />
</label>
</p>
<div hlmCardFooter>
<button hlmBtn>Save Changes</button>
</div>
</section>
</div>
<div hlmTabsContent="password">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Password</h3>
<p hlmCardDescription>Change your password here. After saving, you'll be logged out.</p>
</div>
<p hlmCardContent>
<label class="my-4 block" hlmLabel>
Old Password
<input class="mt-1.5 w-full" type="password" hlmInput />
</label>
<label class="my-4 block" hlmLabel>
New Password
<input class="mt-1.5 w-full" type="password" hlmInput />
</label>
</p>
<div hlmCardFooter>
<button hlmBtn>Save Password</button>
</div>
</section>
</div>
<div hlmTabsContent="danger">
<section hlmCard>
<div hlmCardHeader>
<h3 hlmCardTitle>Delete Account</h3>
<p hlmCardDescription>Are you sure you want to delete your account? You cannot undo this action.</p>
</div>
<div hlmCardFooter>
<button variant="destructive" hlmBtn>Delete Account</button>
</div>
</section>
</div>
</hlm-tabs>
`,
})
export class TabsVerticalPreview {}Paginated Tabs
Use hlm-paginated-tabs-list instead of hlm-tabs-list for paginated tabs list with next and previous buttons.
Disable pagination with [disablePagination]="true" . Hides the pagination buttons and active tab is not scrolled into view.
Padding styles, applied to the tab list ( listVariants ), are not taken into account during keyboard scrolling . This affects the active tab's scrolling position and next/previous button remain enabled even when the active tab is at the start or end of the tab list.
Tab 0
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Tab 8
Tab 9
Tab 10
Tab 11
Tab 12
Tab 13
Tab 14
Tab 15
Tab 16
Tab 17
Tab 18
Tab 19
Tab 20
Tab 21
Tab 22
Tab 23
Tab 24
Tab 25
Tab 26
Tab 27
Tab 28
Tab 29
import { Component, input } from '@angular/core';
import { HlmTabs, HlmTabsContent, HlmTabsPaginatedList, HlmTabsTrigger } from '@spartan-ng/helm/tabs';
@Component({
selector: 'spartan-tabs-paginated',
imports: [HlmTabs, HlmTabsPaginatedList, HlmTabsTrigger, HlmTabsContent],
host: {
class: 'block w-full max-w-lg min-h-[150px]',
},
template: `
<hlm-tabs [tab]="activeTab()" class="w-full">
<hlm-paginated-tabs-list>
@for (tab of lotsOfTabs; track tab) {
<button [hlmTabsTrigger]="tab">{{ tab }}</button>
}
</hlm-paginated-tabs-list>
@for (tab of lotsOfTabs; track tab) {
<div [hlmTabsContent]="tab">{{ tab }}</div>
}
</hlm-tabs>
`,
})
export class TabsPaginatedPreview {
public readonly activeTab = input('Tab 0');
public readonly lotsOfTabs = Array.from({ length: 30 })
.fill(0)
.map((_, index) => `Tab ${index}`);
}