jimu-mobile/example/components/actionsheet.js

积木组件库助力移动端开发

import React, { Component } from 'react'
import JIMU from '../../src/index'

const {ActionSheet,Button} = JIMU
// 底部弹出展示 FadeInUp
const _FadeInUp = React.createClass({
  getInitialState() {
    return {
      show : false,
    }
  },

  fadeShow(){
    this.setState({show : true})
  },

  fadeHide(){
    this.setState({show : false})
  },

  clickTest(o){
    console.log(o)
  },

  render() {
    let {show} = this.state
    return(
      <div className="libs-intr">
        <h2><span className="icon-ungroup"></span> ActionSheet</h2>
        <div className="argu-intr">
        </div>
        <div className="demo-show">
          <h3 className="demo-title">demo展示</h3>
          <div className="list">
            <dl>
              <dd><Button onClick={this.fadeShow}>ActionSheet</Button></dd>
            </dl>

            <ActionSheet 
              show={show} 
              back={this.fadeHide} 
              menus={
                [
                  {
                    label : "按钮一",
                    onClick : this.clickTest.bind(this,"点击了按钮一")
                  },
                  {
                    label : "按钮二",
                    onClick : this.clickTest.bind(this,"点击了按钮二")
                  }
                ]
              }

              actions={
                [
                  {
                    "label":"关闭",
                    onClick : this.fadeHide
                  }
                ]
              }
            ></ActionSheet>
          </div>
        </div>
      </div>
    )
  }
})
module.exports = _FadeInUp