uptime-kuma/src/components/ToggleSection.vue
2022-04-14 01:20:54 +08:00

67 lines
1.3 KiB
Vue

<template>
<div class="my-3 py-3">
<h5 @click="isOpen = !isOpen">
<div
class="
w-50
d-flex
justify-content-between
align-items-center
pe-2
"
>
<span class="pb-2">{{ heading }}</span>
<font-awesome-icon
icon="chevron-down"
class="animated"
:class="{ open: isOpen }"
/>
</div>
</h5>
<transition name="slide-fade-up">
<div v-if="isOpen" class="mt-3">
<slot></slot>
</div>
</transition>
</div>
</template>
<script>
export default {
props: {
heading: {
type: String,
default: "",
},
defaultOpen: {
type: Boolean,
default: false,
},
},
data() {
return {
isOpen: this.defaultOpen,
};
},
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
h5::after {
content: "";
display: block;
width: 50%;
padding-top: 8px;
border-bottom: 1px solid $dark-border-color;
}
.open {
transform: rotate(180deg);
}
.animated {
transition: all 0.2s $easing-in;
}
</style>