敬酒 MDB Pro component

吐司-Bootstrap 5和Material Design 2.0组件

通过“吐司”向您的访客推送通知，“吐司”是一种轻便且易于定制的 警报消息。吐司旨在模仿已经流行的推送通知 通过移动和桌面操作系统。

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

基本例子

单击按钮启动烤面包。

静态例子

色彩

放置

您可以使用设置每个通知的位置 data-mdb-position 属性或 update（）方法。

选择水平/垂直对齐

Current position: top-right

抵消

您还可以使用更改每个通知的偏移量 data-mdb-offset 属性或 update（）方法。

容器

您可以在任何地方显示通知。只需将吐司放入目标元素中并填充 data-mdb-container 属性，其ID为父级或 update（）方法。

堆码

您可以使用以下方式打开/关闭堆叠通知 data-mdb-stacking 属性或 update（）方法。

堆放（容器）

您可以使用以下方式打开/关闭堆叠通知 data-mdb-stacking 属性或 update（）方法。

敬酒 - API

用法

通过数据属性


        <div
          class="toast"
          id="example-toast"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
          data-mdb-autohide="false"
          data-mdb-position="..."
          data-mdb-container="..."
          data-mdb-offset="..."
        >
          <div class="toast-header">
            <svg
              class="bd-placeholder-img rounded me-2"
              width="20"
              height="20"
              xmlns="http://www.w3.org/2000/svg"
              preserveAspectRatio="xMidYMid slice"
              role="img"
              focusable="false"
            >
              <rect width="100%" height="100%" fill="#007aff"></rect>
            </svg>
            <strong class="me-auto">MDBootstrap</strong>
            <small>11 mins ago</small>
            <button
              type="button"
              class="ms-2 mb-1 close"
              data-mdb-dismiss="toast"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="toast-body">Example toast</div>
        </div>

通过JavaScript


        mdb.Toast.getInstance(document.getElementById('placement-example-toast')).update({ position:
        ..., offset: ..., container: ..., });

通过jQuery

注意：默认情况下，MDB 不包含jQuery，并且您拥有 自行添加到项目中。

 $('.example-class').toast(options);

选件

Name Type Default Description
width String / null null Defines the width of a toast
position String 'top-left' Changes position of toast
color String Sets background of a toast (basic MDB colors)
offset Number '10' Changes offset of toast
container String - Defines id/class of parent element
autohide Boolean true Toasts will hide automatically or not
animation Boolean true Toasts will be animated or not
delay Boolean 500 Sets length of animation delay
appendToBody Boolean false Appends element to the end of body
stacking Boolean true Enables stacking notifications

方法

Name Parameters Description Example
show - Shows toast instance.show()
hide - Hides toast instance.hide()
dispose - Removes a mdb.Toast instance instance.dispose()
update options (Object) Updates options of mdb.Toast instance instance.update({position: 'top-center'}) 

        mdb.Toast.getInstance(document.getElementById('show-example')).show();

大事记

Name Description
show.mdb.toast Emitted when a toast has been toggled
shown.mdb.toast Emitted once toast is shown
hide.mdb.toast Emitted when a toast has been toggled
hidden.mdb.toast Emitted once toast is hidden 

        const instance = mdb.Toast.getInstance(document.getElementById('show-example'));
        instance.addEventListener('hidden.mdb.toast', () => { // do something });

进口

MDB UI KIT 也可与模块捆绑器一起使用。使用以下代码导入 此组件：

 import { Toast } from 'mdb-ui-kit';