Spartans get ready! v1 is coming!

We are very close to our first stable release. Expect more announcements in the coming weeks. v1 was made possible by our partner Zerops.

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.

Name Username

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

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>

Examples

Vertical

Account

Make changes to your account here. Click save when you're done.

Name Username

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

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}`);
}

Brain API

BrnTabsContent

Selector: [brnTabsContent]

ExportAs: brnTabsContent

Inputs

Prop	Type	Default	Description
contentFor* (required)	string	-	-

BrnTabsList

Selector: [brnTabsList]

ExportAs: brnTabsList

BrnTabsPaginatedList

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	-

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

Textarea

Table