feat(tabset): add lazyLoad property to nb-tab so that it loads co…

…ntent before it is actually shown (#227) Closes #144
akveo · Feb 13, 2018 · 270995d · 270995d
1 parent a4da289
commit 270995d
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 2 deletions.
diff --git a/docs/output.json b/docs/output.json
@@ -3723,6 +3723,24 @@
           "required": null,
           "name": "badgeText",
           "shortDescription": "Badge text to display"
+        },
+        {
+          "kind": "input",
+          "platform": null,
+          "isStatic": false,
+          "type": "boolean",
+          "required": null,
+          "name": "active",
+          "shortDescription": "Specifies active tab"
+        },
+        {
+          "kind": "input",
+          "platform": null,
+          "isStatic": false,
+          "type": "boolean",
+          "required": null,
+          "name": "lazyLoad",
+          "shortDescription": "Lazy load content before tab selection"
         }
       ],
       "methods": [],

diff --git a/e2e/tabset.e2e-spec.ts b/e2e/tabset.e2e-spec.ts
@@ -82,6 +82,22 @@ describe('nb-tabset', () => {
       });
   });
 
+  it('should lazy load tab content', () => {
+    expect(element(by.css('nb-tabset:nth-child(8) > nb-tab[tabTitle="Tab #1"] > span'))
+      .getText()).toEqual('Content #1');
+
+    expect(element(by.css('nb-tabset:nth-child(8) > nb-tab[tabTitle="Tab #2"]'))
+      .getText()).toEqual('');
+
+    const tab3 = element(by.css('nb-tabset:nth-child(8) > nb-tab[tabTitle="Tab #3"] > span'));
+    const tab3Text = 'Content #3';
+    expect(browser.executeScript('return arguments[0].innerHTML;', tab3)).toEqual(tab3Text);
+
+    const tab4 = element(by.css('nb-tabset:nth-child(8) > nb-tab[tabTitle="Tab #4"] > span'));
+    const tab4Text = 'Content #4';
+    expect(browser.executeScript('return arguments[0].innerHTML;', tab4)).toEqual(tab4Text);
+  });
+
   describe('badge', () => {
     const badgeText = '29';
     const badgesConf = {

diff --git a/src/app/tabset-test/tabset-test.component.ts b/src/app/tabset-test/tabset-test.component.ts
@@ -10,6 +10,13 @@ import { NbBadgeComponent } from 'framework/theme/components/badge/badge.compone
 
 @Component({
   selector: 'nb-tabset-test',
+  styles: [
+    `
+      nb-tabset {
+        margin-bottom: 40px;
+      }
+    `,
+  ],
   template: `
     <nb-layout>
       <nb-layout-column>
@@ -68,7 +75,6 @@ import { NbBadgeComponent } from 'framework/theme/components/badge/badge.compone
             <span>Content #3</span>
           </nb-tab>
         </nb-tabset>
-
         <nb-tabset fullWidth>
           <nb-tab tabTitle="Tab #1" badgeText="29">
             <span>Content #1</span>
@@ -127,6 +133,20 @@ import { NbBadgeComponent } from 'framework/theme/components/badge/badge.compone
             <span>Content #5</span>
           </nb-tab>
         </nb-tabset>
+        <nb-tabset>
+          <nb-tab tabTitle="Tab #1">
+            <span>Content #1</span>
+          </nb-tab>
+          <nb-tab tabTitle="Tab #2">
+            <span>Content #2</span>
+          </nb-tab>
+          <nb-tab tabTitle="Tab #3" lazyLoad>
+            <span>Content #3</span>
+          </nb-tab>
+          <nb-tab tabTitle="Tab #4" lazyLoad>
+            <span>Content #4</span>
+          </nb-tab>
+        </nb-tabset>
       </nb-layout-column>
     </nb-layout>
   `,

diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts
@@ -38,6 +38,10 @@ export class NbTabComponent {
   @HostBinding('class.content-active')
   activeValue: boolean = false;
 
+  /**
+   * Specifies active tab
+   * @returns {boolean}
+   */
   @Input()
   get active() {
     return this.activeValue;
@@ -49,6 +53,15 @@ export class NbTabComponent {
     }
   }
 
+  /**
+   * Lazy load content before tab selection
+   * @param {boolean} val
+   */
+  @Input()
+  set lazyLoad(val: boolean) {
+    this.init = convertToBoolProperty(val);
+  }
+
   /**
    * Badge text to display
    * @type string
@@ -70,7 +83,6 @@ export class NbTabComponent {
    */
   @Input() badgePosition: string;
 
-  // TODO: it makes sense to add 'lazyLoad' input to 'nb-tabset' component and make this functionality configurable
   init: boolean = false;
 }