popconfirm MDB Pro组件

Popconfirm-Bootstrap 5和Material Design 2.0组件

Popconfirm基本上是带有确认按钮的简单警报.

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


基本例子

popconfirm用法的基本示例


显示模式

您需要将 .popconfirm-toggle 类应用于按钮。

您可以在 modal inline 之间进行选择,以修改显示模式。

模式模式显示在屏幕中央,并且是静态的,您无法更改其模式 位置,但可以应用所有其他属性


图标示例

要将图标应用于消息,您需要在 data-mdb-popconfirm-icon 中提供类,例如 举个例子 data-mdb-popconfirm-icon="fa fa-comment"


内联位置

您可以在不同的位置之间进行选择

可用职位: top left; top; top right; right top; right; right bottom; bottom right; bottom; bottom left; left bottom; left; left top;

popconfirm - API


用法

通过类

您需要将 .popconfirm-toggle 类应用于按钮。


        <button type="button" class="btn btn-primary popconfirm-toggle">
          Default
        </button>
      

通过JavaScript

您需要将 .popconfirm-toggle 类应用于按钮。


        const popconfirmElements = document.querySelectorAll('.popconfirm-toggle');
        popconfirmElements.forEach((currentElement) => { 
          new mdb.Popconfirm(currentElement)
        });
      

选件

可以通过数据属性或JavaScript传递选项。对于数据属性,请附加 选项名称为 data-mdb-,如 data-mdb-mode="", f或两个字 选项名称使用连字符 "-"data-mdb-ok-text=""

Name Type Default Description
cancelLabel String 'Cancel' Text rendered under cancel button for screen readers
cancelText String 'Cancel' Text of cancel button, if empty string - button doesn't render
confirmLabel String 'Confirm' Text rendered under confirm button for screen readers
popconfirmIcon String '' Icon rendered at start of message
message String 'Are you sure?' Message rendered in popconfirm
popconfirmMode String 'inline' Mode of display -> 'inline' or 'modal'
okClass String 'btn-primary' Class of confirm button
okText String 'OK' Text of confirm button
position String '' Specify position to display popover

Methods

Method Description
getInstance Static method which allows you to get the popconfirm instance associated with a DOM element
dispose Destroys an element's popconfirm

          const popconfirmElements = document.querySelectorAll('.popconfirm-toggle');
          popconfirmElements.forEach((currentElement) => { 
            const button = new mdb.Popconfirm(currentElement);
            const buttonInstance = button.getInstance();
          })
        

大事记

Name Description
cancel.mdb.popconfirm This event fires immediately when the popconfirm is closed without confirm button click.
confirm.mdb.popconfirm This event fires immediately when the popconfirm is closed using confirm button.

          document.addEventListener('cancel.mdb.popconfirm', () => { //Your code goes here });
        

进口

Popconfirm 也适用于模块捆绑器。使用以下代码 导入此组件:


          import Popconfirm from './pro/popconfirm';