Fixed #1268 - Add lazy option to TabView and Accordion

api-generator/components/accordion.js

@@ -10,6 +10,12 @@ const AccordionProps = [
         type: "number|array",
         default: "null",
         description: "Index of the active tab or an array of indexes in multiple mode."
+    },
+    {
+        name: "lazy",
+        type: "boolean",
+        default: "false",
+        description: "When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css."
     }
 ];
 

api-generator/components/tabview.js

@@ -4,6 +4,12 @@ const TabViewProps = [
         type: "number",
         default: "0",
         description: "Index of the active tab."
+    },
+    {
+        name: "lazy",
+        type: "boolean",
+        default: "false",
+        description: "When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css."
     }
 ];
 

src/components/accordion/Accordion.vue

@@ -10,7 +10,7 @@
                 </a>
             </div>
             <transition name="p-toggleable-content">
-                <div class="p-toggleable-content" v-show="isTabActive(i)"
+                <div class="p-toggleable-content" v-if="lazy ? isTabActive(i) : true" v-show="lazy ? true: isTabActive(i)"
                     role="region" :id="getTabAriaId(i) + '_content'" :aria-labelledby="getTabAriaId(i) + '_header'">
                     <div class="p-accordion-content">
                         <component :is="tab"></component>
@@ -28,8 +28,18 @@ export default {
     name: 'Accordion',
     emits: ['tab-close', 'tab-open', 'update:activeIndex'],
     props: {
-        multiple: Boolean,
-        activeIndex: [Number,Array]
+        multiple: {
+            type: Boolean,
+            default: false
+        },
+        activeIndex: {
+            type: [Number,Array],
+            default: null
+        },
+        lazy: {
+            type: Boolean,
+            default: false
+        }
     },
     data() {
         return {

src/components/tabview/TabView.vue

@@ -10,9 +10,11 @@
             <li ref="inkbar" class="p-tabview-ink-bar"></li>
         </ul>
         <div class="p-tabview-panels">
-            <div v-for="(tab, i) of tabs" :key="getKey(tab,i)" class="p-tabview-panel" role="tabpanel" v-show="(d_activeIndex === i)">
+            <template v-for="(tab, i) of tabs" :key="getKey(tab,i)">
+                <div  class="p-tabview-panel" role="tabpanel" v-if="lazy ? (d_activeIndex === i) : true" v-show="lazy ? true: (d_activeIndex === i)">
                     <component :is="tab"></component>
                 </div>
+            </template>
         </div>
     </div>
 </template>
@@ -28,6 +30,10 @@ export default {
         activeIndex: {
             type: Number,
             default: 0
+        },
+        lazy: {
+            type: Boolean,
+            default: false
         }
     },
     data() {

src/views/accordion/AccordionDoc.vue

@@ -177,6 +177,25 @@ export default {
 	}
 }
 
+</code></pre>
+
+        <h5>Lazy Rendering</h5>
+		<p>All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling <i>lazy</i> option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is
+        useful to speed up the initial rendering performance if there are many tabs.</p>
+
+<pre v-code><code>
+&lt;Accordion lazy&gt;
+	&lt;AccordionTab header="Header I"&gt;
+		Content
+	&lt;/AccordionTab&gt;
+	&lt;AccordionTab header="Header II"&gt;
+		Content
+	&lt;/AccordionTab&gt;
+	&lt;AccordionTab header="Header III"&gt;
+		Content
+	&lt;/AccordionTab&gt;
+&lt;/Accordion&gt;
+
 </code></pre>
 
 		<h5>Properties of AccordionTab</h5>
@@ -237,6 +256,12 @@ export default {
                         <td>number|array</td>
                         <td>null</td>
                         <td>Index of the active tab or an array of indexes in multiple mode.</td>
+                    </tr>
+                    <tr>
+                        <td>lazy</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.</td>
                     </tr>
 				</tbody>
 			</table>

src/views/tabview/TabViewDoc.vue

@@ -152,6 +152,25 @@ export default {
 	}
 }
 
+</code></pre>
+
+        <h5>Lazy Rendering</h5>
+		<p>All tabs are rendered when mounted and inactive tabs are hidden with CSS. Enabling <i>lazy</i> option activates the dynamic mode where a tab is only rendered at DOM when it is active. This option is
+        useful to speed up the initial rendering performance if there are many tabs.</p>
+
+        <pre v-code><code>
+&lt;TabView lazy&gt;
+	&lt;TabPanel header="Header I"&gt;
+		Content I
+	&lt;/TabPanel&gt;
+	&lt;TabPanel header="Header II"&gt;
+		Content II
+	&lt;/TabPanel&gt;
+	&lt;TabPanel header="Header III"&gt;
+		Content III
+	&lt;/TabPanel&gt;
+&lt;/TabView&gt;
+
 </code></pre>
 
 		<h5>Properties of TabPanel</h5>
@@ -200,6 +219,12 @@ export default {
                         <td>number</td>
                         <td>0</td>
                         <td>Index of the active tab.</td>
+                    </tr>
+                    <tr>
+                        <td>lazy</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.</td>
                     </tr>
 				</tbody>
 			</table>