UIkit3.x文档

警报

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

用法

要使用这个组件，请将 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 Description
.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>

组件选项

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

Option Value Default Description
animation Boolean 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);

事件

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

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

用法

组件可以使用以下方法：

关闭

UIkit.alert(element).close();

关闭并删除警报。