tab 仿 chrome 风格样式 (#1453)

* tabs 新增仿 chrome 风格样式

* 去掉多余的样式

docs/zh-CN/components/tabs.md

@@ -52,7 +52,7 @@ order: 68
 }
 ```
 
-### 卡片模式
+### 卡片
 
 ```schema: scope="body"
 {
@@ -75,6 +75,31 @@ order: 68
 }
 ```
 
+### 仿 Chrome
+
+仿 Chrome tab 样式
+
+```schema: scope="body"
+{
+    "type": "tabs",
+    "mode": "chrome",
+    "tabs": [
+        {
+            "title": "选项卡1",
+            "body": "选项卡内容1"
+        },
+        {
+            "title": "选项卡2",
+            "body": "选项卡内容2"
+        },
+        {
+            "title": "选项卡3",
+            "body": "选项卡内容3"
+        }
+    ]
+}
+```
+
 ### 水平铺满
 
 ```schema: scope="body"

examples/components/Tabs/Normal.jsx

@@ -139,6 +139,27 @@ export default {
     {
       type: 'divider'
     },
+    {
+      type: 'tabs',
+      mode: 'chrome',
+      tabs: [
+        {
+          title: '选项卡1',
+          body: '选项卡内容1'
+        },
+        {
+          title: '选项卡2',
+          body: '选项卡内容2'
+        },
+        {
+          title: '选项卡3',
+          body: '选项卡内容3'
+        }
+      ]
+    },
+    {
+      type: 'divider'
+    },
     {
       type: 'tabs',
       mode: 'radio',

scss/_properties.scss

@@ -1182,7 +1182,7 @@
   --Tabs-linkMargin: 0 #{px2rem(3px)} 0 0;
   --Tabs-linkPadding: var(--gap-sm) var(--gap-base);
   --Tabs-onActive-bg: var(--background);
-  --Tabs-onActive-borderColor: #{$gray300};
+  --Tabs-onActive-borderColor: var(--borderColor);
   --Tabs-onActive-color: #{$gray700};
   --Tabs-onDisabled-color: #{$gray600};
   --Tabs-onHover-borderColor: #{$gray200};
@@ -1194,6 +1194,8 @@
   --Tabs--vertical-onActive-borderWidth: 0 0 0 #{px2rem(4px)};
   --Tabs--vertical-onActive-container-borderRight: none;
   --Tabs--vertical-onActive-container-bg: var(--Tabs--vertical-bg);
+  --Tabs--chrome-onHover-bg: #f6f7f8;
+  --Tabs--chrome-bg: #e7eaed;
 
   --TagControl-sugBtn-bg: var(--Button--default-bg);
   --TagControl-sugBtn-border: var(--Button--default-border);

scss/components/_tabs.scss

@@ -101,7 +101,7 @@
 
           &:hover,
           &:focus {
-            color: #666;
+            color: var(--primary);
             background: transparent;
             border-color: transparent;
           }
@@ -317,6 +317,71 @@
     }
   }
 
