• Message 全局提示

    全局展示操作反馈信息。

    何时使用

    代码演示

    信息提醒反馈。
    expand code expand code
    import { message, Button } from 'choerodon-ui';
    
    const info = () => {
      message.info('This is a normal message');
    };
    
    ReactDOM.render(
      <Button type="primary" onClick={info}>Display normal message</Button>,
      mountNode);
    
    自定义时长 10s,默认时长为 3s
    expand code expand code
    import { message, Button } from 'choerodon-ui';
    
    const success = () => {
      message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
    };
    
    ReactDOM.render(
      <Button onClick={success}>Customized display duration</Button>,
      mountNode);
    
    定义消息位置
    expand code expand code
    import { message, Button } from 'choerodon-ui';
    
    const handleClick = (placement) => {
      message.destroy();
      message.config({
        top: 100,
        bottom: 100,
        duration: 5,
      });
      message.success(placement, undefined, undefined, placement);
    };
    
    ReactDOM.render(
      <div>
        <Button onClick={() => { handleClick('topLeft'); }}>topLeft</Button>
        <Button onClick={() => { handleClick('top'); }}>top</Button>
        <Button onClick={() => { handleClick('topRight'); }}>topRight</Button>
        <Button onClick={() => { handleClick('leftTop'); }}>leftTop</Button>
        <Button onClick={() => { handleClick('left'); }}>left</Button>
        <Button onClick={() => { handleClick('leftBottom'); }}>leftBottom</Button>
        <Button onClick={() => { handleClick('rightTop'); }}>rightTop</Button>
        <Button onClick={() => { handleClick('right'); }}>right</Button>
        <Button onClick={() => { handleClick('rightBottom'); }}>rightBottom</Button>
        <Button onClick={() => { handleClick('bottomLeft'); }}>bottomLeft</Button>
        <Button onClick={() => { handleClick('bottom'); }}>bottom</Button>
        <Button onClick={() => { handleClick('bottomRight'); }}>bottomRight</Button>
      </div>,
      mountNode);
    
    包括成功、失败、警告。
    expand code expand code
    import { message, Button } from 'choerodon-ui';
    
    message.config({
      top: '24px',
    });
    
    const success = () => {
      message.success('This is a message of success');
    };
    
    const error = () => {
      message.error('This is a message of error');
    };
    
    const warning = () => {
      message.warning('This is message of warning');
    };
    
    ReactDOM.render(
      <div>
        <Button onClick={success}>Success</Button>
        <Button onClick={error}>Error</Button>
        <Button onClick={warning}>Warning</Button>
      </div>,
      mountNode);
    
    进行全局 loading,异步自行移除。
    expand code expand code
    import { message, Button } from 'choerodon-ui';
    
    const success = () => {
      const hide = message.loading('Action in progress..', 0);
      // Dismiss manually and asynchronously
      setTimeout(hide, 2500);
    };
    
    ReactDOM.render(
      <Button onClick={success}>Display a loading indicator</Button>,
      mountNode);
    

    API

    组件提供了一些静态方法,使用方式和参数如下:

    参数 说明 类型 默认值
    content 提示内容 string|ReactNode -
    duration 自动关闭的延时,单位秒 number 3
    onClose 关闭时触发的回调函数 Function -
    placement 消息展示的位置, 可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom string top

    还提供了全局配置和全局销毁方法:

    message.config

    message.config({
      top: 100,
      duration: 2,
    });
    
    参数 说明 类型 默认值
    duration 默认自动关闭延时,单位秒 number 3
    getContainer 配置渲染节点的输出位置 () => HTMLElement () => document.body
    top 消息在顶部出现时距离顶部的位置 number 24px
    bottom 消息在底部出现时距离底部的位置 number 24px