2021-10-22 19:32:39 +08:00
---
2021-10-25 15:21:08 +08:00
title: Alert
2021-10-22 19:32:39 +08:00
lang: en-US
---
2021-09-17 00:18:50 +08:00
# Alert
2020-08-13 15:18:26 +08:00
Displays important alert messages.
2022-03-24 15:35:15 +08:00
## Basic Usage
2020-08-13 15:18:26 +08:00
Alert components are non-overlay elements in the page that does not disappear automatically.
:::demo Alert provides 4 types of themes defined by `type` , whose default value is `info` .
2021-09-17 00:18:50 +08:00
alert/basic
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2021-09-17 00:18:50 +08:00
## Theme
2020-08-13 15:18:26 +08:00
Alert provide two different themes, `light` and `dark` .
:::demo Set `effect` to change theme, default is `light` .
2021-09-04 19:29:28 +08:00
2021-09-17 00:18:50 +08:00
alert/theme
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2022-03-24 15:35:15 +08:00
## Customizable Close Button
2020-08-13 15:18:26 +08:00
Customize the close button as texts or other symbols.
:::demo Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. `closable` attribute decides if the component can be closed or not. It accepts `boolean` , and the default is `true` . You can set `close-text` attribute to replace the default cross symbol as the close button. Be careful that `close-text` must be a string. `close` event fires when the component is closed.
2021-09-17 00:18:50 +08:00
alert/close-button
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2022-03-24 15:35:15 +08:00
## With Icon
2020-08-13 15:18:26 +08:00
Displaying an icon improves readability.
:::demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type.
2021-09-17 00:18:50 +08:00
alert/icon
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2022-03-24 15:35:15 +08:00
## Centered Text
2020-08-13 15:18:26 +08:00
Use the `center` attribute to center the text.
:::demo
2021-09-17 00:18:50 +08:00
alert/center
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2022-03-24 15:35:15 +08:00
## With Description
2020-08-13 15:18:26 +08:00
Description includes a message with more detailed information.
:::demo Besides the required `title` attribute, you can add a `description` attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.
2021-09-17 00:18:50 +08:00
alert/description
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2022-03-24 15:35:15 +08:00
## With Icon and Description
2020-08-13 15:18:26 +08:00
:::demo At last, this is an example with both icon and description.
2021-09-17 00:18:50 +08:00
alert/icon-description
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2022-03-24 15:35:15 +08:00
## Alert API
2021-09-04 19:29:28 +08:00
2022-03-24 15:35:15 +08:00
### Alert Attributes
2020-08-13 15:18:26 +08:00
2022-03-24 15:35:15 +08:00
| Name | Description | Type | Default | Required |
| ------------- | --------------------------------- | --------------------------------------------- | --------- | -------- |
| `title` | alert title. | `string` | — | No |
| `type` | alert type. | `'success' \| 'warning' \| 'info' \| 'error'` | `'info'` | No |
| `description` | descriptive text. | `string` | — | No |
| `closable` | whether closable or not. | `boolean` | `true` | No |
| `center` | whether to center the text. | `boolean` | `false` | No |
| `close-text` | customized close button text. | `string` | — | No |
| `show-icon` | whether a type icon is displayed. | `boolean` | `false` | No |
| `effect` | theme style. | `'light' \| 'dark'` | `'light'` | No |
2020-08-13 15:18:26 +08:00
2022-03-24 15:35:15 +08:00
### Alert Events
2020-08-13 15:18:26 +08:00
2022-03-24 15:35:15 +08:00
| Name | Description | Type |
| ------- | ----------------------------- | --------------------------- |
| `close` | trigger when alert is closed. | `(evt: MouseEvent) => void` |
2021-09-04 19:29:28 +08:00
2022-03-24 15:35:15 +08:00
### Alert Slots
| Name | Description |
| --------- | --------------------------------- |
| `default` | content of the alert description. |
| `title` | content of the alert title. |
