• Alert 警告提示

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

    何时使用

    代码演示

    Success Text
    最简单的用法,适用于简短的警告提示。
    expand code expand code
    import { Alert } from 'choerodon-ui';
    
    ReactDOM.render(
      <Alert message="Success Text" type="success" />,
      mountNode);
    
    Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text
    Error TextError Description Error Description Error Description Error Description Error Description Error Description
    显示关闭按钮,点击可关闭警告提示。
    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);
    
    Success Tips
    Informational Notes
    Warning
    Error
    Success TipsDetailed description and advices about successful copywriting.
    Informational NotesAdditional description and informations about copywriting.
    WarningThis is a warning notice about copywriting.
    ErrorThis is an error message about copywriting.
    可口的图标让信息类型更加醒目。
    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);
    
    Success Text
    Info Text
    Warning Text
    Error Text
    共有四种样式 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);
    
    Success TextSuccess Description Success Description Success Description
    Info TextInfo Description Info Description Info Description Info Description
    Warning TextWarning Description Warning Description Warning Description Warning Description
    Error TextError Description Error Description Error Description Error Description
    含有辅助性文字介绍的警告提示。
    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);
    
    Info TextClose Now
    可以自定义关闭,自定义的文字会替换原先的关闭 Icon
    expand code expand code
    import { Alert } from 'choerodon-ui';
    
    ReactDOM.render(
      <Alert message="Info Text" type="info" closeText="Close Now" />,
      mountNode);
    
    Alert Message Text

    placeholder text here

    平滑、自然的卸载提示
    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 是否用作顶部公告 boolean false
    closable 默认不显示关闭按钮 boolean
    closeText 自定义关闭按钮 string|ReactNode
    description 警告提示的辅助性文字介绍 string|ReactNode
    message 警告提示内容 string|ReactNode
    showIcon 是否显示辅助图标 boolean false,banner 模式下默认值为 true
    iconType 自定义图标类型,showIcontrue 时有效 string -
    type 指定警告提示的样式,有四种选择 successinfowarningerror string infobanner 模式下默认值为 warning
    onClose 关闭时触发的回调函数 (e: MouseEvent) => void