简体中文

模式对话框

模式对话框组件。

基础示例
import React, {Component} from 'react';
import {Button, Modal} from 'hana-ui';

/**
 * @en
 * Base Example
 *
 *  
 *
 * @cn
 * 基础示例
 *
 *  
 */

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 Custom button component class name
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元素上。