creativetimofficial / ct-argon-dashboard-pro

A beautiful Premium Dashboard for Bootstrap 5.
https://demos.creative-tim.com/argon-dashboard-pro/pages/dashboards/landing
30 stars 13 forks source link

Notify work ? #3

Closed MwSpaceLLC closed 4 years ago

MwSpaceLLC commented 5 years ago

Hi,

I'm here https://demos.creative-tim.com/argon-dashboard-pro/docs/plugins/notify.html

how do we generate a custom notification in js? In the examples the js code is not there. why ?

The library examples do not generate notifications with the right template.

MwSpaceLLC commented 5 years ago

ok, ho risolto dasolo anche se ho pagato 70 € per questa dashboard! in un file (js/components/vendor/notify.js) ho messo :

(function ($) {
    $.noty = function (type = null, title, message) {

        let t = (type) ? type : 'info';
        let i = 'fas fa-info-circle';
        switch (t) {
            case 'danger':
                i = 'far fa-times-circle';
                break;
            case 'success':
                i = 'far fa-check-circle';
                break;
        }
        $.notify({
            icon: i,
            title: title,
            message: message,
            url: ''
        }, {
            element: 'body',
            type: t,
            allow_dismiss: true,
            placement: {
                from: 'top',
                align: 'center'
            },
            offset: {
                x: 15, // Keep this as default
                y: 15 // Unless there'll be alignment issues as this value is targeted in CSS
            },
            spacing: 10,
            z_index: 1080,
            delay: 2500,
            timer: 25000,
            url_target: '_blank',
            mouse_over: false,
            animate: {
                // enter: animIn,
                // exit: animOut
                enter: "animated fadeInUp",
                exit: "animated fadeOut"
            },
            template: '<div data-notify="container" class="alert alert-dismissible alert-{0} alert-notify" role="alert">' +
            '<span class="alert-icon" data-notify="icon"></span> ' +
            '<div class="alert-text"</div> ' +
            '<span class="alert-title" data-notify="title">{1}</span> ' +
            '<span data-notify="message">{2}</span>' +
            '</div>' +
            // '<div class="progress" data-notify="progressbar">' +
            // '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
            // '</div>' +
            // '<a href="{3}" target="{4}" data-notify="url"></a>' +
            '<button type="button" class="close" data-notify="dismiss" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
            '</div>'
        });
    };
}(jQuery));

E per utilizzarlo :

<script type="application/javascript">
    $.noty('danger','merda','sei troppo grasso!');
    $.noty('success','merda','sei troppo grasso!');
    $.noty('info','merda','sei troppo grasso!');
</script>

Risultato :

image

👎

rarestoma commented 5 years ago

Hi, Thank you for the interest in our products and sorry for the late response. Please check the official documentation(http://bootstrap-notify.remabledesigns.com/). All the best, Rares