警告

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

用法

要应用此组件，请将 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 href class="uk-alert-close" uk-close></a>
</div>

注意

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`	布尔值	`true`	淡出或直接隐藏。
`duration`	数字	`150`	动画持续时间（毫秒）。
`sel-close`	CSS 选择器	`.uk-alert-close`	关闭触发元素。

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

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

JavaScript

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

初始化

UIkit.alert(element, options);

事件

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

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

方法

以下方法可用于该组件

关闭

UIkit.alert(element).close();

关闭并移除警告。

文档

警告

注意