add new tabber code

This commit is contained in:
Arina Yakovenko 2024-07-09 11:30:58 +02:00
parent 5308055a7b
commit a4ab6edca1

View File

@ -1,10 +1,11 @@
<template> <template>
<div class="flex md:flex-row flex-col text-black"> <div class="flex md:flex-row flex-col text-black">
<div class="flex flex-col justify-between cursor-pointer w-[40%]"> <div class="flex flex-col justify-between cursor-pointer w-[40%]" style="min-width: 40%;">
<div <div
v-for="(el, index) in props.tabs" v-for="(el, index) in props.tabs"
:key="index" :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" class="w-full text-left border-b border-gray-400 md:text-[18px] md:last:border-b-0 md:h-full flex items-center"
style="padding: 32px 24px;"
@click=" @click="
showContent(index); showContent(index);
useRipple($event, true); useRipple($event, true);
@ -13,7 +14,7 @@
{{ el.header }} {{ el.header }}
</div> </div>
</div> </div>
<div v-show="tabs[indexItem]" class="md:flex-1 h-auto"> <div v-show="tabs[indexItem]" class="md:flex-1 h-auto" style="padding: 20px">
<div class="flex flex-col items-start h-full justify-center p-6"> <div class="flex flex-col items-start h-full justify-center p-6">
<!-- Your image --> <!-- Your image -->
<h1 class="font-bold text-2xl md:text-[32px]"> <h1 class="font-bold text-2xl md:text-[32px]">