快讯 MDB Pro组件
警报-Bootstrap 5和Material Design 2.0组件
提供少量典型用户操作的上下文反馈消息 和灵活的警报消息。
注意:阅读 API 标签以找到所有可用选项,并 高级定制
基本例子
单击按钮以启动警报。
静态例子
链接颜色
附加内容
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
解雇
使用警报JavaScript插件,可以内嵌任何警报。这是如何做:
- 确保已加载警报插件或已编译的Bootstrap JavaScript。
- 添加一个关闭按钮和
.alert-dismissible
类,这将添加额外的填充 在警报的右侧,并放置关闭按钮。 - 在关闭按钮上,添加
data-mdb-dismiss =“ alert”
属性,该属性将触发 JavaScript功能。确保将button
元素用于 在所有设备上的正确行为。 - 要在关闭警报时为其制作动画,请确保添加
.fade
和.show classes
。
您可以通过现场演示看到这一点:
Show
您可以使用 show()
方法手动显示警报。
隐藏
您可以使用 hide()
方法手动隐藏警报。
放置
您可以使用来设置每个警报的位置
data-mdb-position
属性。
选择水平/垂直对齐
Current position: top-right
容器
您可以在任何地方显示警报。只需将其放在目标元素中并填写
带有ID或父类的 data-mdb-container
属性。
抵消
您可以使用 data-mdb-offset
标签设置警报的偏移量。
堆码
您可以使用启用堆叠警报
data-mdb-stacking
属性。
堆垛-集装箱
您还可以在容器内堆叠警报
快讯 - API
用法
通过数据属性
<div
class="alert alert-primary fade show"
id="example"
data-mdb-autohide="true"
data-mdb-delay="2000"
role="alert"
>
Example
</div>
通过JavaScript
mdb.Alert.getInstance(document.getElementById('show-example')).update({ position: ...,
width: ..., });
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$('.example-class').alert(options);
选件
Name | Type | Default | Description |
---|---|---|---|
position
|
String / null | null |
Sets a position for the alert |
delay |
Number | 1000 |
Sets the length of animation delay |
autohide
|
boolean | false |
Alerts will hide automatically or not |
width
|
String | 'unset' |
Sets width of alert |
container
|
String | - |
Defines id/class of the parent element |
offset |
Number | 10 |
Defines offset of the element |
stacking
|
Boolean | false |
Enables stacking alerts |
appendToBody
|
Boolean | false |
Appends element to the end of the body |
color
|
String / null | null |
Allows to set the color of an alert |
方法
Name | Description | Example |
---|---|---|
show |
Manually shows an alert | myAlert.show() |
hide |
Manually hides an alert | myAlert.hide() |
close |
Manually hides an alert (deletes it from DOM) | myAlert.close() |
dispose
|
Removes an mdb.Alert instance |
myAlert.dispose()
|
update |
Updates options of an mdb.Alert instance |
myAlert.update({position: 'top-right'})
|
mdb.Alert.getInstance(document.getElementById('show-example')).show();
大事记
Name | Description |
---|---|
close.mdb.alert
|
Fires immediately when the close instance method is called. |
closed.mdb.alert
|
Fired when the alert has been closed and CSS transitions have completed. |
const instance = mdb.Alert.getInstance(document.getElementById('show-example'));
instance.addEventListener('closed.mdb.alert', () => { // do something });
进口
MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件:
import { Alert } from 'mdb-ui-kit';