23 lines
790 B
Vue
23 lines
790 B
Vue
<template>
|
|
<div class="mb-4 flex flex-col gap-3">
|
|
<div @click="toggle" class="p-3 bg-gray-100 bg-opacity-50 rounded hover:bg-gray-200 text-white font-default cursor-pointer">
|
|
<slot name="header" />
|
|
</div>
|
|
<transition enter-active-class="transition-all duration-300 ease-in-out" leave-active-class="transition-all duration-300 ease-in-out" enter-from-class="opacity-0 max-h-0" enter-to-class="opacity-100 max-h-96" leave-from-class="opacity-100 max-h-96" leave-to-class="opacity-0 max-h-0">
|
|
<div v-if="isOpen" class="overflow-hidden">
|
|
<slot name="content" />
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
const isOpen = ref(false)
|
|
|
|
const toggle = () => {
|
|
isOpen.value = !isOpen.value
|
|
}
|
|
</script>
|