快讯 MDB Pro组件

警报-Bootstrap 5和Material Design 2.0组件

提供少量典型用户操作的上下文反馈消息 和灵活的警报消息。

注意：阅读 API 标签以找到所有可用选项，并 高级定制

基本例子

单击按钮以启动警报。

静态例子

附加内容

解雇

使用警报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';