警报
显示成功，警告和错误消息。
用法
要使用这个组件，请将 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>
-
<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 |
表示重要或错误的消息 |
-
<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, 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);
事件
附加此组件的元素将触发以下事件：
| Name | Description |
|---|---|
beforehide |
在隐藏项之前激发。可以通过对事件调用 preventDefault() 来阻止隐藏。 |
hide |
项目被隐藏后触发。 |
用法
组件可以使用以下方法：
关闭
UIkit.alert(element).close();
关闭并删除警报。