cief/exchange-2.0
1
0
Fork 0
mirror of https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git synced 2026-08-29 17:34:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add TabComponent

Browse Source
This commit is contained in:
Farhan
2022-07-29 11:38:00 +08:00
parent f435b6d088
commit dbcb58225f
1 changed files with 103 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/assets/vue/components/general/elements/TabComponent.vue
+103
View File
@@ -0,0 +1,103 @@
<template>
<div class="tabsContainer" v-bind="$attrs">
<div class="row" v-if="tabPosition==='top'">
<div v-for="(tab, index) in tabs" :key="tab.name" class="col b-r b-white" >
<div class="row fs-12 text-center">
<div class="col p-t-20 p-b-20 bg-master-lighter tabButton" :tab-name="tab.name" :class=" index === activeTab ? 'active' : ''" @click="onClick(index)">
<div class="row justify-content-center m-b-5" v-if="tab.icon">
<div class="col-auto">
<span style="font-size: 2em; " :style=" tab.iconColor ? `color:${tab.iconColor}` : 'color: Grey'">
<i :class="`fa fa-${tab.icon}`"></i>
</span>
</div>
</div>
<div class="row">
<div class="col">
<div class="fs-12 m-t-5 all-caps">{{ tab.text }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" v-if="tabPosition==='top'">
<div class="col bg-white padding-25">
<div v-for="(tab, index) in tabs" :key="tab.name" class="row tabsContainer tabContent m-l-0 m-r-0" :tab-name="tab.name" :class=" index !== activeTab ? 'hide' : ''">
<slot v-if="index===activeTab || loadedTabs.has(index)" :name="tab.name"></slot>
</div>
</div>
</div>
<div v-if="tabPosition==='left' || tabPosition==='right'" class="row">
<div v-if="tabPosition==='left'" class="col-12 col-md-auto px-0">
<div class="bg-master-light tabButton m-b-5" v-for="(tab, index) in tabs" :key="tab.name" :tab-name="tab.name" :class=" index === activeTab ? 'active' : ''" @click="onClick(index)">
<div class="row align-items-center mx-0">
<div class="col-auto p-t-10 p-b-10 b-r b-grey">
<span style="font-size: 2em; " :style=" tab.iconColor ? `color:${tab.iconColor}` : 'color: Grey'">
<i :class="`fa fa-${tab.icon}`"></i>
</span>
</div>
<div class="col">
<div class="fs-12 m-t-5 all-caps m-b-5">{{ tab.text }}</div>
</div>
</div>
</div>
</div>
<div class="col bg-white p-l-25 p-r-25 p-t-15 p-b-15">
<div class="tabsContainer tabContent" v-for="(tab, index) in tabs" :key="tab.name" :tab-name="tab.name" :class=" index !== activeTab ? 'hide' : ''">
<slot v-if="index===activeTab || loadedTabs.has(index)" :name="tab.name"></slot>
</div>
</div>
<div v-if="tabPosition==='right'" class="col-12 col-md-auto px-0">
<div class="bg-master-light tabButton m-b-5" v-for="(tab, index) in tabs" :key="tab.name" :tab-name="tab.name" :class=" index === activeTab ? 'active' : ''" @click="onClick(index)">
<div class="row align-items-center mx-0">
<div class="col">
<div class="fs-12 m-t-5 all-caps m-b-5 text-right">{{ tab.text }}</div>
</div>
<div class="col-auto p-t-10 p-b-10 b-l b-grey">
<span style="font-size: 2em; " :style=" tab.iconColor ? `color:${tab.iconColor}` : 'color: Grey'">
<i :class="`fa fa-${tab.icon}`"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:{
tabs:{
type: Array,
required: true
},
tabPosition: {
type: String,
default: 'top',
validator(value) {
return ['top', 'left', 'right'].includes(value)
}
}
},
data(){
return {
activeTab: 0,
loadedTabs: new Set([0])
}
},
created(){
// console.log(this.tabs)
},
methods: {
onClick(tabIndex){
this.activeTab = tabIndex
this.loadedTabs.add(tabIndex)
}
}
}
</script>