Adding examples

nashio · Jul 6, 2017 · 659905b · 659905b
1 parent b7dda0b
commit 659905b
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 43 deletions.
diff --git a/examples/demo/assets/css/demo.css b/examples/demo/assets/css/demo.css
@@ -17,10 +17,6 @@ header .sub-title {
   font-weight: bold;
 }
 
-.footer {
-  margin-top: 100px;
-}
-
 .logo {
   width: 150px;
   display: block;
@@ -47,16 +43,16 @@ h2 {
 }
 
 h3 {
-  font-size: 19px;
-  margin: 40px 0 20px 0;
+  font-size: 20px;
+  margin: 20px 0;
   color: #333;
 }
 
 h4 {
-  font-size: 17px;
+  font-size: 18px;
   font-family: "Courier New", Courier, monospace;
-  margin: 20px 0 10px;
-  color: #888;
+  margin: 50px 0 10px;
+  color: #333;
 }
 
 p.intro {
@@ -67,10 +63,25 @@ p.intro {
   padding: 15px;
   border-radius: 5px;
   margin-top: 0;
-  margin-bottom: 25px;
+  margin-bottom: 15px;
+}
+
+iframe {
+  border: 0;
+}
+
+.github {
+  float: right;
+  margin-bottom: 50px;
+}
+
+footer {
+  display: block;
+  margin: 100px 0;
 }
 
 .tabs-container:first-child .tab-nav .active {
     /* background: beige; */
   }
 }
+
diff --git a/examples/demo/index.html b/examples/demo/index.html
@@ -2,6 +2,9 @@
 <title>Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 <link rel="stylesheet" href="assets/css/demo.css">
+<head>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+</head>
 <body>
   <div class="container">
     <header>

diff --git a/examples/demo/index.js b/examples/demo/index.js
@@ -103,7 +103,7 @@ const TabsDemo4 = () => (
 
 // Double line in the title demo
 const TabsDemo5 = () => (
-  <Tabs className="two-rows" settings={{contentWrap: true}}>
+  <Tabs className="two-rows theme-box" settings={{contentWrap: true}}>
     <Nav>
       <div><span>Planet Mercury</span><sub>smallest planet</sub></div>
       <div><span>Planet Venus</span><sub>hottest planet</sub></div>
@@ -145,10 +145,24 @@ const TabsDemo6 = () => (
     </Content>
   </Tabs>);
 
+const Header = () => (
+  <div className="github">
+    <iframe src="https://ghbtns.com/github-btn.html?user=twbs&repo=react-tiny-tabs&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px">
+    </iframe>
+  </div>
+);
+const Footer = () => (
+  <footer>
+    <h2>License</h2>
+    <h3>MIT</h3>
+    <a href="https://github.com/nashio/react-tiny-tabs/">Github</a>&nbsp;/&nbsp;v.0.1.0
+  </footer>
+);
 
 ReactDOM.render(
   <div>
-    <p className="intro">An easy to use React tab component with several options to modify the skin.</p>
+    <p className="intro">Easy to use Tab Component for React with basic options to skin and change layout.</p>
+    <Header></Header>
     <h2>Examples:</h2>
     <h4>Default Theme</h4>
     <pre>{`
@@ -166,14 +180,14 @@ ReactDOM.render(
       }
     `}</pre>
     <TabsDemo4 />
-    <h4>class="two-rows box-theme"</h4>
+    <h4>box-theme, using .two-rows</h4>
     <pre>{`
       settings: {
         contentWrap: true
       }
     `}</pre>
     <TabsDemo5 />
-    <h4>box-theme</h4>
+    <h4>Nesting components</h4>
     <pre>{`
       settings: {
         index: 2,
@@ -191,7 +205,7 @@ ReactDOM.render(
       }
     `}</pre>
     <TabsDemo6 />
-    <div className="footer"></div>
+    <Footer></Footer>
   </div>,
   document.getElementById('root')
 );

diff --git a/src/index.js b/src/index.js
@@ -6,7 +6,10 @@ const DEFAULTS  = {
   index: 0,
   mainClass: 'tabs-container',
   contentWrap: false,
-  bottomNav: false
+  bottomNav: false,
+  color: '#555555',
+  colorNoFocus: 'darkGray',
+  bgColor: 'white'
 };
 
 // Handle state here
@@ -108,7 +111,9 @@ const createSection = (sectionName) =>
            (i === prevIdx && sectionName === 'tab-panel')) {
           active = 'active';
         }
-        const style = active ? {color: settings.color, background: settings.bgColor} : {};
+        const {color, bgColor, borderTopColor} = settings;
+        console.log('className: ', className  );
+        const style = active ? {color, background: bgColor, borderTopColor} : {};
         const handle = handleClick ? handleClick.bind(null, i) : null;
         return React.cloneElement(child, {
           key: i,

diff --git a/src/scss/index.scss b/src/scss/index.scss
@@ -6,7 +6,7 @@ body {
   display: block;
   margin-bottom: 20px;
   line-height: 21px;
-  color: #444;
+  color: #999;
 
   .wrapper {
     overflow: hidden;
@@ -236,38 +236,15 @@ $theme2: #FFFFFF;
 .tabs-container.two-rows>.wrapper {
   &>.tab-nav {
     .tab-nav-item {
-      border: 1px solid #BBB;
-      border-bottom: none;
-      border-left-color: transparent;
-      border-radius: 0;
-      background: #CCC;
-      color: white;
-      position: relative;
-      top: 1px;
-      line-height: 13px;
+      line-height: 15px;
 
       sub {
         display: block;
-        font-size: 10px;
+        font-size: 75%;
       }
 
-      &.active {
-        background-color: $theme2;
-        color: #333;
-        border-bottom: 1px solid white;
-        border-top: 3px solid red;
-        border-left-color: #BBB;
-      }
-
-      &:first-child {
-        border-left: 1px solid #BBB;
-      }
     }
   }
 
-  &>.tab-panel {
-    background: $theme2;
-    border: 1px solid #BBB;
-  }
 }