+  &--chrome {
+    > .#{$ns}Tabs-links {
+      background: var(--Tabs--chrome-bg);
+      border-bottom: 0;
+      padding-top: px2rem(8px);
+      > li {
+        position: relative;
+        margin-bottom: 0;
+        margin-right: px2rem(-18px);
+
+        > a:first-child {
+          background: none;
+          border: none;
+          position: relative;
+          z-index: 5;
+          padding: px2rem(7px) px2rem(20px) px2rem(6px);
+        }
+
+        &.is-active {
+          > a:first-child,
+          > a:first-child:hover,
+          > a:first-child:focus {
+            background: none;
+            border: none;
+          }
+        }
+
+        &:hover {
+          .chrome-tab-background {
+            z-index: 3;
+            display: block;
+          }
+          .chrome-tab-background > svg .chrome-tab-geometry {
+            fill: var(--Tabs--chrome-onHover-bg);
+          }
+        }
+
+        &.is-active {
+          .chrome-tab-background {
+            display: block;
+          }
+          .chrome-tab-background > svg .chrome-tab-geometry {
+            fill: var(--Tabs-onActive-bg);
+          }
+        }
+      }
+    }
+
+    .chrome-tab-background {
+      display: none;
+      position: absolute;
+      z-index: 4;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      pointer-events: none;
+    }
+    .chrome-tab-background > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
   &-toolbar {
     display: inline-block;
     float: right;

scss/themes/_antd-variables.scss

@@ -151,7 +151,6 @@ $Button-onDisabled-color: rgba(0, 0, 0, 0.25);
   --Tabs-linkFontSize: #{px2rem(14px)};
   --Tabs--card-bg: var(--Table-thead-bg);
   --Tabs--radio-bg: var(--white);
-  --Tabs-onActive-borderColor: #{darken($borderColor, 5%)};
   --Tabs--vertical-onActive-bg: #e7f7ff;
   --Tabs--vertical-onActive-borderWidth: 0 3px 0 0;
   --Tabs--vertical-onActive-container-bg: #fff;

scss/themes/_cxd-variables.scss

@@ -368,7 +368,8 @@ $Wizard-steps-liAfterBorder: none !important;
   --Tabs--card-onActive-borderColor: var(--white);
   --Tabs--card-bg: var(--Table-thead-bg);
   --Tabs--radio-bg: var(--white);
-  --Tabs-onActive-borderColor: #{darken($borderColor, 5%)};
+  --Tabs--chrome-onHover-bg: #fcfcfc;
+  --Tabs--chrome-bg: #f5f5f5;
 
   // Pagination
   --Pagination-fontSize: #{px2rem(12px)};

scss/themes/_dark-variables.scss

@@ -102,9 +102,10 @@ $link-color: $info;
   --Tabs--radio-bg: var(--Panel-bg);
   --Tabs-content-bg: var(--Panel-bg);
   --Tabs-onActive-bg: var(--Panel-bg);
-  --Tabs-onActive-borderColor: var(--borderColor);
   --Tabs-onActive-color: #{lighten($text-color, 10%)};
   --Tabs-onHover-borderColor: var(--Tabs-onActive-borderColor);
+  --Tabs--chrome-onHover-bg: #36383c;
+  --Tabs--chrome-bg: #333538;
   --Tooltip--attr-color: var(--text-color);
   --Transfer-title-bg: #2f2f2f;
   --TransferSelect--table-heading-bg: var(--background);

src/components/Tabs.tsx

@@ -81,8 +81,8 @@ class TabComponent extends React.PureComponent<TabProps> {
 export const Tab = themeable(TabComponent);
 
 export interface TabsProps extends ThemeProps {
-  mode: '' | 'line' | 'card' | 'radio' | 'vertical';
+  mode: '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome';
-  tabsMode?: '' | 'line' | 'card' | 'radio' | 'vertical';
+  tabsMode?: '' | 'line' | 'card' | 'radio' | 'vertical' | 'chrome';
   additionBtns?: React.ReactNode;
   onSelect?: (key: string | number) => void;
   activeKey?: string | number;
@@ -111,7 +111,7 @@ export class Tabs extends React.Component<TabsProps> {
       return;
     }
 
-    const {classnames: cx, activeKey: activeKeyProp} = this.props;
+    const {classnames: cx, activeKey: activeKeyProp, mode} = this.props;
     const {
       eventKey,
       disabled,
@@ -148,6 +148,42 @@ export class Tabs extends React.Component<TabsProps> {
             title
           )}
         </a>
+        {/* svg 来自 https://github.com/adamschwartz/chrome-tabs */}
+        {mode === 'chrome' ? (
+          <div className="chrome-tab-background">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+              <defs>
+                <symbol id="chrome-tab-geometry-left" viewBox="0 0 214 36">
+                  <path d="M17 0h197v36H0v-2c4.5 0 9-3.5 9-8V8c0-4.5 3.5-8 8-8z" />
+                </symbol>
+                <symbol id="chrome-tab-geometry-right" viewBox="0 0 214 36">
+                  <use href="#chrome-tab-geometry-left" />
+                </symbol>
+                <clipPath id="crop">
+                  <rect className="mask" width="100%" height="100%" x="0" />
+                </clipPath>
+              </defs>
+              <svg width="52%" height="100%">
+                <use
+                  href="#chrome-tab-geometry-left"
+                  width="214"
+                  height="36"
+                  className="chrome-tab-geometry"
+                />
+              </svg>
+              <g transform="scale(-1, 1)">
+                <svg width="52%" height="100%" x="-100%" y="0">
+                  <use
+                    href="#chrome-tab-geometry-right"
+                    width="214"
+                    height="36"
+                    className="chrome-tab-geometry"
+                  />
+                </svg>
+              </g>
+            </svg>
+          </div>
+        ) : null}
         {React.isValidElement(toolbar) ? toolbar : null}
       </li>
     );