• Modal 对话框

    模态对话框。

    何时使用

    需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用 Modal 在当前页面正中打开一个浮层,承载相应的操作。

    另外当需要一个简洁的确认框询问用户时,可以使用精心封装好的 antd.Modal.confirm() 等方法。

    代码演示

    第一个对话框。
    expand code expand code
    import { Modal, Button } from 'choerodon-ui';
    
    class App extends React.Component {
      state = { visible: false }
    
      showModal = () => {
        this.setState({
          visible: true,
        });
      }
    
      handleOk = (e) => {
        console.log(e);
        this.setState({
          visible: false,
        });
      }
    
      handleCancel = (e) => {
        console.log(e);
        this.setState({
          visible: false,
        });
      }
    
      render() {
        return (
          <div>
            <Button type="primary" onClick={this.showModal}>Open</Button>
            <Modal
              title="Basic Modal"
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
              center
            >
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </Modal>
          </div>
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    

    更复杂的例子,自定义了页脚的按钮,点击提交后进入 loading 状态,完成后关闭。

    不需要默认确定取消按钮时,你可以把 footer 设为 null

    expand code expand code
    import { Modal, Button } from 'choerodon-ui';
    
    class App extends React.Component {
      state = {
        loading: false,
        visible: false,
      }
    
      showModal = () => {
        this.setState({
          visible: true,
        });
      }
    
      handleOk = () => {
        this.setState({ loading: true });
        setTimeout(() => {
          this.setState({ loading: false, visible: false });
        }, 3000);
      }
    
      handleCancel = () => {
        this.setState({ visible: false });
      }
    
      render() {
        const { visible, loading } = this.state;
        return (
          <div>
            <Button type="primary" onClick={this.showModal}>
              Open
            </Button>
            <Modal
              visible={visible}
              title="Title"
              onOk={this.handleOk}
              onCancel={this.handleCancel}
              footer={[
                <Button key="back" onClick={this.handleCancel}>Return</Button>,
                <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
                  Submit
                </Button>,
              ]}
            >
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </Modal>
          </div>
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    
    使用 confirm() 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭
    expand code expand code
    import { Modal, Button } from 'choerodon-ui';
    const confirm = Modal.confirm;
    
    function showConfirm() {
      confirm({
        title: 'Do you want to delete these items?',
        content: 'When clicked the OK button, this dialog will be closed after 1 second',
        onOk() {
          return new Promise((resolve, reject) => {
            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
          }).catch(() => console.log('Oops errors!'));
        },
        onCancel() {},
      });
    }
    
    ReactDOM.render(
      <Button onClick={showConfirm}>
        Confirm
      </Button>,
      mountNode);
    
    设置 okTextcancelText 以自定义按钮文字。
    expand code expand code
    import { Modal, Button } from 'choerodon-ui';
    
    class LocalizedModal extends React.Component {
      state = { visible: false }
    
      showModal = () => {
        this.setState({
          visible: true,
        });
      }
    
      hideModal = () => {
        this.setState({
          visible: false,
        });
      }
    
      render() {
        return (
          <div>
            <Button type="primary" onClick={this.showModal}>Modal</Button>
            <Modal
              title="Modal"
              visible={this.state.visible}
              onOk={this.hideModal}
              onCancel={this.hideModal}
              okText="确认"
              cancelText="取消"
            >
              <p>Bla bla ...</p>
              <p>Bla bla ...</p>
              <p>Bla bla ...</p>
            </Modal>
          </div>
        );
      }
    }
    
    function confirm() {
      Modal.confirm({
        title: 'Confirm',
        content: 'Bla bla ...',
        okText: '确认',
        cancelText: '取消',
      });
    }
    
    ReactDOM.render(
      <div>
        <LocalizedModal />
        <br />
        <Button onClick={confirm}>Confirm</Button>
      </div>,
      mountNode
    );
    
    1.0 之后,Modal 的 align 属性被移除,您可以直接使用 style.top 或配合其他样式来设置对话框位置。
    expand code expand code
    import { Modal, Button } from 'choerodon-ui';
    
    class App extends React.Component {
      state = {
        modal1Visible: false,
        modal2Visible: false,
      }
    
      setModal1Visible(modal1Visible) {
        this.setState({ modal1Visible });
      }
    
      setModal2Visible(modal2Visible) {
        this.setState({ modal2Visible });
      }
    
      render() {
        return (
          <div>
            <Button type="primary" onClick={() => this.setModal1Visible(true)}>Display a modal dialog at 20px to Top</Button>
            <Modal
              title="20px to Top"
              style={{ top: 20 }}
              visible={this.state.modal1Visible}
              onOk={() => this.setModal1Visible(false)}
              onCancel={() => this.setModal1Visible(false)}
            >
              <p>some contents...</p>
              <p>some contents...</p>
              <p>some contents...</p>
            </Modal>
            <br /><br />
            <Button type="primary" onClick={() => this.setModal2Visible(true)}>Vertically centered modal dialog</Button>
            <Modal
              title="Vertically centered modal dialog"
              wrapClassName="vertical-center-modal"
              visible={this.state.modal2Visible}
              onOk={() => this.setModal2Visible(false)}
              onCancel={() => this.setModal2Visible(false)}
            >
              <p>some contents...</p>
              <p>some contents...</p>
              <p>some contents...</p>
            </Modal>
          </div>
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    
    点击确定后异步关闭对话框,例如提交表单。
    expand code expand code
    import { Modal, Button } from 'choerodon-ui';
    
    class App extends React.Component {
      state = {
        ModalText: 'Content of the modal',
        visible: false,
        confirmLoading: false,
      }
    
      showModal = () => {
        this.setState({
          visible: true,
        });
      }
    
      handleOk = () => {
        this.setState({
          ModalText: 'The modal will be closed after two seconds',
          confirmLoading: true,
        });
        setTimeout(() => {
          this.setState({
            visible: false,
            confirmLoading: false,
          });
        }, 2000);
      }
    
      handleCancel = () => {
        console.log('Clicked cancel button');
        this.setState({
          visible: false,
        });
      }
    
      render() {
        const { visible, confirmLoading, ModalText } = this.state;
        return (
          <div>
            <Button type="primary" onClick={this.showModal}>Open</Button>
            <Modal title="Title"
              visible={visible}
              onOk={this.handleOk}
              confirmLoading={confirmLoading}
              onCancel={this.handleCancel}
            >
              <p>{ModalText}</p>
            </Modal>
          </div>
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    
    使用 confirm() 可以快捷地弹出确认框。
    expand code expand code
    import { Modal, Button } from 'choerodon-ui';
    const confirm = Modal.confirm;
    
    function showConfirm() {
      confirm({
        title: 'Do you Want to delete these items?',
        content: 'Some descriptions',
        onOk() {
          console.log('OK');
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    }
    
    function showDeleteConfirm() {
      confirm({
        title: 'Are you sure delete this task?',
        content: 'Some descriptions',
        okText: 'Yes',
        okType: 'danger',
        cancelText: 'No',
        onOk() {
          console.log('OK');
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    }
    
    ReactDOM.render(
      <div>
        <Button onClick={showConfirm}>
          Confirm
        </Button>
        <Button onClick={showDeleteConfirm} type="dashed">
          Delete
        </Button>
      </div>,
      mountNode);
    
    各种类型的信息提示,只提供一个按钮用于关闭。
    expand code expand code
    import { Modal, Button } from 'choerodon-ui';
    
    function info() {
      Modal.info({
        title: 'This is a notification message',
        content: (
          <div>
            <p>some messages...some messages...</p>
            <p>some messages...some messages...</p>
          </div>
        ),
        onOk() {},
      });
    }
    
    function success() {
      Modal.success({
        title: 'This is a success message',
        content: 'some messages...some messages...',
      });
    }
    
    function error() {
      Modal.error({
        title: 'This is an error message',
        content: 'some messages...some messages...',
      });
    }
    
    function warning() {
      Modal.warning({
        title: 'This is a warning message',
        content: 'some messages...some messages...',
      });
    }
    
    ReactDOM.render(
      <div>
        <Button onClick={info}>Info</Button>
        <Button onClick={success}>Success</Button>
        <Button onClick={error}>Error</Button>
        <Button onClick={warning}>Warning</Button>
      </div>,
      mountNode
    );
    
    手动关闭modal。
    expand code expand code
    import { Modal, Button } from 'choerodon-ui';
    
    function success() {
      const modal = Modal.success({
        title: 'This is a notification message',
        content: 'This modal will be destroyed after 1 second',
      });
      setTimeout(() => modal.destroy(), 1000);
    }
    
    
    ReactDOM.render(
      <Button onClick={success}>Success</Button>,
      mountNode
    );
    
    侧边弹出。
    expand code expand code
    import { Modal, Button } from 'choerodon-ui';
    const { Sidebar } = Modal;
    
    class App extends React.Component {
      state = { visible: false }
    
      showModal = () => {
        this.setState({
          visible: true,
        });
      }
    
      handleOk = () => {
        this.setState({
          visible: false,
        });
      }
    
      handleCancel = () => {
        this.setState({
          visible: false,
        });
      }
    
      render() {
        return (
          <div>
            <Button type="primary" onClick={this.showModal}>Open</Button>
            <Sidebar
              title="Basic Modal"
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
              cancelText="取消"
              okText="确定"
            >
              <p>Some contents...</p>
              <p>Some contents...</p>
              <p>Some contents...</p>
            </Sidebar>
          </div>
        );
      }
    }
    
    ReactDOM.render(<App />, mountNode);
    

    API

    参数说明类型默认值
    afterCloseModal 完全关闭后的回调function
    bodyStyleModal body 样式object{}
    cancelText取消按钮文字string取消
    closable是否显示右上角的关闭按钮booleantrue
    confirmLoading确定按钮 loadingboolean
    destroyOnClose关闭时销毁 Modal 里的子元素booleanfalse
    footer底部内容,当不需要默认底部按钮时,可以设为 footer={null}string|ReactNode确定取消按钮
    getContainer指定 Modal 挂载的 HTML 节点(instance): HTMLElement() => document.body
    mask是否展示遮罩Booleantrue
    maskClosable点击蒙层是否允许关闭booleantrue
    maskStyle遮罩样式object{}
    okText确认按钮文字string确定
    okType确认按钮类型stringprimary
    style可用于设置浮层的样式,调整浮层位置等object-
    title标题string|ReactNode
    visible对话框是否可见boolean
    width宽度string|number520
    wrapClassName对话框外层容器的类名string-
    zIndex设置 Modal 的 z-indexNumber1000
    onCancel点击遮罩层或右上角叉或取消按钮的回调function(e)
    onOk点击确定回调function(e)
    funcType按钮功能string

    注意

    <Modal /> 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容,请设置 destroyOnClose

    侧边栏弹出窗,API同Modal

    包括:

    以上均为一个函数,参数为 object,具体属性如下:

    参数说明类型默认值
    cancelText取消按钮文字string取消
    className容器类名string-
    content内容string|ReactNode
    iconType图标 Icon 类型stringquestion-circle
    maskClosable点击蒙层是否允许关闭Booleanfalse
    okText确认按钮文字string确定
    okType确认按钮类型stringprimary
    title标题string|ReactNode
    width宽度string|number416
    zIndex设置 Modal 的 z-indexNumber1000
    onCancel取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭function
    onOk点击确定回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭function

    以上函数调用后,会返回一个引用,可以通过该引用关闭弹窗。

    const ref = Modal.info();
    ref.destroy();