Version:

Install ​

shell
npm i @mate-angular/accordion

Import ​

typescript
import { MateAccordionComponent, MateAccordionPanelComponent } from '@mate-angular/accordion';

Variants ​

Default ​

html
<mate-accordion-ng>
  <mate-accordion-panel-ng titleText="Panel 1">Content 1</mate-accordion-panel-ng>
  <mate-accordion-panel-ng titleText="Panel 2">Content 2</mate-accordion-panel-ng>
  <mate-accordion-panel-ng titleText="Panel 3">Content 3</mate-accordion-panel-ng>
</mate-accordion-ng>

With opened index ​

html
<mate-accordion-ng [opened]="1">
  <mate-accordion-panel-ng titleText="Panel 1">Content 1</mate-accordion-panel-ng>
  <mate-accordion-panel-ng titleText="Panel 2">Content 2</mate-accordion-panel-ng>
</mate-accordion-ng>

With badges and action icons ​

html
<mate-accordion-ng>
  <mate-accordion-panel-ng titleText="Panel 1">
    <span slot="title" theme="badge success">Active</span>
    <vaadin-button slot="action" theme="icon" (click)="onEdit()">
      <span theme="icon">edit</span>
    </vaadin-button>
    Content 1
  </mate-accordion-panel-ng>
</mate-accordion-ng>