diff --git a/src/components/accordion/Accordion.vue b/src/components/accordion/Accordion.vue index 43d4e2241..0d77763b0 100755 --- a/src/components/accordion/Accordion.vue +++ b/src/components/accordion/Accordion.vue @@ -99,23 +99,27 @@ export default { const active = this.isTabActive(i); return ['p-accordion-toggle-icon pi', {'pi-chevron-right': !active, 'pi-chevron-down': active}]; }, - childIsAccordionTab(child) { + isAccordionTab(child) { return child.type.name === 'accordiontab' } - }, computed: { tabs() { const tabs = [] this.$slots.default().forEach(child => { - if (this.childIsAccordionTab(child)) tabs.push(child) - else if (child.children.length > 0) + if (this.isAccordionTab(child)) { + tabs.push(child); + } + else if (child.children.length > 0) { child.children.forEach(nestedChild => { - if (this.childIsAccordionTab(nestedChild)) tabs.push(nestedChild) - }) + if (this.childIsAccordionTab(nestedChild)) { + tabs.push(nestedChild) + } + }); + } } ) - return tabs + return tabs; }, ariaId() { return UniqueComponentId(); diff --git a/src/views/accordion/AccordionDemo.vue b/src/views/accordion/AccordionDemo.vue index 3e4a63e06..ff745bc9d 100755 --- a/src/views/accordion/AccordionDemo.vue +++ b/src/views/accordion/AccordionDemo.vue @@ -105,6 +105,13 @@ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.

+ +
Dynamic Tabs
+ + +

{{tab.content}}

+
+
@@ -118,7 +125,27 @@ import AccordionDoc from './AccordionDoc'; 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.` + } + ] } }, components: { diff --git a/src/views/accordion/AccordionDoc.vue b/src/views/accordion/AccordionDoc.vue index 819b8f462..635e0c31c 100755 --- a/src/views/accordion/AccordionDoc.vue +++ b/src/views/accordion/AccordionDoc.vue @@ -162,6 +162,34 @@ export default { } } + + +
Dynamic Tabs
+

Tabs can be generated dynamically using the standard v-for directive.

+
+
+
+ +
+
+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 AccordionTab
@@ -389,6 +417,13 @@ export default { Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p> </AccordionTab> </Accordion> + +<h5>Dynamic Tabs</h5> +<Accordion> + <AccordionTab v-for="tab in tabs" :key="tab.title" :header="tab.title"> + <p>{{tab.content}}</p> + </AccordionTab> +</Accordion> @@ -397,7 +432,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.` + } + ] } } }