-
-
-
-
-
-
-
-
-
-
Components
-
General
-
Layout
-
Navigation
-
Data Entry
-
Data Display
-
Feedback
-
Other
-
-
-
-
Alert 警告提示
警告提示,展现需要关注的信息。
何时使用
- 当某个页面需要向用户显示警告的信息时。
- 非浮层的静态展现形式,始终展现,不会自动消失,用户可以点击关闭。
代码演示
Success Text
最简单的用法,适用于简短的警告提示。
import { Alert } from 'choerodon-ui';
ReactDOM.render(
<Alert message="Success Text" type="success" />,
mountNode);
显示关闭按钮,点击可关闭警告提示。
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.
可口的图标让信息类型更加醒目。
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
共有四种样式
success
、info
、warning
、error
。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
含有辅助性文字介绍的警告提示。
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
。import { Alert } from 'choerodon-ui';
ReactDOM.render(
<Alert message="Info Text" type="info" closeText="Close Now" />,
mountNode);
平滑、自然的卸载提示
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 | 自定义图标类型,showIcon 为 true 时有效 |
string | - |
type | 指定警告提示的样式,有四种选择 success 、info 、warning 、error |
string | info ,banner 模式下默认值为 warning |
onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | 无 |