TwitterGithub

Accordion

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

Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.

Key features include advanced processing capabilities, and an intuitive user interface designed for both beginners and experts.

We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days, while express shipping ensures delivery within 1-2 business days.

All orders are carefully packaged and fully insured. Track your shipment in real-time through our dedicated tracking portal.

We stand behind our products with a comprehensive 30-day return policy. If you're not completely satisfied, simply return the item in its original condition.

Our hassle-free return process includes free return shipping and full refunds processed within 48 hours of receiving the returned item.

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