TwitterGithub

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Yes. It adheres to the WAI-ARIA design pattern.

Yes. It comes with default styles that match the other components' aesthetics.

Yes. It's animated by default, but you can disable it if you prefer.

Installation

npx nx g @spartan-ng/cli:ui accordion

Usage

Brain API

BrnAccordionContentComponent

Selector: brn-accordion-content

BrnAccordionItemDirective

Selector: [brnAccordionItem]

ExportAs: brnAccordionItem

Inputs

PropTypeDefaultDescription isOpened unknown false -

BrnAccordionTriggerDirective

Selector: [brnAccordionTrigger]

BrnAccordionDirective

Selector: [brnAccordion]

ExportAs: brnAccordion

Inputs

PropTypeDefaultDescription type 'single' | 'multiple' single - dir 'ltr' | 'rtl' | null null - orientation 'horizontal' | 'vertical' vertical -

Helm API

HlmAccordionContentComponent

Selector: hlm-accordion-content

Inputs

PropTypeDefaultDescription class ClassValue --

HlmAccordionIconDirective

Selector: ng-icon[hlmAccordionIcon], ng-icon[hlmAccIcon]

Inputs

PropTypeDefaultDescription class ClassValue --

HlmAccordionItemDirective

Selector: [hlmAccordionItem],brn-accordion-item[hlm],hlm-accordion-item

Inputs

PropTypeDefaultDescription class ClassValue --

HlmAccordionTriggerDirective

Selector: [hlmAccordionTrigger]

Inputs

PropTypeDefaultDescription class ClassValue --

HlmAccordionDirective

Selector: [hlmAccordion], hlm-accordion

Inputs

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

Yes. It adheres to the WAI-ARIA design pattern.

Yes. It comes with default styles that match the other components' aesthetics.

Yes. It's animated by default, but you can disable it if you prefer.

Alert