History

Benjamin Renard 4f47dc056d Tpl: Add stuff to handle static files * Move example application in example sub-directory * Widely use App::get() instead of Config::get()		2023-02-12 00:30:36 +01:00
..
dist/js	Tpl: Add stuff to handle static files	2023-02-12 00:30:36 +01:00
examples	Tpl: Add stuff to handle static files	2023-02-12 00:30:36 +01:00
src/js	Tpl: Add stuff to handle static files	2023-02-12 00:30:36 +01:00
gulpfile.js	Tpl: Add stuff to handle static files	2023-02-12 00:30:36 +01:00
package.json	Tpl: Add stuff to handle static files	2023-02-12 00:30:36 +01:00
README.md	Tpl: Add stuff to handle static files	2023-02-12 00:30:36 +01:00

README.md

Bootstrap4Dialog

Description

Create Bootstrap 4 / Bootstrap 5 Dialog Modals Easily.

================

Installation

npm i gr-bootstrap4dialog

Usage

Simple sample:

Bootstrap4Dialog.show({
    title: 'Title'
})

Sample without title:

Bootstrap4Dialog.show({
    message: 'Message',
    duration: 5
})

Sample with multiple options:

Bootstrap4Dialog.show({
    title: 'Title', 
    message: 'Message text goes here',
    backdrop: Bootstrap4Dialog.BACKDROP_STATIC,
    type: Bootstrap4Dialog.TYPE_DANGER,
    centered: true,
    scrollable: true,
    duration: 5, // display seconds
    open: function() {
        Bootstrap4Dialog.show({
            title: 'Dialog displayed',
            size: Bootstrap4Dialog.SIZE_SMALL,
            type: Bootstrap4Dialog.TYPE_LIGHT,
            duration: 0.5
        })

        $('#btn-cancel').focus();
    },
    close: function() { 
        Bootstrap4Dialog.show({
            message: 'Dialog closed',
            size: Bootstrap4Dialog.SIZE_SMALL,
            type: Bootstrap4Dialog.TYPE_LIGHT,
            backdrop: Bootstrap4Dialog.BACKDROP_NO,
            duration: 0.5
        }) 
    },
    buttons: [
        {
            id: 'btn-cancel',
            label: 'Cancel',
            cssClass: 'btn btn-light',
            action: function(dialog) {
                dialog.modal('hide');
            }
        }
    ]
})