diff --git a/src/components/tabview/TabView.vue b/src/components/tabview/TabView.vue
index 935eea005..d38bea3e4 100755
--- a/src/components/tabview/TabView.vue
+++ b/src/components/tabview/TabView.vue
@@ -72,12 +72,29 @@ export default {
},
isTabDisabled(tab) {
return tab.props?.disabled;
+ },
+ isTabPanel(child) {
+ return child.type.name === 'tabpanel'
}
},
computed: {
tabs() {
- return this.$slots.default().filter(child => child.type.name === 'tabpanel');
- }
+ const tabs = []
+ this.$slots.default().forEach(child => {
+ if (this.isTabPanel(child)) {
+ tabs.push(child);
+ }
+ else if (child.children.length > 0) {
+ child.children.forEach(nestedChild => {
+ if (this.isTabPanel(nestedChild)) {
+ tabs.push(nestedChild)
+ }
+ });
+ }
+ }
+ )
+ return tabs;
+ },
},
directives: {
'ripple': Ripple
diff --git a/src/views/tabview/TabViewDemo.vue b/src/views/tabview/TabViewDemo.vue
index 71358cf5f..c2707103b 100755
--- a/src/views/tabview/TabViewDemo.vue
+++ b/src/views/tabview/TabViewDemo.vue
@@ -111,6 +111,15 @@
+
+
+
Dynamic Tabs
+
+
+ {{tab.content}}
+
+
+
@@ -124,7 +133,27 @@ import EventBus from '@/EventBus';
export default {
data() {
return {
- active: 0
+ active: 0,
+ tabs: [
+ {
+ title: 'Header I',
+ content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+ ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
+ },
+ {
+ title: 'Header II',
+ content: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+ architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+ voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.`
+ },
+ {
+ title: 'Header III',
+ content: `At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+ cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.`
+ }
+ ]
}
},
timeout: null,
diff --git a/src/views/tabview/TabViewDoc.vue b/src/views/tabview/TabViewDoc.vue
index be911d3f2..96ebe1248 100755
--- a/src/views/tabview/TabViewDoc.vue
+++ b/src/views/tabview/TabViewDoc.vue
@@ -136,6 +136,34 @@ export default {
}
}
+
+
+ Dynamic Tabs
+ Tabs can be generated dynamically using the standard v-for directive.
+
+
+<TabView>
+ <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
+ <p>{{tab.content}}</p>
+ </TabPanel>
+</TabView>
+
+
+
+
+
+export default {
+ data() {
+ return {
+ tabs: [
+ {title: 'Title 1', content: 'Content 1'},
+ {title: 'Title 3', content: 'Content 2'},
+ {title: 'Title 3', content: 'Content 3'}
+ ]
+ }
+ }
+}
+
Properties of TabPanel
@@ -359,6 +387,15 @@ export default {
</TabPanel>
</TabView>
</div>
+
+<div class="card">
+ <h5>Dynamic Tabs</h5>
+ <TabView>
+ <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
+ <p>{{tab.content}}</p>
+ </TabPanel>
+ </TabView>
+</div>
@@ -367,7 +404,27 @@ export default {
export default {
data() {
return {
- active: 0
+ active: 0,
+ tabs: [
+ {
+ title: 'Header I',
+ content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+ ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
+ },
+ {
+ title: 'Header II',
+ content: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
+ architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+ voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.`
+ },
+ {
+ title: 'Header III',
+ content: `At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+ cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
+ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.`
+ }
+ ]
}
}
}