feature: add barStyle prop for rn-tabs, #676

ant-design · Dec 28, 2016 · f422c4d · f422c4d
1 parent 533e8d4
commit f422c4d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git a/components/tabs/PropsType.tsx b/components/tabs/PropsType.tsx
@@ -12,6 +12,7 @@ interface TabsProps {
   textColor?: string;
   activeTextColor?: string;
   styles?: any;
+  barStyle?: any;
   /*web only*/
   className?: string;
   prefixCls?: string;

diff --git a/components/tabs/Tabs.tsx b/components/tabs/Tabs.tsx
@@ -15,6 +15,7 @@ class Tabs extends React.Component<TabsProps, any> {
     textColor: '#000',
     activeTextColor: '#108ee9',
     styles: styles,
+    barStyle: null,
   };
 
   static TabPane: any;
@@ -66,20 +67,21 @@ class Tabs extends React.Component<TabsProps, any> {
 
   renderTabBar = () => {
     const {
-      tabBarPosition, underlineColor, activeUnderlineColor, textColor, activeTextColor, styles,
+      tabBarPosition, underlineColor, activeUnderlineColor, textColor, activeTextColor, styles, barStyle,
     } = this.props;
-    const barStyle = tabBarPosition === 'top' ? styles.barTop : styles.barBottom;
+    const barBaseStyle = tabBarPosition === 'top' ? styles.barTop : styles.barBottom;
+    const linePosition = tabBarPosition === 'top' ? {} : { top: -1 };
     return (
       <DefaultTabBar
         activeTextColor={activeTextColor}
         inactiveTextColor={textColor}
-        style={[barStyle, { borderColor: underlineColor } ]}
+        style={[barBaseStyle, { borderColor: underlineColor }, barStyle ]}
         textStyle={[styles.text]}
         tabStyle={[styles.tab]}
         underlineStyle={[styles.underline, {
-          bottom: tabBarPosition === 'top' ? 0 : null,
+          bottom: tabBarPosition === 'top' ? -1 : null,
           backgroundColor: activeUnderlineColor,
-        }]}
+        }, linePosition]}
       />
     );
   }