Переглянути джерело

Restructured the TabView component.

Snow 8 роки тому
батько
коміт
f3cf9ab9c5

+ 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>
+  );
+};

Різницю між файлами не показано, бо вона завелика
+ 48 - 0
src/components/Tabs/TabView.jsx


Різницю між файлами не показано, бо вона завелика
+ 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} />