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

Inputs

PropTypeDefaultDescription
contentClass ClassValue - The class to be applied to the content element.

BrnAccordionItemDirective

Selector: [brnAccordionItem]

ExportAs: brnAccordionItem

Inputs

PropTypeDefaultDescription
isOpened boolean false Whether the accordion item is opened or closed.

BrnAccordionTriggerDirective

Selector: [brnAccordionTrigger]

BrnAccordionDirective

Selector: [brnAccordion]

ExportAs: brnAccordion

Inputs

PropTypeDefaultDescription
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

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