Merge pull request #316 from emielbeinema/lazy-load-tab

Add lazy-load property to `TabContent`

docs/README.md

@@ -141,6 +141,13 @@ props: {
     type: String,
     default: ''
   },
+  /***
+   * Only render the content when the tab is active
+   */
+  lazy: {
+    type: Boolean,
+    default: false
+  },
   /***
    * Function to execute before tab switch. Return value must be boolean
    * If the return result is false, tab switch is restricted

src/components/TabContent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="active" class="wizard-tab-container"
+  <div v-show="active" v-if="!lazy || active" class="wizard-tab-container"
        role="tabpanel"
        :id="tabId"
        :aria-hidden="!active"
@@ -23,6 +23,13 @@
         type: String,
         default: ''
       },
+      /***
+       * Only render the content when the tab is active
+       */
+      lazy: {
+        type: Boolean,
+        default: false
+      },
       /***
        * Function to execute before tab switch. Return value must be boolean
        * If the return result is false, tab switch is restricted