Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
import { Component } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import {
HlmAccordion,
HlmAccordionContent,
HlmAccordionIcon,
HlmAccordionItem,
HlmAccordionTrigger,
} from '@spartan-ng/helm/accordion';
import { HlmIcon } from '@spartan-ng/helm/icon';
@Component({
selector: 'spartan-accordion-preview',
imports: [
HlmAccordion,
HlmAccordionItem,
HlmAccordionTrigger,
HlmAccordionIcon,
HlmAccordionContent,
NgIcon,
HlmIcon,
],
template: `
<div hlmAccordion>
<div hlmAccordionItem>
<button hlmAccordionTrigger>
Product Information
<ng-icon name="lucideChevronDown" hlm hlmAccIcon />
</button>
<hlm-accordion-content>
<p>
Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it
offers unparalleled performance and reliability.
</p>
<p>
Key features include advanced processing capabilities, and an intuitive user interface designed for both
beginners and experts.
</p>
</hlm-accordion-content>
</div>
<div hlmAccordionItem>
<button hlmAccordionTrigger>
Shipping Details
<ng-icon name="lucideChevronDown" hlm hlmAccIcon />
</button>
<hlm-accordion-content>
<p>
We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days,
while express shipping ensures delivery within 1-2 business days.
</p>
<p>
All orders are carefully packaged and fully insured. Track your shipment in real-time through our dedicated
tracking portal.
</p>
</hlm-accordion-content>
</div>
<div hlmAccordionItem>
<button hlmAccordionTrigger>
Return Policy
<ng-icon name="lucideChevronDown" hlm hlmAccIcon />
</button>
<hlm-accordion-content>
<p>
We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied,
simply return the item in its original condition.
</p>
<p>
Our hassle-free return process includes free return shipping and full refunds processed within 48 hours of
receiving the returned item.
</p>
</hlm-accordion-content>
</div>
</div>
`,
})
export class AccordionPreview {}Installation
npx nx g @spartan-ng/cli:ui accordion
ng g @spartan-ng/cli:ui accordion
Usage
import { NgIcon } from '@ng-icons/core';
import {
HlmAccordionContent
HlmAccordion
HlmAccordionIcon
HlmAccordionItem
HlmAccordionTrigger
} from '@spartan-ng/helm/accordion';
import { HlmIconDirective } from '@spartan-ng/helm/icon';<div hlmAccordion>
<div hlmAccordionItem>
<button hlmAccordionTrigger>
Is it accessible?
<ng-icon name="lucideChevronDown" hlm hlmAccIcon />
</button>
<hlm-accordion-content>Yes. It adheres to the WAI-ARIA design pattern.</hlm-accordion-content>
</div>
</div>Brain API
BrnAccordionContent
Selector: brn-accordion-content
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| contentClass | ClassValue | - | The class to be applied to the content element. |
BrnAccordionItem
Selector: [brnAccordionItem]
ExportAs: brnAccordionItem
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| isOpened | boolean | false | Whether the accordion item is opened or closed. |
BrnAccordionTrigger
Selector: [brnAccordionTrigger]
BrnAccordion
Selector: [brnAccordion]
ExportAs: brnAccordion
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| type | 'single' | 'multiple' | single | Whether the accordion is in single or multiple mode. |
| dir | 'ltr' | 'rtl' | null | null | The direction of the accordion, either 'ltr' (left-to-right) or 'rtl' (right-to-left). |
| orientation | 'horizontal' | 'vertical' | vertical | The orientation of the accordion, either 'horizontal' or 'vertical'. |
Helm API
HlmAccordionContent
Selector: hlm-accordion-content
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmAccordionIcon
Selector: ng-icon[hlmAccordionIcon], ng-icon[hlmAccIcon]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmAccordionItem
Selector: [hlmAccordionItem],brn-accordion-item[hlm],hlm-accordion-item
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmAccordionTrigger
Selector: [hlmAccordionTrigger]
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
HlmAccordion
Selector: [hlmAccordion], hlm-accordion
Inputs
| Prop | Type | Default | Description |
|---|---|---|---|
| class | ClassValue | - | - |
Examples
Multiple and Opened
The type input can be set to 'multiple' to allow multiple items to be opened at the same time.
The isOpened input can be used to set the initial state of an accordion item.
import { Component, signal } from '@angular/core';
import { NgIcon } from '@ng-icons/core';
import {
HlmAccordion,
HlmAccordionContent,
HlmAccordionIcon,
HlmAccordionItem,
HlmAccordionTrigger,
} from '@spartan-ng/helm/accordion';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmIcon } from '@spartan-ng/helm/icon';
@Component({
selector: 'spartan-accordion-multiple-opened',
imports: [
HlmButton,
HlmAccordion,
HlmAccordionItem,
HlmAccordionTrigger,
HlmAccordionContent,
HlmAccordionIcon,
NgIcon,
HlmIcon,
],
template: `
<div hlmAccordion type="multiple" class="pb-4">
<div hlmAccordionItem [isOpened]="true">
<button hlmAccordionTrigger>
Is it accessible?
<ng-icon name="lucideChevronDown" hlm hlmAccIcon />
</button>
<hlm-accordion-content>Yes. It adheres to the WAI-ARIA design pattern.</hlm-accordion-content>
</div>
<div hlmAccordionItem>
<button hlmAccordionTrigger>
Is it styled?
<ng-icon name="lucideChevronDown" hlm hlmAccIcon />
</button>
<hlm-accordion-content>
Yes. It comes with default styles that match the other components' aesthetics.
</hlm-accordion-content>
</div>
<div hlmAccordionItem [isOpened]="_thirdOpened()">
<button hlmAccordionTrigger>
Is it animated?
<ng-icon name="lucideChevronDown" hlm hlmAccIcon />
</button>
<hlm-accordion-content>
Yes. It's animated by default, but you can disable it if you prefer.
</hlm-accordion-content>
</div>
</div>
<button hlmBtn (click)="toggleThird()">Toggle Third Item</button>
`,
})
export class AccordionMultipleOpened {
protected readonly _thirdOpened = signal(false);
toggleThird() {
this._thirdOpened.set(!this._thirdOpened());
}
}