Raven Accordion

An Angular component for creating simple accordions.

Features

• Option to expand multiple items simultaneously
• Uses HTML <details> element for better accessibility
• Customize color, padding, and borders with CSS custom properties

Installation

Install into your Angular project using NPM.

npm install raven-accordion --save

Import the AccordionModule into your module.

import { AccordionModule } from 'raven-accordion';

@NgModule({
  imports: [
    AccordionModule,
    // ...
  ],
  // ...
})
export class AppModule { }

Usage

Add a <raven-accordion> element to your template, and add <raven-accordion-item> elements for each item in the accordion. Then customize each item with a summary and content.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <raven-accordion [allowMultiOpen]="false">
      <raven-accordion-item summary="Heading 1" [open]="true">Item 1</raven-accordion-item>
      <raven-accordion-item summary="Heading 2">Item 2</raven-accordion-item>
      <raven-accordion-item summary="Heading 3">Item 3</raven-accordion-item>
    </raven-accordion>
  `,
  styles: []
})
export class AppComponent { }

Accordion Options

| Option | Type | Description | Default Value | :--------------- | :-------------------- | :----------------------------------------------------------- | :------------ | allowMultiOpen | boolean | Whether to allow multiple items to be open at the same time. | false | openItemNotifier | Subject<number> | Should emit an index of an item to open (see FAQ). | undefined

Accordion Item Options

| Option | Type | Description | Default Value | :------------- | :------ | :----------------------------------------------------------- | :------------ | open | boolean | Whether default state of item is open. | false

Styling

CSS variables are used for styling. Example:

:root {
  --ra-summary-padding: 1.25rem;
  --ra-content-background: #cef;
}

Available CSS Variables

| Variable | Description | Default Value | :----------------------- | :------------------------------ | :------------- | --ra-summary-padding | Padding around the summaries. | .5rem 1rem | --ra-summary-border | Border around the summaries. | 1px solid #ddd | --ra-summary-font-size | Font size of the summaries. | 1.2rem | --ra-summary-font-weight | Font weight of the summaries. | 700 | --ra-summary-color | Text color of the summaries. | #000 | --ra-summary-background | Background of the summaries. | #eee | --ra-content-padding | Padding around item content. | 1rem | --ra-content-border | Border around item content. | 1px solid #ddd | --ra-content-font-size | Font size of item content. | 1rem | --ra-content-color | Text color of item content. | #000 | --ra-content-background | Background of item content. | #fff

FAQ

How do I open accordion items programmatically?

If you provide a Subject<number> to the openItemNotifier property of the RavenAccordion, you may emit a value that represents the index of the accordion item to open. Here's an example:

HTML Template

<raven-accordion [openItemNotifier]="itemOpened">
  <raven-accordion-item summary="Heading 1">Item 1</raven-accordion-item>
  <raven-accordion-item summary="Heading 2">Item 2</raven-accordion-item>
</raven-accordion>

<button type="button" (click)="openItem(0)">Open Item 1</button>
<button type="button" (click)="openItem(1)">Open Item 2</button>

TypeScript

export class AppComponent {
  itemOpened: Subject<number> = new Subject();

  openItem(index: number): void {
    this.itemOpened.next(index);
  }
}

Development

To contribute to the development of this component, clone its repository and run npm install. Then run ng serve -o to start a development server and to open a sample page in your browser.

License.

MIT license.