# 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>