From 6f04d7c1a7199895b0607537128ff1eb54bfb445 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 14 Dec 2015 16:30:15 +0800
Subject: [PATCH] Add type=card tabs

---
 components/tabs/demo/card.md | 24 +++++++++++++
 components/tabs/index.jsx    | 23 ++++++------
 style/components/tabs.less   | 69 ++++++++++++++++++++++--------------
 3 files changed, 80 insertions(+), 36 deletions(-)
 create mode 100644 components/tabs/demo/card.md

diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md
new file mode 100644
index 0000000000..ab372c4c74
--- /dev/null
+++ b/components/tabs/demo/card.md
@@ -0,0 +1,24 @@
+# 卡片式页签
+
+- order: 8
+
+另一种样式的页签，常用于容器顶部，可添加和关闭新标签，不提供对应的垂直样式。
+
+---
+
+````jsx
+import { Tabs } from 'antd';
+const TabPane = Tabs.TabPane;
+
+function callback(key) {
+  console.log(key);
+}
+
+ReactDOM.render(
+  <Tabs onChange={callback} type="card">
+    <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
+    <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
+    <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
+  </Tabs>
+, document.getElementById('components-tabs-demo-card'));
+````
diff --git a/components/tabs/index.jsx b/components/tabs/index.jsx
index fc9771a013..70f7338c19 100644
--- a/components/tabs/index.jsx
+++ b/components/tabs/index.jsx
@@ -1,26 +1,29 @@
 import Tabs from 'rc-tabs';
 import React from 'react';
-const prefixCls = 'ant-tabs';
+import classNames from 'classnames';
 
 class AntTabs extends React.Component {
   render() {
-    let className = (this.props.className || '');
-    let animation = this.props.animation;
-    if (this.props.size === 'small' || this.props.size === 'mini') {
-      className += ' ' + prefixCls + '-mini';
-    }
-    if (this.props.tabPosition === 'left' || this.props.tabPosition === 'right') {
-      className += ' ' + prefixCls + '-vertical';
+    let { prefixCls, size, tabPosition, animation, type } = this.props;
+    let className = classNames({
+      [this.props.className]: !!this. props.className,
+      [prefixCls + '-mini']: size === 'small' || size === 'mini',
+      [prefixCls + '-vertical']: tabPosition === 'left' || tabPosition === 'right',
+      [prefixCls + '-' + type]: true,
+    });
+    if (tabPosition === 'left' || tabPosition === 'right' || type === 'card') {
       animation = null;
     }
-    return <Tabs {...this.props} className={className} animation={animation}/>;
+    return <Tabs {...this.props} className={className} animation={animation} />;
   }
 }
 
 AntTabs.defaultProps = {
-  prefixCls: prefixCls,
+  prefixCls: 'ant-tabs',
   size: 'default',
   animation: 'slide-horizontal',
+  type: 'line', // or 'card',
+  closable: false,
 };
 
 AntTabs.TabPane = Tabs.TabPane;
diff --git a/style/components/tabs.less b/style/components/tabs.less
index 60443c2dab..28b2e6f9a5 100644
--- a/style/components/tabs.less
+++ b/style/components/tabs.less
@@ -8,6 +8,7 @@
   position: relative;
   overflow: hidden;
   .clearfix;
+  color: @text-color;
 
   &-ink-bar {
     z-index: 1;
@@ -30,7 +31,7 @@
   }
 
   &-tabs-bar {
-    border-bottom: 1px solid #e9e9e9;
+    border-bottom: 1px solid @border-color-base;
     margin-bottom: 16px;
   }
 
@@ -83,10 +84,6 @@
         font-family: "anticon" !important;
       }
     }
-
-    &:hover {
-      color: tint(@primary-color, 20%);
-    }
   }
 
   &-tab-btn-disabled {
@@ -111,7 +108,6 @@
     &-icon:before {
       content: "\e601";
     }
-
     :root & {
       filter: none;
     }
@@ -146,16 +142,7 @@
       clear: both;
     }
 
-    div.@{tab-prefix-cls}-tab-active {
-      > .@{tab-prefix-cls}-tab-inner,
-      > .@{tab-prefix-cls}-tab-inner:hover {
-        color: tint(@primary-color, 20%);
-        cursor: pointer;
-        text-decoration: none;
-      }
-    }
-
-    div.@{tab-prefix-cls}-tab-disabled {
+    .@{tab-prefix-cls}-tab-disabled {
       pointer-events: none;
       cursor: default;
 
@@ -175,7 +162,16 @@
         padding: 8px 20px;
         transition: color 0.3s @ease-in-out;
         display: block;
-        color: #666;
+        cursor: pointer;
+        text-decoration: none;
+
+        &:hover {
+          color: tint(@primary-color, 20%);
+        }
+
+        &:active {
+          color: shade(@primary-color, 5%);
+        }
 
         .anticon {
           width: 14px;
@@ -183,17 +179,11 @@
           margin-right: 8px;
           line-height: 1.5;
         }
-
-      }
-
-      > .@{tab-prefix-cls}-tab-inner:hover {
-        color: tint(@primary-color, 30%);
-        cursor: pointer;
       }
+    }
 
-      > .@{tab-prefix-cls}-tab-inner:hover {
-        text-decoration: none;
-      }
+    .@{tab-prefix-cls}-tab-active > .@{tab-prefix-cls}-tab-inner {
+      color: @primary-color;
     }
   }
 
@@ -374,4 +364,31 @@
       border-right: 1px solid #e9e9e9;
     }
   }
+
+
+  // card style
+  &&-card &-ink-bar {
+    visibility: hidden;
+  }
+  &&-card &-tab {
+    margin: 0;
+    border: 1px solid @border-color-base;
+    border-bottom: 0;
+    border-radius: 2px 2px 0 0;
+    margin-right: -1px;
+    transition: border-color 0.3s @ease-in-out;
+  }
+  &&-card &-tab-inner {
+    padding: 7px 16px;
+  }
+  &&-card &-tab-active {
+    background: #fff;
+    border-top: 2px solid @primary-color;
+  }
+  &&-card &-tab-active &-tab-inner {
+    padding-top: 6px;
+  }
+  &&-card &-nav-wrap {
+    margin-bottom: 0;
+  }
 }