25 lines
No EOL
570 B
Vue
25 lines
No EOL
570 B
Vue
<template>
|
|
<details class="Spoiler" :open="open" @click="toggle">
|
|
<summary><Icon class="icon" :name="icon" mode="svg" />{{ header }}</summary>
|
|
<div>
|
|
<p v-for="text in content">{{ text }}</p>
|
|
</div>
|
|
</details>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
type Props = {
|
|
header: string
|
|
content: string[]
|
|
}
|
|
|
|
defineProps<Props>()
|
|
|
|
const open = ref(false)
|
|
const toggle = (event : MouseEvent) => {
|
|
event.preventDefault()
|
|
open.value = !open.value
|
|
}
|
|
|
|
const icon = computed(() => open.value ? 'ph:minus-circle-duotone' : 'ph:plus-circle-duotone')
|
|
</script> |