Merge pull request mui#1907 from oliviertassinari/tabs-swipeable

[Docs] Add an example of tabs with a slide effect
tyfoo · Oct 29, 2015 · 9be7261 · 9be7261
2 parents 3304889 + f69ad2d
commit 9be7261
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 2 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -21,6 +21,8 @@
     "react-addons-transition-group": "^0.14.0",
     "react-addons-update": "^0.14.0",
     "react-dom": "^0.14.0",
+    "react-motion": "^0.3.1",
+    "react-swipeable-views": "^0.3.0",
     "react-tap-event-plugin": "^0.2.0"
   },
   "devDependencies": {

diff --git a/docs/src/app/components/pages/components/tabs.jsx b/docs/src/app/components/pages/components/tabs.jsx
@@ -4,14 +4,17 @@ let {IconButton, Slider, Styles, Tab, Tabs } = require('material-ui');
 let ComponentDoc = require('../../component-doc');
 let { Colors, Typography } = Styles;
 let Code = require('tabs-code');
-
+const SwipeableViews = require('react-swipeable-views');
 
 export default class TabsPage extends React.Component {
 
   constructor(props) {
     super(props);
     this._handleTabActive = this._handleTabActive.bind(this);
-    this.state = {tabsValue: 'a'};
+    this.state = {
+      tabsValue: 'a',
+      slideIndex: 0,
+    };
   }
 
   render(){
@@ -150,6 +153,9 @@ export default class TabsPage extends React.Component {
         position: 'relative',
         paddingLeft: padding,
       },
+      slide: {
+        padding: 10,
+      },
     };
 
     return (
@@ -227,11 +233,41 @@ export default class TabsPage extends React.Component {
                 </Tab>
               </Tabs>
           </div>
+          <br />
+          <Tabs onChange={this._handleChangeTabs.bind(this)} value={this.state.slideIndex + ''}>
+            <Tab label="Tab One" value="0" />
+            <Tab label="Tab Two" value="1" />
+            <Tab label="Tab Three" value="2" />
+          </Tabs>
+          <SwipeableViews index={this.state.slideIndex} onChangeIndex={this._handleChangeIndex.bind(this)}>
+            <div>
+              <h2 style={styles.headline}>Tabs with slide effect</h2>
+              Swipe to see the next slide.<br />
+            </div>
+            <div style={styles.slide}>
+              slide n°2
+            </div>
+            <div style={styles.slide}>
+              slide n°3
+            </div>
+          </SwipeableViews>
         </CodeExample>
       </ComponentDoc>
     );
   }
 
+  _handleChangeIndex(index) {
+    this.setState({
+      slideIndex: index,
+    });
+  }
+
+  _handleChangeTabs(value) {
+    this.setState({
+      slideIndex: parseInt(value, 10),
+    });
+  }
+
   _handleButtonClick() {
     this.setState({tabsValue: 'c'});
   }

diff --git a/docs/src/app/components/raw-code/tabs-code.txt b/docs/src/app/components/raw-code/tabs-code.txt
@@ -28,3 +28,22 @@
     (Tab content...)
   </Tab>
 </Tabs>
+
+// Tabs with slide effect
+<Tabs onChange={this._handleChangeTabs.bind(this)} value={this.state.slideIndex + ''}>
+  <Tab label="Tab One" value="0" />
+  <Tab label="Tab Two" value="1" />
+  <Tab label="Tab Three" value="2" />
+</Tabs>
+<SwipeableViews index={this.state.slideIndex} onChangeIndex={this._handleChangeIndex.bind(this)}>
+  <div>
+    <h2 style={styles.headline}>Tabs with slide effect</h2>
+    Swipe to see the next slide.<br />
+  </div>
+  <div style={styles.slide}>
+    slide n°2
+  </div>
+  <div style={styles.slide}>
+    slide n°3
+  </div>
+</SwipeableViews>