change style or add scss

tinper-bee · Jan 10, 2017 · f99b6b8 · f99b6b8
1 parent 10213be
commit f99b6b8
Show file tree

Hide file tree

Showing 10 changed files with 276 additions and 827 deletions.
diff --git a/build/Tabs.css b/build/Tabs.css
diff --git a/build/Tabs.js b/build/Tabs.js
@@ -38,7 +38,7 @@ var defaultPropsTabs = {
 	navsuffix: '-tabs-nav',
 	contsuffix: '-tabs-content',
 	defaultActiveKey: "1",
-	count: null //记录子节点个数
+	count: null
 };
 
 var Tabs = function (_Component) {
@@ -76,7 +76,8 @@ var Tabs = function (_Component) {
 		var _this2 = this;
 
 		var arr = this.props.children;
-		var width = 100 / Number(this.props.children.length) + '%';
+		//let width = 100/Number(this.props.children.length)+'%';
+		var minWidth = "90px";
 		this.setState({
 			count: arr.length
 		});
@@ -96,7 +97,7 @@ var Tabs = function (_Component) {
 			    cont_active = (0, _classnames2["default"])('bee-content', _defineProperty({}, 'bee-content-active', e.key == stateActiveKey));
 			navArr.push(_react2["default"].createElement(
 				'div',
-				{ style: { width: width }, onClick: _this2.clickHandler, className: tab_active, 'data-id': key, key: key },
+				{ style: { minWidth: minWidth }, onClick: _this2.clickHandler, className: tab_active, 'data-id': key, key: key },
 				tab
 			));
 			contentArr.push(_react2["default"].createElement(
@@ -112,7 +113,7 @@ var Tabs = function (_Component) {
 				'div',
 				{ className: 'bee-tabs-nav' },
 				navArr,
-				_react2["default"].createElement('div', { style: { width: width }, className: 'bee-tabs-tab-child' })
+				_react2["default"].createElement('div', { style: { minWidth: minWidth }, className: 'bee-tabs-tab-child' })
 			),
 			_react2["default"].createElement(
 				'div',

diff --git a/demo/demolist/Demo6.js → demo/demolist/Demo1.js b/demo/demolist/Demo6.js → demo/demolist/Demo1.js
@@ -1,22 +1,19 @@
 /**
  *
- * @title 基础tab带有上划线
+ * @title 基础tab
  * @description
  *
  */
 
-class Demo6 extends Component {
+class Demo1 extends Component {
     render() {
         return (
-            <Tabs navtype="fadeup" contenttype="" defaultActiveKey="2">
+            <Tabs navtype="simple" contenttype="" defaultActiveKey="2">
                 <TabPanel tab="Tab 1" key="1">测试测试 1</TabPanel>
                 <TabPanel tab="Tab 2" key="2">Content of Tab Pane 2</TabPanel>
                 <TabPanel tab="Tab 3" key="3">测试测试 3</TabPanel>
                 <TabPanel tab="Tab 4" key="4">测试测试 4</TabPanel>
-                <TabPanel tab="Tab 5" key="5">测试测试 5</TabPanel>
-                <TabPanel tab="Tab 6" key="6">测试测试 6</TabPanel>
-                <TabPanel tab="Tab 7" key="7">测试测试 7</TabPanel>
             </Tabs>
         )
     }
-}
+}
diff --git a/demo/demolist/Demo2.js b/demo/demolist/Demo2.js
@@ -1,22 +1,19 @@
 /**
  *
- * @title 基础tab
+ * @title 基础tab带有上划线
  * @description
  *
  */
 
 class Demo2 extends Component {
     render() {
         return (
-            <Tabs navtype="simple" contenttype="" defaultActiveKey="2">
+            <Tabs navtype="fadeup" contenttype="" defaultActiveKey="2">
                 <TabPanel tab="Tab 1" key="1">测试测试 1</TabPanel>
                 <TabPanel tab="Tab 2" key="2">Content of Tab Pane 2</TabPanel>
                 <TabPanel tab="Tab 3" key="3">测试测试 3</TabPanel>
                 <TabPanel tab="Tab 4" key="4">测试测试 4</TabPanel>
-                <TabPanel tab="Tab 5" key="5">测试测试 5</TabPanel>
-                <TabPanel tab="Tab 6" key="6">测试测试 6</TabPanel>
-                <TabPanel tab="Tab 7" key="7">测试测试 7</TabPanel>
             </Tabs>
         )
     }
-}
+}
diff --git a/demo/demolist/Demo3.js b/demo/demolist/Demo3.js
@@ -13,10 +13,7 @@ class Demo3 extends Component {
                 <TabPanel tab="Tab 2" key="2">Content of Tab Pane 2</TabPanel>
                 <TabPanel tab="Tab 3" key="3">测试测试 3</TabPanel>
                 <TabPanel tab="Tab 4" key="4">测试测试 4</TabPanel>
-                <TabPanel tab="Tab 5" key="5">测试测试 5</TabPanel>
-                <TabPanel tab="Tab 6" key="6">测试测试 6</TabPanel>
-                <TabPanel tab="Tab 7" key="7">测试测试 7</TabPanel>
             </Tabs>
         )
     }
-}
+}
diff --git a/demo/demolist/Demo4.js b/demo/demolist/Demo4.js
@@ -13,10 +13,7 @@ class Demo4 extends Component {
                 <TabPanel tab="Tab 2" key="2">Content of Tab Pane 2</TabPanel>
                 <TabPanel tab="Tab 3" key="3">测试测试 3</TabPanel>
                 <TabPanel tab="Tab 4" key="4">测试测试 4</TabPanel>
-                <TabPanel tab="Tab 5" key="5">测试测试 5</TabPanel>
-                <TabPanel tab="Tab 6" key="6">测试测试 6</TabPanel>
-                <TabPanel tab="Tab 7" key="7">测试测试 7</TabPanel>
             </Tabs>
         )
     }
-}
+}
diff --git a/demo/demolist/Demo5.js b/demo/demolist/Demo5.js
@@ -13,10 +13,7 @@ class Demo5 extends Component {
                 <TabPanel tab="Tab 2" key="2">Content of Tab Pane 2</TabPanel>
                 <TabPanel tab="Tab 3" key="3">测试测试 3</TabPanel>
                 <TabPanel tab="Tab 4" key="4">测试测试 4</TabPanel>
-                <TabPanel tab="Tab 5" key="5">测试测试 5</TabPanel>
-                <TabPanel tab="Tab 6" key="6">测试测试 6</TabPanel>
-                <TabPanel tab="Tab 7" key="7">测试测试 7</TabPanel>
             </Tabs>
         )
     }
