ver. 0.6.12

uxcore · Feb 6, 2018 · c6282cb · c6282cb
1 parent 05eef87
commit c6282cb
Show file tree

Hide file tree

Showing 8 changed files with 512 additions and 508 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -10,6 +10,7 @@
   "rules": {
     "import/no-extraneous-dependencies": "off",
     "react/jsx-no-bind": "off",
-    "react/no-unused-prop-types": "off"
+    "react/no-unused-prop-types": "off",
+    "react/forbid-prop-types": "off"
   }
 }
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,6 +1,10 @@
 # History
 ----
 
+## 0.6.12 
+
+* `NEW` support `tabBarStyle` & `tabContentStyle`
+
 ## 0.6.11
 
 * `FIXED` ink bar height 

diff --git a/README.md b/README.md
@@ -75,6 +75,8 @@ React.render(
 |animated|boolean|true|whether have animation effect when switch tab |
 |tabBarPosition|string|top|`top` `bottom` `left` `right` |
 |extraContent|ReactNode|null|the extra content on tab bar |
+|tabBarStyle|object|{}|TabBar's style |
+|tabContentStyle|object|{}|TabContent's style |
 
 
 

diff --git a/demo/TabsDemo.jsx b/demo/TabsDemo.jsx
@@ -26,10 +26,11 @@ export default class Demo extends React.Component {
     this.setState(this.state);
   }
   render() {
+    const style = { width: 1180, margin: '0 auto' };
     return (
       <div>
         <h2>大 tab,优先级最高（推荐样式）</h2>
-        <Tabs defaultActiveKey="2" onChange={callback} className="test">
+        <Tabs defaultActiveKey="2" onChange={callback} className="test" tabContentStyle={style}>
           <TabPane tab="tab 1" key="1">选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一选项卡一</TabPane>
           <TabPane tab="tab 2" key="2">选项卡二</TabPane>
           <TabPane tab="tab 3" key="3">选项卡三</TabPane>

diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
     <title>uxcore-tabs</title>
-    <link rel="stylesheet" href="./node_modules/uxcore-kuma/dist/blue.css">
+    <!-- <link rel="stylesheet" href="./node_modules/uxcore-kuma/dist/blue.css"> -->
     <link rel="stylesheet" type="text/css" href="//alinw.alicdn.com/??platform/common/s/1.1/global/global.css">
     <link rel="stylesheet" href="./dist/demo.css">
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "uxcore-tabs",
- "version": "0.6.11",
+ "version": "0.6.12",
  "description": "easy tab component based on react",
  "main": "build/index.js",
  "scripts": {

diff --git a/src/Tabs.jsx b/src/Tabs.jsx
@@ -31,7 +31,7 @@ class Tabs extends React.Component {
 
   render() {
     const { props } = this;
-    const { onTabClick, extraContent, animated, prefixCls } = props;
+    const { onTabClick, extraContent, animated, prefixCls, tabBarStyle, tabContentStyle } = props;
     return (
       <RcTabs
         {...props}
@@ -44,9 +44,10 @@ class Tabs extends React.Component {
           <ScrollableInkTabBar
             extraContent={extraContent}
             onTabClick={onTabClick}
+            style={tabBarStyle}
           />
         )}
-        renderTabContent={() => <TabContent animated={animated} />}
+        renderTabContent={() => <TabContent animated={animated} style={tabContentStyle} />}
       />
     );
   }
@@ -59,6 +60,8 @@ Tabs.propTypes = {
   type: PropTypes.oneOf(['large', 'small', 'filter', 'brick', 'open']),
   animated: PropTypes.bool,
   extraContent: PropTypes.element,
+  tabBarStyle: PropTypes.object,
+  tabContentStyle: PropTypes.object,
 };
 
 
@@ -67,6 +70,8 @@ Tabs.defaultProps = assign({}, RcTabs.defaultProps, {
   type: 'large',
   animated: true,
   onTabClick: () => {},
+  tabBarStyle: {},
+  tabContentStyle: {},
 });
 
 Tabs.displayName = 'uxcore-tabs';