react-motion-menu-button v0.0.4

react-motion-menu-button

一个react的折叠按钮

Demo

https://hst-sunday.github.io/react-motion-menu-button/

Development

npm install
npm start
打开 http://localhost:3001

Install

npm i react-motion-menu-button --save

Usage

import reactMotionMenuButton from 'react-motion-menu-button';

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      open: false,
    }
    this.toggle = this.toggle.bind(this);
  }

  toggle(event) {
    event.preventDefault()
    this.setState({
      open: !this.state.open
    })
  }

  render() {
    return (<div>
      <reactMotionMenuButton
        mode={this.state.value}
        childrenButtonData={
          [
            { imgSrc: messagePNG, onClick: (e) => message.info('i am message'), imgAlt: "1", bgColor: "#eee" },
            { imgSrc: cameraPNG, onClick: (e) => message.info('i am camera'), imgAlt: "2", bgColor: "#eee" },
            { imgSrc: photoPNG, onClick: (e) => message.info('i am photo'), imgAlt: "3", bgColor: "#eee" },
            { imgSrc: opinionPNG, onClick: (e) => message.info('i am opinion'), imgAlt: "4", bgColor: "#eee" },
            { imgSrc: shoppingPNG, onClick: (e) => message.info('i am shopping'), imgAlt: "5", bgColor: "#eee" },
          ]
        }
        buttonSize={60}
        backgroundColor={"#eee"}
        isOpen={this.state.open}
        onClick={(e) => this.toggle(e)}
      />
    </div>)
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

组件Option

参考资料

A gentle introduction to React Motion

License

MIT