Migrated TabView
Cagatay Civici
parent
83cdae66aa
commit
4a56b810fd
|
|
@ -21,6 +21,14 @@ export default {
|
|||
active(newValue) {
|
||||
this.d_active = newValue;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (!this.$parent.tabs.includes(this)) {
|
||||
this.$parent.tabs.push(this);
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$parent.tabs = this.$parent.tabs.filter(tab => tab !== this);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<li role="presentation" v-for="(tab, i) of tabs" :key="tab.header || i" :class="[{'p-highlight': (tab.d_active), 'p-disabled': tab.disabled}]">
|
||||
<a role="tab" class="p-tabview-nav-link" @click="onTabClick($event, tab)" @keydown="onTabKeydown($event, tab)" :tabindex="tab.disabled ? null : '0'" :aria-selected="tab.d_active" v-ripple>
|
||||
<span class="p-tabview-title" v-if="tab.header">{{tab.header}}</span>
|
||||
<TabPanelHeaderSlot :tab="tab" v-if="tab.$scopedSlots.header" />
|
||||
<TabPanelHeaderSlot :tab="tab" v-if="tab.$slots.header" />
|
||||
</a>
|
||||
</li>
|
||||
<li ref="inkbar" class="p-tabview-ink-bar"></li>
|
||||
|
|
@ -18,24 +18,16 @@
|
|||
<script>
|
||||
import DomHandler from '../utils/DomHandler';
|
||||
import Ripple from '../ripple/Ripple';
|
||||
import { h } from 'vue';
|
||||
|
||||
const TabPanelHeaderSlot = {
|
||||
functional: true,
|
||||
props: {
|
||||
tab: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
render(createElement, context) {
|
||||
return [context.props.tab.$scopedSlots['header']()];
|
||||
}
|
||||
};
|
||||
const TabPanelHeaderSlot = (props) => {
|
||||
return h(props.tab.$slots['header']);
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
d_children: []
|
||||
tabs: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -85,20 +77,17 @@ export default {
|
|||
},
|
||||
updateInkBar() {
|
||||
let tabHeader = this.$refs.nav.children[this.findActiveTabIndex()];
|
||||
this.$refs.inkbar.style.width = DomHandler.getWidth(tabHeader) + 'px';
|
||||
this.$refs.inkbar.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
|
||||
if (tabHeader) {
|
||||
this.$refs.inkbar.style.width = DomHandler.getWidth(tabHeader) + 'px';
|
||||
this.$refs.inkbar.style.left = DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
tabs() {
|
||||
return this.d_children.filter(child => child.$vnode.tag.indexOf('tabpanel') !== -1);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'TabPanelHeaderSlot': TabPanelHeaderSlot
|
||||
},
|
||||
directives: {
|
||||
'ripple': Ripple
|
||||
},
|
||||
components: {
|
||||
'TabPanelHeaderSlot': TabPanelHeaderSlot
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@
|
|||
<h5>Custom Headers</h5>
|
||||
<TabView class="tabview-custom" ref="tabview4">
|
||||
<TabPanel>
|
||||
<template slot="header">
|
||||
<template #header>
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header I</span>
|
||||
</template>
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<template slot="header">
|
||||
<template #header>
|
||||
<span>Header II</span>
|
||||
<i class="pi pi-user"></i>
|
||||
</template>
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<template slot="header">
|
||||
<template #header>
|
||||
<i class="pi pi-search"></i>
|
||||
<span>Header III</span>
|
||||
<i class="pi pi-cog"></i>
|
||||
|
|
|
|||
|
|
@ -76,14 +76,14 @@ import TabPanel from 'primevue/tabpanel';
|
|||
<CodeHighlight>
|
||||
<TabView class="tabview-custom">
|
||||
<TabPanel>
|
||||
<template slot="header">
|
||||
<template #header>
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header I</span>
|
||||
</template>
|
||||
Content I
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<template slot="header">
|
||||
<template #header>
|
||||
<span>Header II</span>
|
||||
<i class="pi pi-user"></i>
|
||||
</template>
|
||||
|
|
@ -310,7 +310,7 @@ export default {
|
|||
<h5>Custom Headers</h5>
|
||||
<TabView class="tabview-custom">
|
||||
<TabPanel>
|
||||
<template slot="header">
|
||||
<template #header>
|
||||
<i class="pi pi-calendar"></i>
|
||||
<span>Header I</span>
|
||||
</template>
|
||||
|
|
@ -319,7 +319,7 @@ export default {
|
|||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<template slot="header">
|
||||
<template #header>
|
||||
<span>Header II</span>
|
||||
<i class="pi pi-user"></i>
|
||||
</template>
|
||||
|
|
@ -328,7 +328,7 @@ export default {
|
|||
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<template slot="header">
|
||||
<template #header>
|
||||
<i class="pi pi-search"></i>
|
||||
<span>Header III</span>
|
||||
<i class="pi pi-cog"></i>
|
||||
|
|
|
|||
Loading…
Reference in New Issue