Version:

Install ​

shell
npm i @mate-vue/accordion

Import ​

vue
<script setup>
import { MateAccordion, MateAccordionPanel } from '@mate-vue/accordion';
</script>

Variants ​

Panels with summary and icons ​

vue
<template>
    <MateAccordion>
        <MateAccordionPanel title-text="First panel">
            <MateBadge slot="title">Information</MateBadge>
            <MateBadge slot="title">Information</MateBadge>
            <MateButton theme="icon" slot="action">
                <MateIcon>delete</MateIcon>
            </MateButton>
            <MateButton theme="icon" slot="action">
                <MateIcon>content_copy</MateIcon>
            </MateButton>
            <span>Content</span>
        </MateAccordionPanel>
        <MateAccordionPanel disabled title-text="Disabled panel">
            <MateBadge slot="title">Information</MateBadge>
            <MateBadge slot="title">Information</MateBadge>
            <MateButton theme="icon" slot="action">
                <MateIcon>delete</MateIcon>
            </MateButton>
            <MateButton theme="icon" slot="action">
                <MateIcon>content_copy</MateIcon>
            </MateButton>
            <span>Content</span>
        </MateAccordionPanel>
    </MateAccordion>
</template>