ReactJS 選項卡切換 （react-swipeable-views）

ReactJS 選項卡切換實現

應用組件 react-swipeable-views
react-swipeable-views : Doc

A React component for swipeable views. ❄️ https://react-swipeable-views.com/

Installation

Install react-swipeable-views.

npm

npm install --save react-swipeable-views

Usage

Get started with react-swipeable-views in no time.

• Simple example

import React from 'react';
import SwipeableViews from 'react-swipeable-views';

const styles = {
  slide: {
    padding: 15,
    minHeight: 100,
    color: '#fff',
  },
  slide1: {
    background: '#FEA900',
  },
  slide2: {
    background: '#B3DC4A',
  },
  slide3: {
    background: '#6AC0FF',
  },
};

const MyComponent = () => (
  <SwipeableViews>
    <div style={Object.assign({}, styles.slide, styles.slide1)}>
      slide n°1
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide2)}>
      slide n°2
    </div>
    <div style={Object.assign({}, styles.slide, styles.slide3)}>
      slide n°3
    </div>
  </SwipeableViews>
);

export default MyComponent;

• my example

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
// import SwipeViews from 'react-swipe-views';
import SwipeViews from 'react-swipeable-views';


const styles = {
  slide: {
    padding: 15,
    minHeight: 100,
    color: '#fff',
  },
  slide1: {
    background: '#FEA900',
  },
  slide2: {
    background: '#B3DC4A',
    minHeight: 400,
  },
  slide3: {
    background: '#6AC0FF',
    minHeight: 600,
  },
};

class App extends Component {


  constructor(props) {
    super(props);
    this.state = {
      index: 0,
    };
  }

  handleChange = (event, value) => {
    this.setState({
      index: value,
    });
  };

  handleChangeIndex = index => {
    this.setState({
      index,
    });
  };

  render() {
    const { index } = this.state;
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <div>
          <button style={{ background: "green", height: "30px" }} onClick={(e) => this.handleChange(e, 0)}>slide1</button>
          <button style={{ background: "red", height: "30px" }} onClick={(e) => this.handleChange(e, 1)}>slide2</button>
          <button style={{ background: "blue", height: "30px" }} onClick={(e) => this.handleChange(e, 2)}>slide3</button>
        </div>
        <SwipeViews
          containerStyle={{ minHeight: 400 }}
          animateHeight={true}
          index={index} onChangeIndex={this.handleChangeIndex}>
          <div style={Object.assign({}, styles.slide, styles.slide1)}>
            slide n°1
          </div>
          <div style={Object.assign({}, styles.slide, styles.slide2)}>
            slide n°2
          </div>
          <div style={Object.assign({}, styles.slide, styles.slide3)}>
            slide n°3
          </div>
        </SwipeViews>
        <div style={{background:"purple", wight: "100%", height: "30px", padding: "10px"}}>
          <button>ON CLICK</button>
        </div>
      </div>
    );
  }
}

export default App;

Supported platforms

Learn about the platforms, from modern to old, that are supported by react-swipeable-views.

The API is as consistent as possible between the three platforms so the same component can be used independently on where it’s running.

Browser

IE	Edge	Windows	Phone	Firefox	Chrome	Safari
>= 10	✓	x		>= 28	>= 29	>= 8

Demos

Demos

API

The API documentation. SwipeableViews