vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #51 - Reimplement TabView with Templating

pull/104/head
cagataycivici 2019-10-01 14:46:48 +03:00
parent 974d57b8fc
commit 6db38a3992
3 changed files with 35 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/tabview/TabView.vue
View File

@ -1,4 +1,33 @@
<template>
<div class="p-tabview p-component p-tabview-top">
<ul class="p-tabview-nav p-reset" role="tablist">
<li role="presentation" v-for="(tab, i) of tabs" :key="tab.header || i" :class="['p-unselectable-text', {'p-highlight': (tab.d_active), 'p-disabled': tab.disabled}]">
<a role="tab" @click="onTabClick($event, tab)" @keydown="onTabKeydown($event, tab)" :tabindex="tab.disabled ? null : '0'">
<span class="p-tabview-title" v-if="tab.header">{{tab.header}}</span>
<TabHeaderSlot :tab="tab" v-if="tab.$scopedSlots.header" />
</a>
</li>
</ul>
<div class="p-tabview-panels">
<slot></slot>
</div>
</div>
</template>
<script> <script>
const TabHeaderSlot = {
functional: true,
props: {
tab: {
type: null,
default: null
}
},
render(createElement, context) {
return [context.props.tab.$scopedSlots['header']()];
}
};
export default { export default {
data() { data() {
return { return {
@ -49,28 +78,8 @@ export default {
return activeTab; return activeTab;
} }
}, },
render() { components: {
return ( 'TabHeaderSlot': TabHeaderSlot
<div class="p-tabview p-component p-tabview-top">
<ul class="p-tabview-nav p-reset" role="tablist">
{
this.tabs.map(tab => {
return (
<li role="presentation" key={tab.header} class={['p-unselectable-text', {'p-highlight': (tab.d_active), 'p-disabled': tab.disabled}]}>
<a role="tab" on-click={event => this.onTabClick(event, tab)} on-keydown={event => this.onTabKeydown(event, tab)} tabindex={tab.disabled ? null : '0'}>
{tab.header && <span class="p-tabview-title">{tab.header}</span>}
{tab.$slots.header}
</a>
</li>
);
})
}
</ul>
<div class="p-tabview-panels">
{this.$slots.default}
</div>
</div>
);
} }
} }
</script> </script>

4
src/views/tabview/TabViewDemo.vue
View File

@ -30,8 +30,8 @@
<h3>Programmatic</h3> <h3>Programmatic</h3>
<div style="padding: .5em 0"> <div style="padding: .5em 0">
<Button @click="activate(0)" class="p-button-secondary" label="Activate 1st" /> <Button @click="activate(0)" class="p-button-secondary" label="Activate 1st" />
<Button @click="activate(1)" class="p-button-secondary" label="Activate 2st" /> <Button @click="activate(1)" class="p-button-secondary" label="Activate 2nd" />
<Button @click="activate(2)" class="p-button-secondary" label="Activate 3st" /> <Button @click="activate(2)" class="p-button-secondary" label="Activate 3rd" />
</div> </div>
<TabView> <TabView>

4
src/views/tabview/TabViewDoc.vue
View File

@ -258,8 +258,8 @@ export default {
&lt;h3&gt;Programmatic&lt;/h3&gt; &lt;h3&gt;Programmatic&lt;/h3&gt;
&lt;div style="padding: .5em 0"&gt; &lt;div style="padding: .5em 0"&gt;
&lt;Button @click="activate(0)" class="p-button-secondary" label="Activate 1st" /&gt; &lt;Button @click="activate(0)" class="p-button-secondary" label="Activate 1st" /&gt;
&lt;Button @click="activate(1)" class="p-button-secondary" label="Activate 2st" /&gt; &lt;Button @click="activate(1)" class="p-button-secondary" label="Activate 2nd" /&gt;
&lt;Button @click="activate(2)" class="p-button-secondary" label="Activate 3st" /&gt; &lt;Button @click="activate(2)" class="p-button-secondary" label="Activate 3rd" /&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;TabView&gt; &lt;TabView&gt;