-}
+}
diff --git a/demo/index.js b/demo/index.js
@@ -14,88 +14,99 @@ const CARETUP = <i className="uf uf-chevronarrowup"></i>;
 /**
  *
  * @title 基础tab
- * @description 
+ * @description
  *
  */
 
-class Demo2 extends Component {
-    render () {
+class Demo1 extends Component {
+    render() {
         return (
             <Tabs navtype="simple" contenttype="" defaultActiveKey="2">
                 <TabPanel tab="Tab 1" key="1">测试测试 1</TabPanel>
                 <TabPanel tab="Tab 2" key="2">Content of Tab Pane 2</TabPanel>
                 <TabPanel tab="Tab 3" key="3">测试测试 3</TabPanel>
                 <TabPanel tab="Tab 4" key="4">测试测试 4</TabPanel>
-                <TabPanel tab="Tab 5" key="5">测试测试 5</TabPanel>
-                <TabPanel tab="Tab 6" key="6">测试测试 6</TabPanel>
-                <TabPanel tab="Tab 7" key="7">测试测试 7</TabPanel>
             </Tabs>
         )
     }
-}/**
+}
+/**
  *
- * @title 基础tab
- * @description 
+ * @title 基础tab带有上划线
+ * @description
+ *
+ */
+
+class Demo2 extends Component {
+    render() {
+        return (
+            <Tabs navtype="fadeup" contenttype="" defaultActiveKey="2">
+                <TabPanel tab="Tab 1" key="1">测试测试 1</TabPanel>
+                <TabPanel tab="Tab 2" key="2">Content of Tab Pane 2</TabPanel>
+                <TabPanel tab="Tab 3" key="3">测试测试 3</TabPanel>
+                <TabPanel tab="Tab 4" key="4">测试测试 4</TabPanel>
+            </Tabs>
+        )
+    }
+}
+/**
+ *
+ * @title 基础tab带有下划线
+ * @description
  *
  */
 
 class Demo3 extends Component {
-    render () {
+    render() {
         return (
             <Tabs navtype="fill" contenttype="" defaultActiveKey="2">
                 <TabPanel tab="Tab 1" key="1">测试测试 1</TabPanel>
                 <TabPanel tab="Tab 2" key="2">Content of Tab Pane 2</TabPanel>
                 <TabPanel tab="Tab 3" key="3">测试测试 3</TabPanel>
                 <TabPanel tab="Tab 4" key="4">测试测试 4</TabPanel>
-                <TabPanel tab="Tab 5" key="5">测试测试 5</TabPanel>
-                <TabPanel tab="Tab 6" key="6">测试测试 6</TabPanel>
-                <TabPanel tab="Tab 7" key="7">测试测试 7</TabPanel>
             </Tabs>
         )
     }
-}/**
+}
+/**
  *
- * @title 基础tab
- * @description 
+ * @title 基础tab背景梯形
+ * @description
  *
  */
 
 class Demo4 extends Component {
-    render () {
+    render() {
         return (
             <Tabs navtype="turn" contenttype="moveleft" defaultActiveKey="2">
                 <TabPanel tab="Tab 1" key="1">测试测试 1</TabPanel>
                 <TabPanel tab="Tab 2" key="2">Content of Tab Pane 2</TabPanel>
                 <TabPanel tab="Tab 3" key="3">测试测试 3</TabPanel>
                 <TabPanel tab="Tab 4" key="4">测试测试 4</TabPanel>
-                <TabPanel tab="Tab 5" key="5">测试测试 5</TabPanel>
-                <TabPanel tab="Tab 6" key="6">测试测试 6</TabPanel>
-                <TabPanel tab="Tab 7" key="7">测试测试 7</TabPanel>
             </Tabs>
         )
     }
-}/**
+}
+/**
  *
- * @title 基础tab
- * @description 
+ * @title 基础tab选中后背景白色
+ * @description
  *
  */
 
 class Demo5 extends Component {
-    render () {
+    render() {
         return (
-            <Tabs navtype="simple" contenttype="fade" defaultActiveKey="2">
+            <Tabs navtype="fade" contenttype="" defaultActiveKey="2">
                 <TabPanel tab="Tab 1" key="1">测试测试 1</TabPanel>
                 <TabPanel tab="Tab 2" key="2">Content of Tab Pane 2</TabPanel>
                 <TabPanel tab="Tab 3" key="3">测试测试 3</TabPanel>
                 <TabPanel tab="Tab 4" key="4">测试测试 4</TabPanel>
-                <TabPanel tab="Tab 5" key="5">测试测试 5</TabPanel>
-                <TabPanel tab="Tab 6" key="6">测试测试 6</TabPanel>
-                <TabPanel tab="Tab 7" key="7">测试测试 7</TabPanel>
             </Tabs>
         )
     }
-}var DemoArray = [{"example":<Demo2 />,"title":" 基础tab","code":"/**\n *\n * @title 基础tab\n * @description \n *\n */\n\nclass Demo2 extends Component {\n    render () {\n        return (\n            <Tabs navtype=\"simple\" contenttype=\"\" defaultActiveKey=\"2\">\n                <TabPanel tab=\"Tab 1\" key=\"1\">测试测试 1</TabPanel>\n                <TabPanel tab=\"Tab 2\" key=\"2\">Content of Tab Pane 2</TabPanel>\n                <TabPanel tab=\"Tab 3\" key=\"3\">测试测试 3</TabPanel>\n                <TabPanel tab=\"Tab 4\" key=\"4\">测试测试 4</TabPanel>\n                <TabPanel tab=\"Tab 5\" key=\"5\">测试测试 5</TabPanel>\n                <TabPanel tab=\"Tab 6\" key=\"6\">测试测试 6</TabPanel>\n                <TabPanel tab=\"Tab 7\" key=\"7\">测试测试 7</TabPanel>\n            </Tabs>\n        )\n    }\n}","desc":" "},{"example":<Demo3 />,"title":" 基础tab","code":"/**\n *\n * @title 基础tab\n * @description \n *\n */\n\nclass Demo3 extends Component {\n    render () {\n        return (\n            <Tabs navtype=\"fill\" contenttype=\"\" defaultActiveKey=\"2\">\n                <TabPanel tab=\"Tab 1\" key=\"1\">测试测试 1</TabPanel>\n                <TabPanel tab=\"Tab 2\" key=\"2\">Content of Tab Pane 2</TabPanel>\n                <TabPanel tab=\"Tab 3\" key=\"3\">测试测试 3</TabPanel>\n                <TabPanel tab=\"Tab 4\" key=\"4\">测试测试 4</TabPanel>\n                <TabPanel tab=\"Tab 5\" key=\"5\">测试测试 5</TabPanel>\n                <TabPanel tab=\"Tab 6\" key=\"6\">测试测试 6</TabPanel>\n                <TabPanel tab=\"Tab 7\" key=\"7\">测试测试 7</TabPanel>\n            </Tabs>\n        )\n    }\n}","desc":" "},{"example":<Demo4 />,"title":" 基础tab","code":"/**\n *\n * @title 基础tab\n * @description \n *\n */\n\nclass Demo4 extends Component {\n    render () {\n        return (\n            <Tabs navtype=\"turn\" contenttype=\"moveleft\" defaultActiveKey=\"2\">\n                <TabPanel tab=\"Tab 1\" key=\"1\">测试测试 1</TabPanel>\n                <TabPanel tab=\"Tab 2\" key=\"2\">Content of Tab Pane 2</TabPanel>\n                <TabPanel tab=\"Tab 3\" key=\"3\">测试测试 3</TabPanel>\n                <TabPanel tab=\"Tab 4\" key=\"4\">测试测试 4</TabPanel>\n                <TabPanel tab=\"Tab 5\" key=\"5\">测试测试 5</TabPanel>\n                <TabPanel tab=\"Tab 6\" key=\"6\">测试测试 6</TabPanel>\n                <TabPanel tab=\"Tab 7\" key=\"7\">测试测试 7</TabPanel>\n            </Tabs>\n        )\n    }\n}","desc":" "},{"example":<Demo5 />,"title":" 基础tab","code":"/**\n *\n * @title 基础tab\n * @description \n *\n */\n\nclass Demo5 extends Component {\n    render () {\n        return (\n            <Tabs navtype=\"simple\" contenttype=\"fade\" defaultActiveKey=\"2\">\n                <TabPanel tab=\"Tab 1\" key=\"1\">测试测试 1</TabPanel>\n                <TabPanel tab=\"Tab 2\" key=\"2\">Content of Tab Pane 2</TabPanel>\n                <TabPanel tab=\"Tab 3\" key=\"3\">测试测试 3</TabPanel>\n                <TabPanel tab=\"Tab 4\" key=\"4\">测试测试 4</TabPanel>\n                <TabPanel tab=\"Tab 5\" key=\"5\">测试测试 5</TabPanel>\n                <TabPanel tab=\"Tab 6\" key=\"6\">测试测试 6</TabPanel>\n                <TabPanel tab=\"Tab 7\" key=\"7\">测试测试 7</TabPanel>\n            </Tabs>\n        )\n    }\n}","desc":" "}]
+}
+var DemoArray = [{"example":<Demo1 />,"title":" 基础tab","code":"/**\r\n *\r\n * @title 基础tab\r\n * @description\r\n *\r\n */\r\n\r\nclass Demo1 extends Component {\r\n    render() {\r\n        return (\r\n            <Tabs navtype=\"simple\" contenttype=\"\" defaultActiveKey=\"2\">\r\n                <TabPanel tab=\"Tab 1\" key=\"1\">测试测试 1</TabPanel>\r\n                <TabPanel tab=\"Tab 2\" key=\"2\">Content of Tab Pane 2</TabPanel>\r\n                <TabPanel tab=\"Tab 3\" key=\"3\">测试测试 3</TabPanel>\r\n                <TabPanel tab=\"Tab 4\" key=\"4\">测试测试 4</TabPanel>\r\n            </Tabs>\r\n        )\r\n    }\r\n}\r\n","desc":""},{"example":<Demo2 />,"title":" 基础tab带有上划线","code":"/**\r\n *\r\n * @title 基础tab带有上划线\r\n * @description\r\n *\r\n */\r\n\r\nclass Demo2 extends Component {\r\n    render() {\r\n        return (\r\n            <Tabs navtype=\"fadeup\" contenttype=\"\" defaultActiveKey=\"2\">\r\n                <TabPanel tab=\"Tab 1\" key=\"1\">测试测试 1</TabPanel>\r\n                <TabPanel tab=\"Tab 2\" key=\"2\">Content of Tab Pane 2</TabPanel>\r\n                <TabPanel tab=\"Tab 3\" key=\"3\">测试测试 3</TabPanel>\r\n                <TabPanel tab=\"Tab 4\" key=\"4\">测试测试 4</TabPanel>\r\n            </Tabs>\r\n        )\r\n    }\r\n}\r\n","desc":""},{"example":<Demo3 />,"title":" 基础tab带有下划线","code":"/**\r\n *\r\n * @title 基础tab带有下划线\r\n * @description\r\n *\r\n */\r\n\r\nclass Demo3 extends Component {\r\n    render() {\r\n        return (\r\n            <Tabs navtype=\"fill\" contenttype=\"\" defaultActiveKey=\"2\">\r\n                <TabPanel tab=\"Tab 1\" key=\"1\">测试测试 1</TabPanel>\r\n                <TabPanel tab=\"Tab 2\" key=\"2\">Content of Tab Pane 2</TabPanel>\r\n                <TabPanel tab=\"Tab 3\" key=\"3\">测试测试 3</TabPanel>\r\n                <TabPanel tab=\"Tab 4\" key=\"4\">测试测试 4</TabPanel>\r\n            </Tabs>\r\n        )\r\n    }\r\n}\r\n","desc":""},{"example":<Demo4 />,"title":" 基础tab背景梯形","code":"/**\r\n *\r\n * @title 基础tab背景梯形\r\n * @description\r\n *\r\n */\r\n\r\nclass Demo4 extends Component {\r\n    render() {\r\n        return (\r\n            <Tabs navtype=\"turn\" contenttype=\"moveleft\" defaultActiveKey=\"2\">\r\n                <TabPanel tab=\"Tab 1\" key=\"1\">测试测试 1</TabPanel>\r\n                <TabPanel tab=\"Tab 2\" key=\"2\">Content of Tab Pane 2</TabPanel>\r\n                <TabPanel tab=\"Tab 3\" key=\"3\">测试测试 3</TabPanel>\r\n                <TabPanel tab=\"Tab 4\" key=\"4\">测试测试 4</TabPanel>\r\n            </Tabs>\r\n        )\r\n    }\r\n}\r\n","desc":""},{"example":<Demo5 />,"title":" 基础tab选中后背景白色","code":"/**\r\n *\r\n * @title 基础tab选中后背景白色\r\n * @description\r\n *\r\n */\r\n\r\nclass Demo5 extends Component {\r\n    render() {\r\n        return (\r\n            <Tabs navtype=\"fade\" contenttype=\"\" defaultActiveKey=\"2\">\r\n                <TabPanel tab=\"Tab 1\" key=\"1\">测试测试 1</TabPanel>\r\n                <TabPanel tab=\"Tab 2\" key=\"2\">Content of Tab Pane 2</TabPanel>\r\n                <TabPanel tab=\"Tab 3\" key=\"3\">测试测试 3</TabPanel>\r\n                <TabPanel tab=\"Tab 4\" key=\"4\">测试测试 4</TabPanel>\r\n            </Tabs>\r\n        )\r\n    }\r\n}\r\n","desc":""}]
 
 
 class Demo extends Component {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bee-tabs",
-  "version": "0.0.2",
+  "version": "0.2.0",
   "description": "tabs ui component for react",
   "keywords": [
     "react",
@@ -29,22 +29,23 @@
     "test": "bee-tools run test",
     "chrome": "bee-tools run chrome",
     "browsers": "bee-tools run browsers",
+    "coveralls": "bee-tools run coverage",
     "pub": "bee-tools run pub"
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "tinper-bee-core": "latest"
+    "tinper-bee-core": "^0.1.7"
   },
   "devDependencies": {
-    "bee-button": "^0.1.10",
-    "bee-layout": "^0.1.6",
-    "bee-panel": "0.0.6",
+    "bee-button": "latest",
+    "bee-layout": "latest",
+    "bee-panel": "latest",
     "chai": "^3.5.0",
     "console-polyfill": "~0.2.1",
     "enzyme": "^2.4.1",
     "es5-shim": "~4.1.10",
-    "react": "~0.14.0",
+    "react": "15.3.2",
     "react-addons-test-utils": "15.3.2",
-    "react-dom": "~0.14.0"
+    "react-dom": "15.3.2"
   }
 }