diff --git a/docs/output.json b/docs/output.json index 08588f5a12..ea032d8757 100644 --- 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 index af6112773b..2b48e1209c 100644 --- 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 index 94b019e478..6ad5e624a1 100644 --- 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: ` @@ -68,7 +75,6 @@ import { NbBadgeComponent } from 'framework/theme/components/badge/badge.compone Content #3 - Content #1 @@ -127,6 +133,20 @@ import { NbBadgeComponent } from 'framework/theme/components/badge/badge.compone Content #5 + + + Content #1 + + + Content #2 + + + Content #3 + + + Content #4 + + `, diff --git a/src/framework/theme/components/tabset/tabset.component.ts b/src/framework/theme/components/tabset/tabset.component.ts index 3ec87f45c1..ceb8a85a5f 100644 --- 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; }