• Alert 警告提示

    警告提示,展现需要关注的信息。

    何时使用

    代码演示

    最简单的用法,适用于简短的警告提示。
    expand code expand code
    import { Alert } from 'choerodon-ui';
    
    ReactDOM.render(
      <Alert message="Success Text" type="success" />,
      mountNode);
    
    显示关闭按钮,点击可关闭警告提示。
    expand code expand code
    import { Alert } from 'choerodon-ui';
    
    const onClose = function (e) {
      console.log(e, 'I was closed.');
    };
    
    ReactDOM.render(
      <div>
        <Alert
          message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
          type="warning"
          closable
          onClose={onClose}
        />
        <Alert
          message="Error Text"
          description="Error Description Error Description Error Description Error Description Error Description Error Description"
          type="error"
          closable
          onClose={onClose}
        />
      </div>,
      mountNode);
    
    可口的图标让信息类型更加醒目。
    expand code expand code
    import { Alert } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <Alert message="Success Tips" type="success" showIcon />
        <Alert message="Informational Notes" type="info" showIcon />
        <Alert message="Warning" type="warning" showIcon />
        <Alert message="Error" type="error" showIcon />
        <Alert
          message="Success Tips"
          description="Detailed description and advices about successful copywriting."
          type="success"
          showIcon
        />
        <Alert
          message="Informational Notes"
          description="Additional description and informations about copywriting."
          type="info"
          showIcon
        />
        <Alert
          message="Warning"
          description="This is a warning notice about copywriting."
          type="warning"
          showIcon
        />
        <Alert
          message="Error"
          description="This is an error message about copywriting."
          type="error"
          showIcon
        />
      </div>,
      mountNode);
    
    共有四种样式 successinfowarningerror
    expand code expand code
    import { Alert } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <Alert message="Success Text" type="success" />
        <Alert message="Info Text" type="info" />
        <Alert message="Warning Text" type="warning" />
        <Alert message="Error Text" type="error" />
      </div>,
      mountNode);
    
    含有辅助性文字介绍的警告提示。
    expand code expand code
    import { Alert } from 'choerodon-ui';
    
    ReactDOM.render(
      <div>
        <Alert
          message="Success Text"
          description="Success Description Success Description Success Description"
          type="success"
        />
        <Alert
          message="Info Text"
          description="Info Description Info Description Info Description Info Description"
          type="info"
        />
        <Alert
          message="Warning Text"
          description="Warning Description Warning Description Warning Description Warning Description"
          type="warning"
        />
        <Alert
          message="Error Text"
          description="Error Description Error Description Error Description Error Description"
          type="error"
        />
      </div>,
      mountNode);
    
    可以自定义关闭,自定义的文字会替换原先的关闭 Icon
    expand code expand code
    import { Alert } from 'choerodon-ui';
    
    ReactDOM.render(
      <Alert message="Info Text" type="info" closeText="Close Now" />,
      mountNode);
    
    平滑、自然的卸载提示
    expand code expand code
    import { Alert } from 'choerodon-ui';
    
    class App extends React.Component {
      state = {
        visiable: true,
      }
    
      handleClose = () => {
        this.setState({ visiable: false });
      }
    
      render() {
        return (
          <div>
            {
              this.state.visiable ? (
                <Alert
                  message="Alert Message Text"
                  type="success"
                  closable
                  afterClose={this.handleClose}
                />
              ) : null
            }
            <p>placeholder text here</p>
          </div>
        );
      }
    }
    
    ReactDOM.render(
      <App />,
      mountNode);
    

    API

    参数说明类型默认值
    afterClose关闭动画结束后的回掉() => void-
    banner是否用作顶部公告booleanfalse
    closable默认不显示关闭按钮boolean
    closeText自定义关闭按钮string|ReactNode
    description警告提示的辅助性文字介绍string|ReactNode
    message警告提示内容string|ReactNode
    showIcon是否显示辅助图标booleanfalse,banner 模式下默认值为 true
    iconType自定义图标类型,showIcontrue 时有效string-
    type指定警告提示的样式,有四种选择 successinfowarningerrorstringinfobanner 模式下默认值为 warning
    onClose关闭时触发的回调函数(e: MouseEvent) => void