# Alert 提示条

[toc]

`Alert` 组件大多放置在导航栏下方，用于系统提醒等通知。

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-alert": "../dist/alert/index"
  }
}

```

## 用法

### 通知类型

通过 `variant` 属性来设置通知类型，支持 `info`、`success`、`danger` 三种类型，默认为 `info`。

```html
<tea-alert 
  variant="success" 
  text="提示文字提示文字"
>
</tea-alert>
```

### 展示左侧图标

通过 `icon` 属性设置左侧图标。

```html
<tea-alert 
  variant="success" 
  icon="success-fill" 
  text="提示文字提示文字"
>
</tea-alert>
```

### 展示关闭按钮

通过 `closeable` 属性来控制展示或隐藏关闭按钮，点击按钮即关闭当前组件。

```html
<tea-alert 
  variant="success" 
  icon="success-fill" 
  text="提示文字提示文字" 
  closeable
>
</tea-alert>
```

## Props

| 参数        | 描述                                         | 类型        | 默认值     | 可选值                             |
| --------- | ------------------------------------------ | --------- | ------- | ------------------------------- |
| variant   | 通知类型                                       | `String`  | `info`  | `["info", "success", "danger"]` |
| icon      | 左侧图标名称，可选值请参见 [Icon 组件](/mp/packages/icon) | `String`  | -       | -                               |
| text      | 文字内容                                       | `String`  | -       | -                               |
| closeable | 是否展示右侧关闭按钮、并点击按钮可关闭当前组件                    | `Boolean` | `false` | -                               |

## 事件

| 事件名        | 描述     | 回调参数 |
| ---------- | ------ | ---- |
| bind:close | 点击关闭按钮 | -    |

## Slots

| 名称  | 描述      |
| --- | ------- |
| -   | 自定义显示内容 |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                            | 默认值                             | 描述  |
| ------------------------------ | ------------------------------- | --- |
| alert-text-size                | @font-size-md                   | -   |
| alert-padding                  | @padding-sm @padding-md         | -   |
| alert-info-text-color          | @text-primary-dark-color        | -   |
| alert-info-background-color    | @background-primary-light-color | -   |
| alert-success-text-color       | @text-success-dark-color        | -   |
| alert-success-background-color | @background-success-light-color | -   |
| alert-danger-text-color        | @text-danger-dark-color         | -   |
| alert-danger-background-color  | @background-danger-light-color  | -   |