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 { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import {
HlmCardContentDirective,
HlmCardDescriptionDirective,
HlmCardDirective,
HlmCardFooterDirective,
HlmCardHeaderDirective,
HlmCardTitleDirective,
} from '@spartan-ng/ui-card-helm';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import {
HlmTabsComponent,
HlmTabsContentDirective,
HlmTabsListComponent,
HlmTabsTriggerDirective,
} from '@spartan-ng/ui-tabs-helm';
@Component({
selector: 'spartan-tabs-preview',
standalone: true,
imports: [
HlmTabsComponent,
HlmTabsListComponent,
HlmTabsTriggerDirective,
HlmTabsContentDirective,
HlmCardContentDirective,
HlmCardDescriptionDirective,
HlmCardDirective,
HlmCardFooterDirective,
HlmCardHeaderDirective,
HlmCardTitleDirective,
HlmLabelDirective,
HlmInputDirective,
HlmButtonDirective,
],
host: {
class: 'block w-full max-w-lg',
},
template: `
<hlm-tabs tab="account" class="w-full">
<hlm-tabs-list class="w-full grid grid-cols-2" 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="block my-4" hlmLabel>
Name
<input class="mt-1.5 w-full" value="Pedro Duarte" hlmInput />
</label>
<label class="block my-4" 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="block my-4" hlmLabel>
Old Password
<input class="mt-1.5 w-full" type="password" hlmInput />
</label>
<label class="block my-4" 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 TabsPreviewComponent {}Installation
npx nx g @spartan-ng/cli:ui tabs
ng g @spartan-ng/cli:ui tabs
Usage
import {
HlmTabsComponent,
HlmTabsContentDirective,
HlmTabsListComponent,
HlmTabsTriggerDirective,
} from '@spartan-ng/ui-tabs-helm';<hlm-tabs tab='account' class='block max-w-3xl mx-auto'>
<hlm-tabs-list class='w-full grid 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>Examples
Default
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 { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import {
HlmCardContentDirective,
HlmCardDescriptionDirective,
HlmCardDirective,
HlmCardFooterDirective,
HlmCardHeaderDirective,
HlmCardTitleDirective,
} from '@spartan-ng/ui-card-helm';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import {
HlmTabsComponent,
HlmTabsContentDirective,
HlmTabsListComponent,
HlmTabsTriggerDirective,
} from '@spartan-ng/ui-tabs-helm';
@Component({
selector: 'spartan-tabs-preview',
standalone: true,
imports: [
HlmTabsComponent,
HlmTabsListComponent,
HlmTabsTriggerDirective,
HlmTabsContentDirective,
HlmCardContentDirective,
HlmCardDescriptionDirective,
HlmCardDirective,
HlmCardFooterDirective,
HlmCardHeaderDirective,
HlmCardTitleDirective,
HlmLabelDirective,
HlmInputDirective,
HlmButtonDirective,
],
host: {
class: 'block w-full max-w-lg',
},
template: `
<hlm-tabs tab="account" class="w-full">
<hlm-tabs-list class="w-full grid grid-cols-2" 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="block my-4" hlmLabel>
Name
<input class="mt-1.5 w-full" value="Pedro Duarte" hlmInput />
</label>
<label class="block my-4" 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="block my-4" hlmLabel>
Old Password
<input class="mt-1.5 w-full" type="password" hlmInput />
</label>
<label class="block my-4" 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 TabsPreviewComponent {}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 { HlmBadgeDirective } from '@spartan-ng/ui-badge-helm';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import {
HlmCardContentDirective,
HlmCardDescriptionDirective,
HlmCardDirective,
HlmCardFooterDirective,
HlmCardHeaderDirective,
HlmCardTitleDirective,
} from '@spartan-ng/ui-card-helm';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import {
HlmTabsComponent,
HlmTabsContentDirective,
HlmTabsListComponent,
HlmTabsTriggerDirective,
} from '@spartan-ng/ui-tabs-helm';
@Component({
selector: 'spartan-tabs-vertical',
standalone: true,
imports: [
HlmTabsComponent,
HlmTabsListComponent,
HlmTabsTriggerDirective,
HlmTabsContentDirective,
HlmCardContentDirective,
HlmCardDescriptionDirective,
HlmCardDirective,
HlmCardFooterDirective,
HlmCardHeaderDirective,
HlmCardTitleDirective,
HlmLabelDirective,
HlmInputDirective,
HlmButtonDirective,
HlmBadgeDirective,
],
host: {
class: 'block w-full max-w-lg min-h-[400px]',
},
template: `
<hlm-tabs tab="account" class="flex flex-row max-w-3xl mx-auto 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="block my-4" hlmLabel>
Name
<input class="mt-1.5 w-full" value="Pedro Duarte" hlmInput />
</label>
<label class="block my-4" 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="block my-4" hlmLabel>
Old Password
<input class="mt-1.5 w-full" type="password" hlmInput />
</label>
<label class="block my-4" 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 TabsVerticalPreviewComponent {}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 {
HlmTabsComponent,
HlmTabsContentDirective,
HlmTabsPaginatedListComponent,
HlmTabsTriggerDirective,
} from '@spartan-ng/ui-tabs-helm';
@Component({
selector: 'spartan-tabs-paginated',
standalone: true,
imports: [HlmTabsComponent, HlmTabsPaginatedListComponent, HlmTabsTriggerDirective, HlmTabsContentDirective],
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 TabsPaginatedPreviewComponent {
activeTab = input('Tab 0');
lotsOfTabs = Array.from({ length: 30 }).fill(0).map((_, index) => `Tab ${index}`);
}