Display warning messages that require attention.
Display warning messages that require attention.
import { Alert } from '@yuntijs/ui';based on antd Alert component.
import { Alert } from '@yuntijs/ui';
export default () => {
return (
<Alert
message="The YuntiUI components are inspired by LobeUI and developed based on Antd components, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution."
showIcon
type="info"
/>
);
};| Name | Description | Type | Default |
|---|---|---|---|
| type | Type of Alert styles, options:`success`, `info`, `warning`, `error` | "warning"|"error"|"success"|"info" | -- |
| closable | Whether Alert can be closed | any | -- |
| closeText | -- | ReactNode | -- |
| message | Content of Alert | ReactNode | -- |
| description | Additional content of Alert | ReactNode | -- |
| onClose | Callback when close Alert | (event:E)=>void | -- |
| afterClose | Trigger when animation ending of Alert | ()=>void | -- |
| showIcon | Whether to show icon | boolean | -- |
| role | https://www.w3.org/TR/2014/REC-html5-20141028/dom.html#aria-role-attribute | string | -- |
| style | -- | {} | -- |
| prefixCls | -- | string | -- |
| className | -- | string | -- |
| rootClassName | -- | string | -- |
| banner | -- | boolean | -- |
| icon | -- | ReactNode | -- |
| closeIcon | -- | ReactNode | -- |
| action | -- | ReactNode | -- |
| onMouseEnter | -- | (event:E)=>void | -- |
| onMouseLeave | -- | (event:E)=>void | -- |
| onClick | -- | (event:E)=>void | -- |
| id | -- | string | -- |
| bordered | border type of Alert | "none"|"dashed"|"solid" | -- |