feat(tabset): allow arbitrary nav type (#2592)

Closes #1661
ng-bootstrap · Aug 10, 2018 · 1e68401 · 1e68401
1 parent 0647212
commit 1e68401
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/src/tabset/tabset.spec.ts b/src/tabset/tabset.spec.ts
@@ -328,6 +328,18 @@ describe('ngb-tabset', () => {
     expect(fixture.nativeElement.querySelector('ul')).not.toHaveCssClass('nav-tabs');
   });
 
+  it('should allow arbitrary nav type', () => {
+    const fixture = createTestComponent(`
+         <ngb-tabset type="bordered">
+           <ngb-tab title="bar"><ng-template ngbTabContent>Bar</ng-template></ngb-tab>
+         </ngb-tabset>
+       `);
+
+    expect(fixture.nativeElement.querySelector('ul')).toHaveCssClass('nav-bordered');
+    expect(fixture.nativeElement.querySelector('ul')).not.toHaveCssClass('nav-pills');
+    expect(fixture.nativeElement.querySelector('ul')).not.toHaveCssClass('nav-tabs');
+  });
+
   it('should have the "justify-content-start" class by default', () => {
     const fixture = createTestComponent(`
          <ngb-tabset>

diff --git a/src/tabset/tabset.ts b/src/tabset/tabset.ts
@@ -151,9 +151,10 @@ export class NgbTabset implements AfterContentChecked {
   @Input() orientation: 'horizontal' | 'vertical';
 
   /**
-   * Type of navigation to be used for tabs. Can be one of 'tabs' or 'pills'.
+   * Type of navigation to be used for tabs. Can be one of Bootstrap defined types ('tabs' or 'pills') or an arbitrary
+   * string (for custom themes).
    */
-  @Input() type: 'tabs' | 'pills';
+  @Input() type: 'tabs' | 'pills' | string;
 
   /**
    * A tab change event fired right before the tab selection happens. See NgbTabChangeEvent for payload details