2016-07-04 10:49:26 +08:00
|
|
|
|
---
|
|
|
|
|
|
category: Components
|
2016-09-21 11:28:38 +08:00
|
|
|
|
subtitle: 警告提示
|
|
|
|
|
|
title: Alert
|
2024-01-29 14:50:36 +08:00
|
|
|
|
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QsvtS41m45UAAAAAAAAAAAAADrJ8AQ/original
|
|
|
|
|
|
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gOTISoMFZV0AAAAAAAAAAAAADrJ8AQ/original
|
2022-11-09 12:28:04 +08:00
|
|
|
|
demo:
|
|
|
|
|
|
cols: 2
|
|
|
|
|
|
group:
|
|
|
|
|
|
title: 反馈
|
|
|
|
|
|
order: 6
|
2016-07-04 10:49:26 +08:00
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
警告提示，展现需要关注的信息。
|
|
|
|
|
|
|
|
|
|
|
|
## 何时使用
|
|
|
|
|
|
|
|
|
|
|
|
- 当某个页面需要向用户显示警告的信息时。
|
|
|
|
|
|
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
|
|
|
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
|
## 代码演示
|
|
|
|
|
|
|
2022-11-30 20:14:41 +08:00
|
|
|
|
<!-- prettier-ignore -->
|
2022-11-09 12:28:04 +08:00
|
|
|
|
<code src="./demo/basic.tsx">基本</code>
|
|
|
|
|
|
<code src="./demo/style.tsx">四种样式</code>
|
|
|
|
|
|
<code src="./demo/closable.tsx">可关闭的警告提示</code>
|
|
|
|
|
|
<code src="./demo/description.tsx">含有辅助性文字介绍</code>
|
|
|
|
|
|
<code src="./demo/icon.tsx">图标</code>
|
2022-11-17 11:30:20 +08:00
|
|
|
|
<code src="./demo/banner.tsx" iframe="250">顶部公告</code>
|
2022-11-09 12:28:04 +08:00
|
|
|
|
<code src="./demo/loop-banner.tsx">轮播的公告</code>
|
|
|
|
|
|
<code src="./demo/smooth-closed.tsx">平滑地卸载</code>
|
|
|
|
|
|
<code src="./demo/error-boundary.tsx">React 错误处理</code>
|
|
|
|
|
|
<code src="./demo/custom-icon.tsx" debug>自定义图标</code>
|
|
|
|
|
|
<code src="./demo/action.tsx">操作</code>
|
2023-08-17 15:00:04 +08:00
|
|
|
|
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
2022-11-09 12:28:04 +08:00
|
|
|
|
|
2016-07-04 10:49:26 +08:00
|
|
|
|
## API
|
|
|
|
|
|
|
2023-08-08 18:27:48 +08:00
|
|
|
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
|
|
|
|
|
2022-11-30 20:14:41 +08:00
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
|
|
|
|
| --- | --- | --- | --- | --- |
|
|
|
|
|
|
| action | 自定义操作项 | ReactNode | - | 4.9.0 |
|
|
|
|
|
|
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
|
|
|
|
|
|
| banner | 是否用作顶部公告 | boolean | false | |
|
2024-02-19 13:40:19 +08:00
|
|
|
|
| closable | 可关闭配置，>=5.15.0: 支持 `aria-*` | boolean \| ({ closeIcon?: React.ReactNode } & React.AriaAttributes) | `false` | |
|
2022-11-30 20:14:41 +08:00
|
|
|
|
| description | 警告提示的辅助性文字介绍 | ReactNode | - | |
|
|
|
|
|
|
| icon | 自定义图标，`showIcon` 为 true 时有效 | ReactNode | - | |
|
|
|
|
|
|
| message | 警告提示内容 | ReactNode | - | |
|
|
|
|
|
|
| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true | |
|
|
|
|
|
|
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` | |
|
|
|
|
|
|
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - | |
|
2019-12-11 14:15:45 +08:00
|
|
|
|
|
|
|
|
|
|
### Alert.ErrorBoundary
|
|
|
|
|
|
|
2022-11-30 20:14:41 +08:00
|
|
|
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
|
|
|
|
| --- | --- | --- | --- | --- |
|
|
|
|
|
|
| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | |
|
|
|
|
|
|
| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | |
|
2023-09-22 09:57:58 +08:00
|
|
|
|
|
|
|
|
|
|
## Design Token
|
|
|
|
|
|
|
|
|
|
|
|
<ComponentTokenTable component="Alert"></ComponentTokenTable>
|
