ActionSheet 动作面板

基本用法

import { ActionSheet, Cell, Button } from 'zarm';
const BUTTONS = [
  {
    text: '操作一',
    onClick: () => console.log('点击操作一'),
  },
  {
    theme: 'primary',
    text: '操作二',
    onClick: () => console.log('点击操作二'),
  },
  {
    theme: 'danger',
    text: '操作三',
    onClick: () => console.log('点击操作三'),
  },
];
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible1: false,
      visible2: false,
      visible3: false,
    };
  }
  toggle(key) {
    this.setState({
      [`${key}`]: !this.state[key],
    });
  }
  render() {
    return (
      <div>
        <Cell
          description={
            <Button size="xs" onClick={() => this.toggle('visible1')}>开启</Button>
          }
        >
          普通
        </Cell>
        <Cell
          description={
            <Button size="xs" onClick={() => this.toggle('visible2')}>开启</Button>
          }
        >
          带取消操作
        </Cell>
        <Cell
          description={
            <Button size="xs" onClick={() => this.toggle('visible3')}>开启</Button>
          }
        >
          圆角、留边
        </Cell>
        <ActionSheet
          visible={this.state.visible1}
          actions={BUTTONS}
          onMaskClick={() => this.toggle('visible1')}
        />
        <ActionSheet
          visible={this.state.visible2}
          actions={BUTTONS}
          onMaskClick={() => this.toggle('visible2')}
          onCancel={() => this.toggle('visible2')}
        />
        <ActionSheet
          spacing
          visible={this.state.visible3}
          actions={BUTTONS}
          onMaskClick={() => this.toggle('visible3')}
          onCancel={() => this.toggle('visible3')}
        />
      </div>
    )
  }
}
ReactDOM.render(<Demo />, mountNode);

API

Action 类型定义