警报

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

使用

要应用此组件，请将 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.

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 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();

关闭并移除警报。

文档

警报

注意