shinemo-alert v0.0.3

警告提示 / Alert

使用方式

// index.scss
.custom {
	background: #fffde9;
	color: brown;
}

import React from 'react'
import ReactDOM from 'react-dom'
import Alert from '@xm/Alert'
import styles from './index.scss'

const onClose = () => {
  console.log('closed')
}

ReactDOM.render((<div>
  <Alert message="默认提示" />
  <Alert type="success" message="不带icon的成功提醒" />
  <Alert showIcon type="success" message="带icon的成功提醒" />
  <Alert type="info" message="不带icon的信息提醒" />
  <Alert showIcon type="info" message="带icon的信息提醒" />
  <Alert type="warning" message="不带icon的警告提醒" />
  <Alert showIcon type="warning" message="带icon的警告提醒" />
  <Alert type="error" message="不带icon的错误提醒" />
  <Alert showIcon type="error" message="带icon的错误提醒" />

  <Alert align="center" showIcon type="error" message="带icon居中显示的的错误提醒" />
  <Alert align="right" showIcon type="warning" message="带icon的警告提醒" />

  <Alert message="带关闭按钮的默认提示" closable onClose={onClose} />
  <Alert message="带自定义关闭按钮的默认提示" closable closeText="关闭" onClose={onClose} />
  <Alert type="success" message="不带icon带自定义关闭按钮的成功提醒" closable closeText="关闭" onClose={onClose} />
  <Alert showIcon type="success" message="带icon带关闭按钮的成功提醒" closable onClose={onClose} />
  <Alert type="info" message="不带icon带关闭按钮的信息提醒" closable />
  <Alert showIcon type="info" message="带icon带关闭按钮的信息提醒" closable />
  <Alert type="warning" message="不带icon带关闭按钮的警告提醒" closable />
  <Alert showIcon type="warning" message="带icon带关闭按钮的警告提醒" closable />
  <Alert type="error" message="不带icon带关闭按钮的错误提醒" closable />
  <Alert showIcon type="error" message="带icon带关闭按钮的错误提醒" closable />
  <Alert align="center" showIcon type="error" message="带icon带关闭按钮居中显示的错误提醒" closable />
  <Alert align="right" showIcon type="warning" message="带icon的警告提醒" closable />

  <Alert message="带关闭按钮的默认提示" description="带关闭按钮默认提示的描述信息" closable />
  <Alert type="success" message="不带icon带关闭按钮的成功提醒" description="不带icon带关闭按钮的成功提醒的描述信息" closable />
  <Alert showIcon type="success" message="带icon带关闭按钮的成功提醒" description="带icon带关闭按钮的成功提醒的描述信息" closable />
  <Alert type="info" message="不带icon带关闭按钮的信息提醒" description="不带icon带关闭按钮的信息提醒的描述信息" closable />
  <Alert showIcon type="info" message="带icon带关闭按钮的信息提醒" description="带icon带关闭按钮的信息提醒的描述信息" closable />
  <Alert type="warning" message="不带icon带关闭按钮的警告提醒" description="不带icon带关闭按钮的警告提醒的描述信息" closable />
  <Alert showIcon type="warning" message="带icon带关闭按钮的警告提醒" description="带icon带关闭按钮的警告提醒的描述信息" closable />
  <Alert type="error" message="不带icon带关闭按钮的错误提醒" description="不带icon带关闭按钮的错误提醒的描述信息" closable />
  <Alert showIcon type="error" message="带icon带关闭按钮的错误提醒" description="带icon带关闭按钮的错误提醒的描述信息" closable />
  <Alert align="center" showIcon type="error" message="带icon带关闭按钮居中显示的错误提醒" description="带icon带关闭按钮居中显示的错误提醒的描述信息" closable />
  <Alert align="right" showIcon type="warning" message="带icon的警告提醒" description="带icon的警告提醒的描述信息" closable />

  <Alert cls={styles.custom} closable>
    <span>我是自定义的内容</span>
    <div>我可以设置任何自己想要的样式与图标</div>
    <div>message和description的优先级比自定义的方式要高</div>
  </Alert>

</div>), document.getElementById('app'))