danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/dwaring87-webdev-wedding. Marissa & David's Wedding Website!
1.3 kB
50 lines
1<script setup>
2 import RiExpand from '~icons/ri/add-circle-fill';
3 import RiCollapse from '~icons/ri/indeterminate-circle-fill';
4
5 const props = defineProps({
6 title: String
7 });
8
9 const visible = ref(false);
10</script>
11
12<template>
13 <div class="well">
14 <div class="w-full cursor-pointer flex justify-between items-center text-emerald-800/60 hover:text-emerald-800/80" @click="visible = !visible">
15 <h3>{{ title }}</h3>
16 <div class="relative h-full">
17
18 <Transition name="fade">
19 <RiExpand v-if="!visible" class="absolute top-1 right-2 text-xl" />
20 <RiCollapse v-else class="absolute top-1 right-2 text-xl" />
21 </Transition>
22 </div>
23 </div>
24 <Transition name="slide-fade">
25 <div v-if="visible">
26 <slot></slot>
27 </div>
28 </Transition>
29 </div>
30</template>
31
32<style scoped>
33 .fade-enter-active, .fade-leave-active {
34 transition: opacity 0.5s ease;
35 }
36 .fade-enter-from, .fade-leave-to {
37 opacity: 0;
38 }
39
40 .slide-fade-enter-active {
41 transition: all 0.5s ease-out;
42 }
43 .slide-fade-leave-active {
44 transition: all 0.3s ease-in;
45 }
46 .slide-fade-enter-from, .slide-fade-leave-to {
47 transform: translateY(-50px);
48 opacity: 0;
49 }
50</style>