警告／Alert

显示成功、警告和错误的消息。

用法

要使用这个组件，请将 uk-alert 属性添加到块元素。

<div uk-alert></div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div uk-alert>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

关闭按钮

要创建关闭按钮并启用其功能，请将 .uk-alert-close 类添加到警报框中的 <button> 或 <a> 元素内。要应用关闭图标，请将 uk-close 类添加到 关闭组件。

<div uk-alert>
    <a class="uk-alert-close" uk-close></a>
</div>

  • Notice

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <div uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <h3>Notice</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

样式修饰

有几种样式修饰符可用。 只需添加以下类之一即可应用不同的外观。

Class 描述
.uk-alert-primary 给消息一个突出的样式。
.uk-alert-success 表示成功的消息。
.uk-alert-warning 表示警告的消息。
.uk-alert-danger 表示重要或错误的消息

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

  • <div class="uk-alert-primary" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<div class="uk-alert-success" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<div class="uk-alert-warning" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<div class="uk-alert-danger" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

组件选项

这些选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 了解更多

选项 可用值 默认值 描述
animation Boolean, String true 淡出效果，或者使用 动画组件。
duration Number 150 动画持续时间（以毫秒为单位）
sel-close CSS selector .uk-alert-close 触发关闭的元素

animation 是 Primary 的选项，如果它是属性值中的唯一选项，则可以省略其键。

<span uk-toggle=".my-class"></span>

JavaScript

了解更多有关 JavaScript 组件的信息。

初始化

UIkit.alert(element, options);

事件

附加此组件的元素将触发以下事件：

名称 描述
beforehide 在隐藏项之前激发。可以通过对事件调用 preventDefault() 来阻止隐藏。
hide 项目被隐藏后触发。

用法

组件可以使用以下方法：

关闭

UIkit.alert(element).close();

关闭并删除警报。

上一篇： Accordion

下一篇： Align

alert.md

# 警告／Alert

<p class="uk-text-lead">显示成功、警告和错误的消息。</p>

## Usage-用法

要使用这个组件，请将 `uk-alert` 属性添加到块元素。

```html
<div uk-alert></div>
```

```example
<div uk-alert>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
```

***

## Close button-关闭按钮

要创建关闭按钮并启用其功能，请将 `.uk-alert-close` 类添加到警报框中的 `<button>` 或 `<a>` 元素内。要应用关闭图标，请将 `uk-close` 类添加到 [关闭组件](close.md)。

```html
<div uk-alert>
    <a class="uk-alert-close" uk-close></a>
</div>
```

```example
<div uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <h3>Notice</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
```

***

## Style modifiers-样式修饰

有几种样式修饰符可用。 只需添加以下类之一即可应用不同的外观。

| Class               | 描述                               |
|:--------------------|:------------------------------------------|
| `.uk-alert-primary` | 给消息一个突出的样式。     |
| `.uk-alert-success` | 表示成功的消息。  |
| `.uk-alert-warning` | 表示警告的消息。 |
| `.uk-alert-danger`  | 表示重要或错误的消息  |

```example
<div class="uk-alert-primary" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<div class="uk-alert-success" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<div class="uk-alert-warning" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<div class="uk-alert-danger" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
```

***

## Component options-组件选项

这些选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 [了解更多](javascript.md#component-configuration)

| 选项      | 可用值           | 默认值           | 描述                                              |
|:------------|:----------------|:------------------|:---------------------------------------------------------|
| `animation` | Boolean, String | `true`            | 淡出效果，或者使用 [动画组件](animation.md)。 |
| `duration`  | Number          | `150`             | 动画持续时间（以毫秒为单位）                      |
| `sel-close` | CSS selector    | `.uk-alert-close` | 触发关闭的元素                               |

`animation` 是 _Primary_ 的选项，如果它是属性值中的唯一选项，则可以省略其键。

```html
<span uk-toggle=".my-class"></span>
```

***

## JavaScript

了解更多有关 [JavaScript 组件](javascript.md#programmatic-use)的信息。

### 初始化

```js
UIkit.alert(element, options);
```

### 事件

附加此组件的元素将触发以下事件：

| 名称         | 描述                                                              |
|:-------------|:-------------------------------------------------------------------------|
| `beforehide` | 在隐藏项之前激发。可以通过对事件调用 `preventDefault()` 来阻止隐藏。 |
| `hide`       | 项目被隐藏后触发。                                           |

### 用法

组件可以使用以下方法：

#### 关闭

```js
UIkit.alert(element).close();
```

关闭并删除警报。