59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps<{
|
|
height?: number
|
|
class?: string
|
|
activeTab?: 1 | 2
|
|
}>()
|
|
|
|
const classVal = computed(() => {
|
|
return props.class ? props.class : ''
|
|
})
|
|
const activeTab = ref(props.activeTab || 1)
|
|
|
|
function switchActiveTab() {
|
|
activeTab.value = activeTab.value === 1 ? 2 : 1
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="`content-switcher ${classVal}`" :style="height ? `height:${200}px` : ''">
|
|
<div class="wrapper">
|
|
<div :class="`item item-1 ${activeTab === 1 ? 'active' : 'inactive'}`">
|
|
<slot name="content1" />
|
|
</div>
|
|
<div :class="`nav border-slate-300 ${ activeTab == 1 ? 'border-l' : 'border-r'}`">
|
|
<button @click="switchActiveTab()" class="!p-0 w-full h-full">
|
|
<Icon :name="activeTab == 1 ? 'i-lucide-chevron-left' : 'i-lucide-chevron-right'" class="text-3xl" />
|
|
</button>
|
|
</div>
|
|
<div :class="`item item-2 ${activeTab === 2 ? 'active' : 'inactive'}`">
|
|
<slot name="content2" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
.content-switcher {
|
|
@apply overflow-hidden
|
|
}
|
|
.wrapper {
|
|
@apply flex w-[200%] h-full
|
|
}
|
|
.item {
|
|
@apply w-[calc(50%-60px)]
|
|
}
|
|
|
|
.item-1.active {
|
|
@apply ms-0 transition-all duration-500 ease-in-out
|
|
}
|
|
.item-1.inactive {
|
|
@apply -ms-[calc(50%-60px)] transition-all duration-500 ease-in-out
|
|
}
|
|
|
|
.nav {
|
|
@apply h-full w-[60px] flex flex-row items-center justify-center content-center !text-2xl overflow-hidden
|
|
}
|
|
|
|
</style>
|