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

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>

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