<template>
<div class="flex flex-wrap">
<div class="w-full">
<ul class="flex mb-0 list-none flex-wrap pt-3 pb-4 flex-row">
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
<a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal" @click="currentTab='home'" :class="{'text-cyan-600 bg-white': currentTab!=='home' , 'text-white bg-cyan-600': currentTab=='home'}">
خانه
</a>
</li>
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
<a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal" @click="currentTab='profile'" :class="{'text-cyan-600 bg-white': currentTab!=='profile' , 'text-white bg-cyan-600': currentTab=='profile'}">
پروفایل
</a>
</li>
<li class="-mb-px mr-2 last:mr-0 flex-auto text-center">
<a class="text-xs font-bold uppercase px-5 py-3 shadow-lg rounded block leading-normal" @click="currentTab='setting'" :class="{'text-cyan-600 bg-white': currentTab!=='setting' , 'text-white bg-cyan-600': currentTab=='setting'}">
تنظیمات
</a>
</li>
</ul>
<div class="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
<div class="px-4 py-5 flex-auto">
<div class="tab-content tab-space">
<div v-if="currentTab='home' " :class="{'hidden': currentTab !== 'home', 'block': currentTab == 'home'}">
<p>
تولید محتوای خانه
</p>
</div>
<div v-else-if="currentTab='profile' " :class="{'hidden': currentTab !== 'profile', 'block': currentTab =='profile'}">
<p>
تولید محتوای پروفایل
</p>
</div>
<div v-else :class="{'hidden': currentTab !=='setting', 'block': currentTab == 'setting'}">
<p>
تولید محتوای تنظیمات
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "pink-tabs",
data() {
return {
currentTab: 'home'
}
},
methods: {
}
}
</script>
سلام دوستان اگر امکانش هست در دیباک گردن این کدها به من کمک کنید
ممنونم
به محمد لشگری کمک کنید تا مشکل خودش را حل کند؛ اینطور میتوانیم با هم پیشرفت کنیم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