模式对话框

模式对话框组件。

基础示例

import React, {Component} from 'react';
import {Button, Modal} from 'hana-ui';

/**
 * @en
 * Base Example
 *
 * &nbsp;
 *
 * @cn
 * 基础示例
 *
 * &nbsp;
 */

export default class ExampleBase extends Component {
  state = {
    show: false,
    showConfirmModal: false,
    showCancelModal: false
  }

  toggleModal(key) {
    this.setState({[key]: !this.state[key]});
  }

  openConfirmModal() {
    this.setState({showConfirmModal: !this.state.showConfirmModal});
  }

  render() {
    return (
      <div>
        <Button onClick={() => this.toggleModal('show')}>
          open
        </Button>
        <Modal
          id={'modal'}
          contentStyle={{height: 600}}
          show={this.state.show}
          confirm={() => this.toggleModal('show')}
          cancel={::this.openConfirmModal}
        >
          <img alt={''} src={'https://i0.hdslb.com/group1/M00/B7/3B/oYYBAFcwBcaAbRbPAAEsUAyAdWQ392.gif'} />
        </Modal>
        <Modal
          id={'modal-have-title'}
          contentStyle={{height: 200}}
          title={'关关关'}
          show={this.state.showConfirmModal}
          cancel={() => this.toggleModal('showConfirmModal')}
        >
          <img alt={''} src={'https://i0.hdslb.com/group1/M00/B7/3B/oYYBAFcwBcaAbRbPAAEsUAyAdWQ392.gif'} />
        </Modal>
      </div>
    );
  }
}

自定义回调按钮

import React, {Component} from 'react';
import {Button, Modal} from 'hana-ui';

const actionStyle = {
  marginRight: 5
};

/**
 * @en
 * Custom button
 *
 * &nbsp;
 *
 * @cn
 * 自定义回调按钮
 *
 * &nbsp;
 */

export default class ExampleActions extends Component {
  state = {
    show: false
  }

  toggleModal(key) {
    this.setState({[key]: !this.state[key]});
  }

  handleClick(type) {
    console.log('click %s', type); // eslint-disable-line
    this.toggleModal('show');
  }

  render() {
    return (
      <div>
        <Button onClick={() => this.toggleModal('show')}>
          open
        </Button>
        <Modal
          show={this.state.show}
          actions={this.renderActions()}
        >
          <img alt={''} src={'https://i0.hdslb.com/group1/M00/B7/3B/oYYBAFcwBcaAbRbPAAEsUAyAdWQ392.gif'} />
        </Modal>
      </div>
    );
  }

  renderActions() {
    return [
      <Button
        key={'button-primary'}
        style={actionStyle}
        type={'primary'}
        onClick={() => this.handleClick('primary')}
      >
        primary
      </Button>,
      <Button
        key={'button-error'}
        style={actionStyle}
        type={'error'}
        onClick={() => this.handleClick('error')}
      >
        error
      </Button>,
      <Button
        key={'button-info'}
        style={actionStyle}
        onClick={() => this.handleClick('info')}
      >
        info
      </Button>
    ];
  }
}

自定义关闭按钮

import React, {Component} from 'react';
import {Button, Modal, Icon} from 'hana-ui';

/**
 * @en
 * Custom close
 *
 * Set showClose props to true will show the
 * default close button,but also can use your custom close button
 *
 * @cn
 * 自定义关闭按钮
 *
 * &nbsp;
 */
export default class ExampleWithCloseButton extends Component {
  state = {
    show: false,
    showClose: true,
    withoutTitleModal: false
  }

  toggleModal(key) {
    this.setState({[key]: !this.state[key]});
  }

  render() {
    return (
      <div>
        <Button style={{marginRight: 10}} onClick={() => this.toggleModal('show')}>
          open
        </Button>
        <Button onClick={() => this.toggleModal('withoutTitleModal')}>
          No title
        </Button>
        <Modal
          title={'Title'}
          show={this.state.show}
          showClose={this.state.showClose}
          close={<Icon type={'close'} onClick={() => this.toggleModal('show')} />}
        >
          <img alt={''} src={'https://i0.hdslb.com/group1/M00/B7/3B/oYYBAFcwBcaAbRbPAAEsUAyAdWQ392.gif'} />
        </Modal>
        <Modal
          show={this.state.withoutTitleModal}
          showClose={this.state.showClose}
          close={<Icon type={'close'} onClick={() => this.toggleModal('withoutTitleModal')} />}
        >
          <img alt={''} src={'https://i0.hdslb.com/group1/M00/B7/3B/oYYBAFcwBcaAbRbPAAEsUAyAdWQ392.gif'} />
        </Modal>
      </div>
    );
  }
}

属性说明

属性名	类型	默认值	说明
style	object		自定义组件按钮样式
wrapperStyle	object		自定义组件主弹窗样式
contentStyle	object		自定义组件弹窗内容区域的样式
title	string		显示弹窗标题
titleStyle	object		自定义标题样式
show *	bool		是否显示弹窗
showClose	bool	false	是否显示关闭按钮
close	node		自定义弹窗关闭按钮
confirm	function		显示确定按钮，并自定义确定按钮点击事件
cancel	function		同confirm 配置
actions	node		显示弹窗按钮组合
id	string		设置弹窗key
children	node		设置组件的子组件

未在文档中说明的属性将会被自动加到根元素或form元素上。