Browse Source

Restructured the TabView component.

Snow 8 years ago
parent
commit
f3cf9ab9c5
4 changed files with 85 additions and 70 deletions
  1. 19 0
      src/components/Tabs/ContentView.js
  2. 48 0
      src/components/Tabs/TabView.jsx
  3. 16 68
      src/components/Tabs/index.js
  4. 2 2
      src/routes.js

+ 19 - 0
src/components/Tabs/ContentView.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+const ContentView = props => <div className="tabContent">{props.content}</div>;
+
+const TabGroup = props => {
+  return (
+    <div className="tabGroup">
+      {props.tabs.map((tabName, id) =>
+        <button
+          onClick={() => props.handleClick(id)}
+          className={'tab ' + props.isActive(id)}
+          key={tabName}
+        >
+          {tabName}
+        </button>
+      )}
+    </div>
+  );
+};

File diff suppressed because it is too large
+ 48 - 0
src/components/Tabs/TabView.jsx


File diff suppressed because it is too large
+ 16 - 68
src/components/Tabs/index.js


+ 2 - 2
src/routes.js

@@ -6,7 +6,7 @@ import App from './components/App';
 import Nav from './components/Nav';
 import ToggleDemo from './components/Toggle';
 import Home from './components/Home';
-import TabView from './components/Tabs';
+import TabViewDemo from './components/Tabs';
 import Modal from './components/Modal';
 import SlideShow from './components/SlideShow';
 import Counter from './components/Counter';
@@ -22,7 +22,7 @@ const Routes = props =>
         <Switch>
           <Route path="/" exact component={Home} />
           <Route path="/toggle" component={ToggleDemo} />
-          <Route path="/tabs" component={TabView} />
+          <Route path="/tabs" component={TabViewDemo} />
           <Route path="/counter" component={Counter} />
           <Route path="/modal" component={Modal} />
           <Route path="/slideshow" component={SlideShow} />