<template>
  <div class="expander-playground">
    <v-expander class="mb-3" button-classes="btn btn-outline-secondary w-100">
      <template #header> Expand / Collapse </template>
      <h2>Eu minim eiusmod amet qui do eu amet ex proident.</h2>
      <p>
        Sint laboris ipsum cillum laborum elit consectetur cupidatat aliquip dolor sint nostrud pariatur exercitation.
        Exercitation commodo laboris nulla est do eu exercitation reprehenderit minim anim Lorem commodo voluptate.
        Velit mollit mollit consectetur nulla reprehenderit deserunt incididunt dolore mollit. Mollit esse officia
        pariatur non proident et duis dolor quis mollit anim irure dolore veniam.
      </p>
      <p>
        Consectetur eu est minim anim dolore. Fugiat in ea qui laboris velit officia deserunt nulla duis veniam. Aliquip
        aliqua exercitation enim anim mollit enim sit qui mollit ut pariatur cillum. Est incididunt ullamco minim
        consectetur sit elit incididunt mollit exercitation. Sit dolore irure irure velit minim dolor esse. Est nulla
        excepteur sit irure duis magna.
      </p>
      <p>
        Quis consectetur commodo consequat id anim cillum. Aliqua proident irure nulla cupidatat non ea veniam
        exercitation minim. Et cupidatat velit laborum enim in fugiat. Ex elit magna esse incididunt ut. Magna consequat
        incididunt ea officia. Duis nostrud Lorem ad voluptate commodo id sit exercitation.
      </p>
    </v-expander>
    <br />
    <v-accordion>
      <p data-header="Accordion Item 1">
        Sint laboris ipsum cillum laborum elit consectetur cupidatat aliquip dolor sint nostrud pariatur exercitation.
        Exercitation commodo laboris nulla est do eu exercitation reprehenderit minim anim Lorem commodo voluptate.
        Velit mollit mollit consectetur nulla reprehenderit deserunt incididunt dolore mollit. Mollit esse officia
        pariatur non proident et duis dolor quis mollit anim irure dolore veniam.
      </p>
      <p data-header="Accordion Item 2">
        Consectetur eu est minim anim dolore. Fugiat in ea qui laboris velit officia deserunt nulla duis veniam. Aliquip
        aliqua exercitation enim anim mollit enim sit qui mollit ut pariatur cillum. Est incididunt ullamco minim
        consectetur sit elit incididunt mollit exercitation. Sit dolore irure irure velit minim dolor esse. Est nulla
        excepteur sit irure duis magna.
      </p>
      <p data-header="Accordion Item 3">
        Quis consectetur commodo consequat id anim cillum. Aliqua proident irure nulla cupidatat non ea veniam
        exercitation minim. Et cupidatat velit laborum enim in fugiat. Ex elit magna esse incididunt ut. Magna consequat
        incididunt ea officia. Duis nostrud Lorem ad voluptate commodo id sit exercitation.
      </p>
    </v-accordion>
  </div>
</template>

<script setup lang="ts">
import { VExpander, VAccordion } from '../components';
</script>
