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]

Inputs

PropTypeDefaultisOpenedboolean Allows to set initial state of accordion

BrnAccordionTriggerDirective

Selector: [brnAccordionTrigger]

BrnAccordionDirective

Selector: [brnAccordion]

Inputs

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

Helm API

HlmAccordionContentComponent

Selector: hlm-accordion-content

Inputs

PropTypeDefaultuserClassClassValue-

HlmAccordionIconDirective

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

Inputs

PropTypeDefaultuserClassClassValue-

HlmAccordionItemDirective

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

Inputs

PropTypeDefaultuserClassClassValue-

HlmAccordionTriggerDirective

Selector: [hlmAccordionTrigger]

Inputs

PropTypeDefaultuserClassClassValue-

HlmAccordionDirective

Selector: [hlmAccordion], hlm-accordion

Inputs

PropTypeDefaultuserClassClassValue-

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