An Angular component for creating simple accordions.
- Option to expand multiple items simultaneously
- Uses HTML
<details>element for better accessibility - Customize color, padding, and borders with CSS custom properties
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 { }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 { }| 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). | u 8F12 ndefined |
| Option | Type | Description | Default Value |
|---|---|---|---|
| open | boolean | Whether default state of item is open. | false |
CSS variables are used for styling. Example:
:root {
--ra-summary-padding: 1.25rem;
--ra-content-background: #cef;
}| 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 |
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);
}
}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.
MIT license.