fix(module:tabs): fix nzCentered not working (#6706)

NG-ZORRO · Jun 7, 2021 · 439ff0a · 439ff0a
1 parent 36c03e3
commit 439ff0a
Show file tree

Hide file tree

Showing 16 changed files with 41 additions and 14 deletions.
diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md
@@ -1,5 +1,5 @@
 ---
-order: 10
+order: 11
 title:
   zh-CN: 卡片式页签容器
   en-US: Container of card type Tab

diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md
@@ -1,5 +1,5 @@
 ---
-order: 8
+order: 9
 title:
   zh-CN: 卡片式页签
   en-US: Card type tab

diff --git a/components/tabs/demo/centered.md b/components/tabs/demo/centered.md
@@ -0,0 +1,15 @@
+---
+order: 2
+title:
+  zh-CN: 居中
+  en-US: Centered
+---
+
+## zh-CN
+
+标签居中展示。
+
+## en-US
+
+Centered tabs.
+
diff --git a/components/tabs/demo/centered.ts b/components/tabs/demo/centered.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-tabs-centered',
+  template: `
+    <nz-tabset nzCentered>
+      <nz-tab nzTitle="Tab 1">Content of Tab Pane 1</nz-tab>
+      <nz-tab nzTitle="Tab 2">Content of Tab Pane 2</nz-tab>
+      <nz-tab nzTitle="Tab 3">Content of Tab Pane 3</nz-tab>
+    </nz-tabset>
+  `
+})
+export class NzDemoTabsCenteredComponent {}
diff --git a/components/tabs/demo/custom-add-trigger.md b/components/tabs/demo/custom-add-trigger.md
@@ -1,5 +1,5 @@
 ---
-order: 11
+order: 12
 title:
   zh-CN: 自定义新增页签触发器
   en-US: Customized trigger of new tab

diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md
@@ -1,5 +1,5 @@
 ---
-order: 9
+order: 10
 title:
   zh-CN: 新增和关闭页签
   en-US: Add & close tab

diff --git a/components/tabs/demo/extra.md b/components/tabs/demo/extra.md
@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 5
 title:
   zh-CN: 附加内容
   en-US: Extra content

diff --git a/components/tabs/demo/guard.md b/components/tabs/demo/guard.md
@@ -1,5 +1,5 @@
 ---
-order: 14
+order: 15
 title:
   zh-CN: 标签守卫
   en-US: Tab guard

diff --git a/components/tabs/demo/icon.md b/components/tabs/demo/icon.md
@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 title:
   zh-CN: 图标
   en-US: Icon

diff --git a/components/tabs/demo/lazy.md b/components/tabs/demo/lazy.md
@@ -1,5 +1,5 @@
 ---
-order: 12
+order: 13
 title:
   zh-CN: 懒加载
   en-US: LazyLoad

diff --git a/components/tabs/demo/link-router.md b/components/tabs/demo/link-router.md
@@ -1,5 +1,5 @@
 ---
-order: 13
+order: 14
 title:
   zh-CN: 路由联动
   en-US: With Router

diff --git a/components/tabs/demo/position.md b/components/tabs/demo/position.md
@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 7
 title:
   zh-CN: 位置
   en-US: Position

diff --git a/components/tabs/demo/size.md b/components/tabs/demo/size.md
@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 title:
   zh-CN: 大小
   en-US: Size

diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md
@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 4
 title:
   zh-CN: 滑动
   en-US: Slide

diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
@@ -47,14 +47,12 @@
     .@{tab-prefix-cls}-nav-list {
       position: relative;
       display: flex;
-      flex: 1 0 auto; // fix safari scroll problem
       transition: transform @animation-duration-slow;
     }
 
     // >>>>>>>> Operations
     .@{tab-prefix-cls}-nav-operations {
       display: flex;
-      flex: 1 0 auto; // fix safari scroll problem
       align-self: stretch;
 
       &-hidden {

diff --git a/components/tabs/style/position.less b/components/tabs/style/position.less
@@ -146,6 +146,7 @@
 
       .@{tab-prefix-cls}-nav-list,
       .@{tab-prefix-cls}-nav-operations {
+        flex: 1 0 auto; // fix safari scroll problem
         flex-direction: column;
       }
     }