Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <template>
<div class="collapsible" :class="props?.size ?? 'sm'">
<Button className="collapsible-header" :size="props?.size ?? 'sm'" :handleClick="() => (isOpen = !isOpen)">
<span>{{ props?.title ?? '' }}</span>
<VIcon name="fa-chevron-down" :class="{ rotated: isOpen }" class="arrow-icon" />
</Button>
<transition name="fade">
<div v-show="isOpen" class="collapsible-content">
<slot />
</div>
</transition>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { ICollapsiblePanel } from './CollapsiblePanel.model';
import './CollapsiblePanel.scss';
const props = defineProps<ICollapsiblePanel>();
const isOpen = ref(false);
</script>
|