33 lines
977 B
Svelte
33 lines
977 B
Svelte
<script lang="ts">
|
|
export let open = false;
|
|
</script>
|
|
|
|
<div class="w-full">
|
|
<button
|
|
type="button"
|
|
class="flex items-center justify-between w-full px-2 py-2 text-left rounded hover:font-bold transition group"
|
|
on:click={() => open = !open}
|
|
aria-expanded={open}
|
|
>
|
|
<span><slot name="label"/></span>
|
|
<svg
|
|
class="w-5 h-5 ml-2 transition-transform duration-200"
|
|
style="transform: rotate({open ? 90 : 0}deg)"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
<div
|
|
class="overflow-hidden transition-all duration-300"
|
|
style="max-height: {open ? '1000px' : '0'}"
|
|
aria-hidden={!open}
|
|
>
|
|
<div class="pt-2">
|
|
<slot name="content"/>
|
|
</div>
|
|
</div>
|
|
</div> |