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="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">
<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 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='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>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="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">
<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 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="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 TabsVerticalPreviewComponent {}