Accordion

Preview
Usage

test 0

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste recusandae a minus accusantium perspiciatis numquam fugiat officiis esse fugit consectetur vero natus accusamus autem quos, voluptate dignissimos deserunt nemo alias! Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Id provident praesentium, incidunt, quisquam ullam numquam aliquid dolorem, quae labore dignissimos minima assumenda. Reprehenderit nostrum minima perferendis eos quisquam ipsa quo!

test 1

Id provident praesentium, incidunt, quisquam ullam numquam aliquid dolorem, quae labore dignissimos minima assumenda. Reprehenderit nostrum minima perferendis eos quisquam ipsa quo!

test 2

Id provident praesentium, incidunt, quisquam ullam numquam aliquid dolorem, quae labore dignissimos minima assumenda. Reprehenderit nostrum minima perferendis eos quisquam ipsa quo!

<script lang="ts">
  import { Accordion } from "@dxdns/feflow"
</script>

<div style="display: flex; flex-direction: column; gap: 1rem;">
  {#each ["contained", "outlined", "text"] as variant, i}
    <Accordion id="sec{i}" variant={variant as any} label={variant}>
      <div style="line-height: 1.5;">
        <h1>test {i}</h1>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste recusandae
        a minus accusantium perspiciatis numquam fugiat officiis esse fugit consectetur
        vero natus accusamus autem quos, voluptate dignissimos deserunt nemo alias!
        Lorem ipsum, dolor sit amet consectetur adipisicing elit.

        <p>
          Id provident praesentium, incidunt, quisquam ullam numquam aliquid
          dolorem, quae labore dignissimos minima assumenda. Reprehenderit
          nostrum minima perferendis eos quisquam ipsa quo!
        </p>
      </div>
    </Accordion>
  {/each}
</div>