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>

关闭按钮

要创建关闭按钮并启用其功能，在提示框内的 <button> 或 <a> 元素上添加 .uk-alert-close 类。要应用关闭图标，添加来自 Close 组件的 uk-close 属性。

<div uk-alert>
    <a href 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 href 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>

样式修饰符

组件提供了若干样式修饰符。只需添加以下任意一个类，即可应用不同的外观。

类	描述
`.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.

<div class="uk-alert-primary" uk-alert>
    <a href 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 href 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 href 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 href 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	`true`	淡出或直接隐藏。
`duration`	Number	`150`	动画时长，单位为毫秒。
`sel-close`	CSS selector	`.uk-alert-close`	关闭触发元素。

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

<span uk-alert="false"></span>

JavaScript

了解关于 JavaScript 组件的更多内容。

初始化

UIkit.alert(element, options);

事件

以下事件会在绑定了该组件的元素上触发：

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

方法

该组件提供以下方法：

关闭

UIkit.alert(element).close();

关闭并移除 Alert。

文档

Alert

Notice