zent-alert

Alert 公告

公告，提供一个醒目的提示信息。

使用指南

• 内容文字尽可能精简, 减少阅读障碍。
• 公告类按钮不要多于两个, 保持逻辑简单。

代码演示

:::demo 基础用法

import { Alert } from 'zent';

ReactDOM.render(
	<Alert>公告内容。</Alert>
	, mountNode
);

:::

:::demo 公告内容可以是非字符串

import { Alert, Icon } from 'zent';

ReactDOM.render(
	<Alert>
		<Icon type="error-circle" />
		<span>警告：交易过程中的短信通知，将通过营销中心的“消息推送”功能来发送。</span>
		<a href="" onClick={e => e.preventDefault()}>立即订购</a>
	</Alert>
	, mountNode
)

:::

:::demo 三种样式：info, warning 和 danger

import { Alert } from 'zent';

ReactDOM.render(
	<div className="zent-alert-example">
		<Alert type="info">这个是默认的 info 样式。</Alert>
		<Alert type="warning">这个是 warning 样式。</Alert>
		<Alert type="danger">这个是 danger 样式。</Alert>
	</div>
	, mountNode
);

:::

:::demo 公告有两种大小

import { Alert } from 'zent';

ReactDOM.render(
	<div className="zent-alert-example">
		<Alert>这个时正常尺寸的公告。</Alert>
		<Alert size="large">这个是大号的公告。</Alert>
	</div>
	, mountNode
)

:::

:::demo 支持圆角样式

import { Alert } from 'zent';

ReactDOM.render(
	<Alert type="warning" rounded>这个公告是有圆角的。</Alert>
	, mountNode
)

:::

:::demo 关闭按钮

import { Alert, Sweetalert } from 'zent';

ReactDOM.render(
	<Alert type="info" closable >这个公告可以关闭。</Alert>
	, mountNode
)

:::

:::demo 关闭时的回掉

import { Alert, Sweetalert } from 'zent';

ReactDOM.render(
	<Alert 
		type="info" 
		closable
		onClose={() => Sweetalert.alert({ content: '公告关闭了' })}
	>
		这个公告关闭时有回掉函数。
	</Alert>
	, mountNode
)

:::

API

参数	说明	类型	默认值	备选值
type	警告提示的样式	string	'info'	'info', 'warning', 'danger'
size	alert的大小	string	'normal'	'normal', 'large'
rounded	是否圆角	bool	false	true, false
closable	默认不可关闭	bool	false	true, false
onClose	关闭时的回调	func	noop
className	自定义额外类名	string	''
prefix	自定义前缀	string	'zent'

.zent-alert-example { padding-right: 32px; .zent-alert { margin-bottom: 20px; &:last-child { margin-bottom: 0; } a { color: #3388FF; margin-left: 10px; } } } .zenticon-error-circle { color: #FF4343; margin-right: 5px; }