Removed TabViewHeaderSlot in favor of component
parent
4a56b810fd
commit
9431e0486c
|
@ -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}]">
|
<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>
|
<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>
|
<span class="p-tabview-title" v-if="tab.header">{{tab.header}}</span>
|
||||||
<TabPanelHeaderSlot :tab="tab" v-if="tab.$slots.header" />
|
<component :is="tab.$slots.header"></component>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li ref="inkbar" class="p-tabview-ink-bar"></li>
|
<li ref="inkbar" class="p-tabview-ink-bar"></li>
|
||||||
|
@ -18,11 +18,6 @@
|
||||||
<script>
|
<script>
|
||||||
import DomHandler from '../utils/DomHandler';
|
import DomHandler from '../utils/DomHandler';
|
||||||
import Ripple from '../ripple/Ripple';
|
import Ripple from '../ripple/Ripple';
|
||||||
import { h } from 'vue';
|
|
||||||
|
|
||||||
const TabPanelHeaderSlot = (props) => {
|
|
||||||
return h(props.tab.$slots['header']);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
@ -30,9 +25,6 @@ export default {
|
||||||
tabs: []
|
tabs: []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
|
||||||
this.d_children = this.$children;
|
|
||||||
},
|
|
||||||
updated() {
|
updated() {
|
||||||
let activeTab = this.tabs[this.findActiveTabIndex()];
|
let activeTab = this.tabs[this.findActiveTabIndex()];
|
||||||
if (!activeTab && this.tabs.length) {
|
if (!activeTab && this.tabs.length) {
|
||||||
|
@ -85,9 +77,6 @@ export default {
|
||||||
},
|
},
|
||||||
directives: {
|
directives: {
|
||||||
'ripple': Ripple
|
'ripple': Ripple
|
||||||
},
|
|
||||||
components: {
|
|
||||||
'TabPanelHeaderSlot': TabPanelHeaderSlot
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue