From ee0fc95e198311acdbb6609a1f376e8c38c9de0c Mon Sep 17 00:00:00 2001
From: Emiel Beinema <emiel.beinema@gmail.com>
Date: Wed, 18 Sep 2019 00:15:10 +0200
Subject: [PATCH] Add lazy-load property to `TabContent`

---
 docs/README.md                | 7 +++++++
 src/components/TabContent.vue | 9 ++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/docs/README.md b/docs/README.md
index 9975214..9081164 100644
--- a/docs/README.md
+++ b/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
diff --git a/src/components/TabContent.vue b/src/components/TabContent.vue
index c8b61ae..9e49de4 100644
--- a/src/components/TabContent.vue
+++ b/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