2023-07-10 19:54:13 +02:00
|
|
|
<script setup lang="ts">
|
|
|
|
|
defineProps<{
|
|
|
|
|
summary?: string;
|
|
|
|
|
}>();
|
|
|
|
|
</script>
|
|
|
|
|
<template>
|
|
|
|
|
<details class="group my-4">
|
2023-07-12 15:51:05 +02:00
|
|
|
<summary class="cursor-pointer outline-none p-2 border dark:border-slate-800 rounded-lg bg-white dark:bg-slate-700 shadow-md group-open:rounded-b-none group-open:bg-slate-200 dark:group-open:bg-slate-800 group-open:shadow-none group-open:border-b-0">
|
2023-07-10 19:54:13 +02:00
|
|
|
{{summary}}
|
|
|
|
|
</summary>
|
2023-07-12 15:51:05 +02:00
|
|
|
<div class="rounded-b-lg border dark:border-slate-800 p-3 bg-white dark:bg-slate-900 space-y-2">
|
2023-07-10 19:54:13 +02:00
|
|
|
<slot></slot>
|
|
|
|
|
</div>
|
|
|
|
|
</details>
|
|
|
|
|
</template>
|
|
|
|
|
<style scoped>
|
|
|
|
|
summary::after {
|
|
|
|
|
@apply text-sm hidden md:inline;
|
|
|
|
|
content: "（クリックで展開）";
|
|
|
|
|
}
|
|
|
|
|
</style>
|
