47 lines
1.2 KiB
Vue
47 lines
1.2 KiB
Vue
|
<template>
|
||
|
|
<div class="flex md:flex-row flex-col">
|
||
|
|
<div class="flex flex-col justify-between md:w-[40%] cursor-pointer">
|
||
|
|
<div
|
||
|
|
v-for="(el, index) in props.tabs"
|
||
|
|
:key="index"
|
||
|
|
:class="[
|
||
|
|
'w-full px-6 py-4 md:py-8 rtl:text-right text-left border-b border-gray-400 md:text-[18px] md:last:border-b-0 md:h-full flex items-center',
|
||
|
|
index === indexItem
|
||
|
|
? 'md:border-r-0 font-[700]'
|
||
|
|
: 'md:border-r font-medium',
|
||
|
|
]"
|
||
|
|
@click="
|
||
|
|
showContent(index);
|
||
|
|
useRipple($event, true);
|
||
|
|
"
|
||
|
|
>
|
||
|
|
{{ el.header }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div v-show="tabs[indexItem]" class="md:flex-1 h-auto">
|
||
|
|
<div class="flex flex-col items-start p-6 md:p-16">
|
||
|
|
<!-- Your image -->
|
||
|
|
<h1 class="my-5 font-bold text-2xl md:text-[32px]">
|
||
|
|
{{ tabs[indexItem].content.title }}
|
||
|
|
</h1>
|
||
|
|
<p class="font-ibm text-[16px] md:text-[18px]">
|
||
|
|
{{ tabs[indexItem].content.info }}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import { ref } from "vue";
|
||
|
|
|
||
|
|
const indexItem = ref(0);
|
||
|
|
|
||
|
|
function showContent(index) {
|
||
|
|
indexItem.value = index;
|
||
|
|
}
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
tabs: Object,
|
||
|
|
});
|
||
|
|
</script>
|