Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
import { Component } from '@angular/core';
import {
HlmAccordionContentComponent,
HlmAccordionDirective,
HlmAccordionIconDirective,
HlmAccordionItemDirective,
HlmAccordionTriggerDirective,
} from '@spartan-ng/ui-accordion-helm';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
@Component({
selector: 'spartan-accordion-preview',
standalone: true,
imports: [
HlmAccordionDirective,
HlmAccordionItemDirective,
HlmAccordionTriggerDirective,
HlmAccordionContentComponent,
HlmAccordionIconDirective,
HlmIconComponent,
],
template: `
<div hlmAccordion>
<div hlmAccordionItem>
<button hlmAccordionTrigger>
Is it accessible?
<hlm-icon 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?
<hlm-icon hlmAccIcon />
</button>
<hlm-accordion-content>
Yes. It comes with default styles that match the other components' aesthetics.
</hlm-accordion-content>
</div>
<div hlmAccordionItem>
<button hlmAccordionTrigger>
Is it animated?
<hlm-icon hlmAccIcon />
</button>
<hlm-accordion-content>
Yes. It's animated by default, but you can disable it if you prefer.
</hlm-accordion-content>
</div>
</div>
`,
})
export class AccordionPreviewComponent {}Installation
npx nx g @spartan-ng/cli:ui accordion
ng g @spartan-ng/cli:ui accordion
Usage
import {
HlmAccordionContentComponent,
HlmAccordionDirective,
HlmAccordionIconDirective,
HlmAccordionItemDirective,
HlmAccordionTriggerDirective,
} from '@spartan-ng/ui-accordion-helm';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';<div hlmAccordion>
<div hlmAccordionItem>
<button hlmAccordionTrigger>
Is it accessible?
<hlm-icon hlmAccIcon />
</button>
<hlm-accordion-content>Yes. It adheres to the WAI-ARIA design pattern.</hlm-accordion-content>
</div>
</div>Brain API
BrnAccordionContentComponent
Selector: brn-accordion-content
BrnAccordionItemDirective
Selector: [brnAccordionItem]
Inputs
BrnAccordionTriggerDirective
Selector: [brnAccordionTrigger]
BrnAccordionDirective
Selector: [brnAccordion]
Inputs
Helm API
HlmAccordionContentComponent
Selector: hlm-accordion-content
Inputs
HlmAccordionIconDirective
Selector: hlm-icon[hlmAccordionIcon], hlm-icon[hlmAccIcon]
Inputs
HlmAccordionItemDirective
Selector: [hlmAccordionItem],brn-accordion-item[hlm],hlm-accordion-item
Inputs
HlmAccordionTriggerDirective
Selector: [hlmAccordionTrigger]
Inputs
HlmAccordionDirective
Selector: [hlmAccordion], hlm-accordion
Inputs
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 {
HlmAccordionContentComponent,
HlmAccordionDirective,
HlmAccordionIconDirective,
HlmAccordionItemDirective,
HlmAccordionTriggerDirective,
} from '@spartan-ng/ui-accordion-helm';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
@Component({
selector: 'spartan-accordion-multiple-opened',
standalone: true,
imports: [
HlmButtonDirective,
HlmAccordionDirective,
HlmAccordionItemDirective,
HlmAccordionTriggerDirective,
HlmAccordionContentComponent,
HlmAccordionIconDirective,
HlmIconComponent,
],
template: `
<div hlmAccordion type="multiple" class="pb-4">
<div hlmAccordionItem isOpened>
<button hlmAccordionTrigger>
Is it accessible?
<hlm-icon 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?
<hlm-icon 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?
<hlm-icon 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 AccordionMultipleOpenedComponent {
protected readonly _thirdOpened = signal(false);
toggleThird() {
this._thirdOpened.set(!this._thirdOpened());
}
}