fix(component:tabs): hide next and prev buttons when nzTabPosition is…

… left or right (NG-ZORRO#2239)
hsuanxyz · Oct 11, 2018 · 78e2747 · 78e2747
1 parent 7633c2c
commit 78e2747
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/components/tabs/nz-tabs-nav.component.ts b/components/tabs/nz-tabs-nav.component.ts
@@ -32,10 +32,7 @@ import { NzTabPositionMode } from './nz-tabset.component';
 @Component({
   selector           : '[nz-tabs-nav]',
   preserveWhitespaces: false,
-  templateUrl        : './nz-tabs-nav.component.html',
-  host               : {
-    '[class.ant-tabs-bar]': 'true'
-  }
+  templateUrl        : './nz-tabs-nav.component.html'
 })
 export class NzTabsNavComponent implements AfterContentChecked, AfterContentInit {
   private _animated = true;

diff --git a/components/tabs/nz-tabs.spec.ts b/components/tabs/nz-tabs.spec.ts
@@ -10,7 +10,7 @@ describe('tabs', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports     : [ NzTabsModule ],
-      declarations: [ NzTestTabsBasicComponent ]
+      declarations: [ NzTestTabsBasicComponent, NzTestTabsTabPositionLeftComponent ]
     });
     TestBed.compileComponents();
   }));
@@ -461,6 +461,15 @@ describe('tabs', () => {
       expect(tabs.nativeElement.scrollLeft).toBe(0);
     }));
   });
+
+  describe('init nzTabPosition to left', () => {
+    it('should next and prev buttons display abnormal', () => {
+      const fixture = TestBed.createComponent(NzTestTabsTabPositionLeftComponent);
+      fixture.detectChanges();
+      const tabs = fixture.debugElement.query(By.directive(NzTabSetComponent));
+      expect(tabs.nativeElement.querySelector('.ant-tabs-nav-container').classList).not.toContain('ant-tabs-nav-container-scrolling');
+    });
+  });
 });
 
 @Component({
@@ -541,3 +550,18 @@ export class NzTestTabsBasicComponent {
   deselect02 = jasmine.createSpy('deselect02 callback');
   array = [];
 }
+
+/** https://github.com/NG-ZORRO/ng-zorro-antd/issues/1964 **/
+@Component({
+  selector: 'nz-test-tabs-tab-position-left',
+  template: `
+    <nz-tabset nzTabPosition="left">
+      <nz-tab *ngFor="let tab of tabs" [nzTitle]="'Tab'+ tab">
+        Content of tab {{ tab }}
+      </nz-tab>
+    </nz-tabset>
+  `
+})
+export class NzTestTabsTabPositionLeftComponent {
+  tabs = [1, 2, 3];
+}
diff --git a/components/tabs/nz-tabset.component.html b/components/tabs/nz-tabset.component.html
@@ -1,4 +1,6 @@
-<div nz-tabs-nav
+<div 
+  class="ant-tabs-bar"
+  nz-tabs-nav
   role="tablist"
   tabindex="0"
   [nzType]="nzType"