Khafid Prayoga
87 lines
2.1 KiB
Vue
87 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
height?: number
|
|
activeTab?: 1 | 2
|
|
}>()
|
|
|
|
const activeTab = ref(props.activeTab || 1)
|
|
|
|
function handleClick(value: 1 | 2) {
|
|
activeTab.value = value
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="content-switcher" :style="`height: ${height || 200}px`">
|
|
<div :class="`${activeTab === 1 ? 'active' : 'inactive'}`">
|
|
<div class="content-wrapper">
|
|
<div>
|
|
<slot name="content1" />
|
|
</div>
|
|
</div>
|
|
<div class="content-nav">
|
|
<button @click="handleClick(1)">
|
|
<Icon name="i-lucide-chevron-right" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div :class="`${activeTab === 2 ? 'active' : 'inactive'}`">
|
|
<div class="content-nav">
|
|
<button @click="handleClick(2)">
|
|
<Icon name="i-lucide-chevron-left" />
|
|
</button>
|
|
</div>
|
|
<div class="content-wrapper">
|
|
<div>
|
|
<slot name="content2" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.content-switcher {
|
|
@apply flex overflow-hidden gap-3
|
|
}
|
|
.content-switcher > * {
|
|
@apply border border-slate-300 rounded-md flex overflow-hidden
|
|
}
|
|
|
|
.content-wrapper {
|
|
@apply p-4 2xl:p-5 overflow-hidden grow
|
|
}
|
|
.inactive .content-wrapper {
|
|
@apply p-0 w-0
|
|
}
|
|
|
|
.content-nav {
|
|
@apply h-full flex flex-row items-center justify-center content-center !text-2xl overflow-hidden
|
|
}
|
|
|
|
.content-nav button {
|
|
@apply pt-2 px-2 h-full w-full
|
|
}
|
|
|
|
/* .content-switcher .inactive > .content-wrapper {
|
|
@apply w-0 p-0 opacity-0 transition-all duration-500 ease-in-out
|
|
} */
|
|
.content-switcher .inactive {
|
|
@apply w-16 transition-all duration-500 ease-in-out
|
|
}
|
|
.content-switcher .inactive > .content-nav {
|
|
@apply w-full transition-all duration-100 ease-in-out
|
|
}
|
|
|
|
.content-switcher .active {
|
|
@apply grow transition-all duration-500 ease-in-out
|
|
}
|
|
.content-switcher .active > .content-nav {
|
|
@apply w-0 transition-all duration-100 ease-in-out
|
|
}
|
|
/* .content-switcher .active > .content-wrapper {
|
|
@apply w-full delay-1000 transition-all duration-1000 ease-in-out
|
|
} */
|
|
|
|
</style>
|