Tabs
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Default
A standard tab implementation with card-based content.
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.
Vertical
Tabs displayed vertically, useful for settings or side navigation.
Account
Vertical tabs layout for better navigation in complex settings.
Password
Security settings are easily accessible here.
Password change forms would go here.
General Settings
Manage your general account preferences.
Delete Account
Once you delete your account, there is no going back. Please be certain.
Paginated
Automatically adds navigation buttons when there are too many tabs to fit.
Variants & Icons
Different visual styles and integration with Lucide icons.
Basic
Line Variant
With Icons
Icons Only
Integration
Integration with other components like inputs and buttons in the header area.
General dashboard overview and statistics.
Deep dive into data trends and user behavior.
Custom report generation and automated exports.
Installation & Usage
Installation
Imports
Basic Usage
API Reference
Brain API
The Brain component provides the core logic and accessibility for the tabs.
| Directive | Selector | Inputs |
|---|---|---|
| BrnTabs | brn-tabs |
|
Helm API
The Helm component provides the spartan/ui styling for the tabs.
| Directive | Selector | Description |
|---|---|---|
| HlmTabs | hlm-tabs | Main container for tabs. |
| HlmTabsList | hlm-tabs-list | Container for tab triggers. Supports variant="line". |
| HlmTabsTrigger | button[hlmTabsTrigger] | The button that activates a tab. |
| HlmTabsContent | [hlmTabsContent] | The content panel associated with a tab. |
| HlmTabsPaginatedList | hlm-paginated-tabs-list | Paginated alternative to HlmTabsList. |