fix(module:tabs): nzTabBarGutter is not work in vertical position (#…

…5998) close #5396
NG-ZORRO · Nov 6, 2020 · 516bf97 · 516bf97
1 parent 50f0744
commit 516bf97
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/components/tabs/tabset.component.spec.ts b/components/tabs/tabset.component.spec.ts
@@ -238,14 +238,27 @@ describe('NzTabSet', () => {
       expect(tabSetElement.classList).toContain('ant-tabs-editable-card');
     });
 
-    it('should set the correct tabBarGutter', () => {
+    it('should set the correct tabBarGutterxxx', () => {
+      fixture.detectChanges();
+
       const component = fixture.debugElement.componentInstance;
-      const tabsBtn = fixture.debugElement.queryAll(By.css('.ant-tabs-tab-btn'))!;
+      const tabsButtons = fixture.nativeElement.querySelectorAll('.ant-tabs-tab')! as HTMLElement[];
       component.tabBarGutter = 10;
       fixture.detectChanges();
 
-      tabsBtn.forEach(tab => {
-        expect(tab.nativeElement!.style.marginRight).toBe('10px');
+      expect(tabsButtons.length).toBe(3);
+
+      tabsButtons.forEach(tab => {
+        expect(tab.style.marginRight).toBe('10px');
+        expect(tab.style.marginBottom).toBe('');
+      });
+
+      component.position = 'left';
+      fixture.detectChanges();
+
+      tabsButtons.forEach(tab => {
+        expect(tab.style.marginRight).toBe('');
+        expect(tab.style.marginBottom).toBe('10px');
       });
     });
 

diff --git a/components/tabs/tabset.component.ts b/components/tabs/tabset.component.ts
@@ -79,6 +79,8 @@ let nextId = 0;
     >
       <div
         class="ant-tabs-tab"
+        [style.margin-right.px]="position === 'horizontal' ? nzTabBarGutter : null"
+        [style.margin-bottom.px]="position === 'vertical' ? nzTabBarGutter : null"
         [class.ant-tabs-tab-active]="nzSelectedIndex === i"
         [class.ant-tabs-tab-disabled]="tab.nzDisabled"
         (click)="clickNavItem(tab, i)"
@@ -87,7 +89,6 @@ let nextId = 0;
       >
         <div
           role="tab"
-          [style.margin-right.px]="nzTabBarGutter"
           [attr.tabIndex]="getTabIndex(tab, i)"
           [attr.aria-disabled]="tab.nzDisabled"
           [attr.aria-selected]="nzSelectedIndex === i && !nzHideAll"