dominus77 / yii2-sweetalert2-widget

为Yii2渲染SweetAlert2小部件。

维护者

详细信息

github.com/Dominus77/yii2-sweetalert2-widget

源代码

问题

资助包维护！
Patreon

安装数: 41,551

依赖项: 2

建议者: 0

安全: 0

星星: 20

观察者: 2

分支: 12

开放问题: 0

类型:yii2-extension

v2.0.0 2022-07-09 11:55 UTC

Requires

  • npm-asset/animate.css: ^4.1
  • npm-asset/sweetalert2: ^11.4
  • npm-asset/sweetalert2--themes: ^5.0
  • yiisoft/yii2: ~2.0

Requires (Dev)

MIT 36f24b0724f17a3769f6cd95944e6f31c1988eb6

  • Alexey Schevchenko <ivanovosity.woop@gmail.com>

extensionwidgetyii2Dominus77sweetalert2

This package is auto-updated.

Last update: 2024-09-09 20:27:14 UTC

README

Latest Version Software License Build Status codecov Scrutinizer Code Quality Total Downloads

为Yii2渲染SweetAlert2小部件。

Logo SweetAlert2

安装

安装此扩展的首选方法是通过composer。

运行

php composer.phar require dominus77/yii2-sweetalert2-widget "^2.0"

或者在您的composer.json文件的require部分添加

"dominus77/yii2-sweetalert2-widget": "^2.0"

。

用法

扩展安装后，只需在代码中通过以下方式使用它

闪存消息

视图

<?php \dominus77\sweetalert2\Alert::widget(['useSessionFlash' => true]); ?>

控制器

一条基本消息

Yii::$app->session->setFlash('message', 'Any fool can use a computer');

一个标题和下方的文本

Yii::$app->session->setFlash(Alert::TYPE_QUESTION, [
    'title' => 'The Internet?',
    'text' => 'That thing is still around?',
]);

一个带有标题、错误图标、文本和页脚的模态窗口

Yii::$app->session->setFlash(Alert::TYPE_ERROR, [
    'title' => 'Oops...',
    'text' => 'Something went wrong!',
    'footer' => '<a href="">Why do I have this issue?</a>'
]);

一个包含长内容的模态窗口

Yii::$app->session->setFlash('image1', [
    'imageUrl' => 'https://placeholder.pics/svg/300x1500',
    'imageHeight' => 1500,
    'imageAlt' => 'A tall image'
]);

自定义HTML描述和按钮，带有ARIA标签

Yii::$app->session->setFlash('customHtml', [
    'title' => '<strong>HTML <u>example</u></strong>',
    'icon' => Alert::TYPE_INFO,
    'html' => '
       You can use <b>bold text</b>, 
       <a href="//sweetalert2.github.io">links</a>
       and other HTML tags
     ',
    'showCloseButton' => true,
    'showCancelButton' => true,
    'focusConfirm' => false,
    'confirmButtonText' => '<i class="fa fa-thumbs-up"></i> Great!',
    'confirmButtonAriaLabel' => 'Thumbs up, great!',
    'cancelButtonText' => '<i class="fa fa-thumbs-down"></i>',
    'cancelButtonAriaLabel' => 'Thumbs down',
]);

一个带有三个按钮的对话框

Yii::$app->session->setFlash('dialog', [
    'title' => 'Do you want to save the changes?',
    'showDenyButton' => true,
    'showCancelButton' => true,
    'confirmButtonText' => 'Save',
    'denyButtonText' => "Don't save",
    'callback' => new \yii\web\JsExpression("
        (result) => {
            if (result.isConfirmed) {
                Swal.fire('Saved!', '', 'success');
            } else if (result.isDenied) {
                Swal.fire('Changes are not saved', '', 'info');
            }
        }
    ")
]);

自定义定位的对话框

Yii::$app->session->setFlash('position', [
    'position' => 'top-end',
    'icon' => Alert::TYPE_SUCCESS,
    'title' => 'Your work has been saved',
    'showConfirmButton' => false,
    'timer' => 1500
]);

带有Animate.css的自定义动画

设置为视图

<?php \dominus77\sweetalert2\Alert::widget([
    'useSessionFlash' => true,
    'customAnimate' => true
]); ?>

还

Yii::$app->session->setFlash('customAnimate', [
    'title' => 'Custom animation with Animate.css',
    'showClass' => [
        'popup' => 'animate__animated animate__fadeInDown'
    ],
    'hideClass' => [
        'popup' => 'animate__animated animate__fadeOutUp'
    ],
]);

一个带有附加到“确认”按钮的函数的确认对话框

Yii::$app->session->setFlash('confirm', [
    'title' => 'Are you sure?',
    'text' => "You won't be able to revert this!",
    'icon' => Alert::TYPE_WARNING,
    'showCancelButton' => true,
    'confirmButtonColor' => '#3085d6',
    'cancelButtonColor' => '#d33',
    'confirmButtonText' => 'Yes, delete it!',
    'callback' => new \yii\web\JsExpression("
        (result) => {
            if (result.isConfirmed) {
                Swal.fire(
                    'Deleted!',
                    'Your file has been deleted.',
                    'success'
                );
            }
        }
    ")
]);

...通过传递参数，您可以为“取消”执行其他操作

Yii::$app->session->setFlash('confirm2', [
    'title' => 'Are you sure?',
    'text' => "You won't be able to revert this!",
    'icon' => Alert::TYPE_WARNING,
    'showCancelButton' => true,
    'confirmButtonText' => 'Yes, delete it!',
    'cancelButtonText' => 'No, cancel!',
    'reverseButtons' => true,
    'mixinOptions' => [
        'customClass' => [
            'confirmButton' => 'btn btn-success',
            'cancelButton' => 'btn btn-danger',
        ],
        'buttonsStyling' => false
    ],
    'callback' => new \yii\web\JsExpression("
        (result) => {
            if (result.isConfirmed) {
                SwalQueue.fire(
                    'Deleted!',
                    'Your file has been deleted.',
                    'success'
                );
            } else if (result.dismiss === Swal.DismissReason.cancel) {
                SwalQueue.fire(
                    'Cancelled',
                    'Your imaginary file is safe :)',
                    'error'
                );
            }
        }
    ")
]);

带有自定义图片的消息

Yii::$app->session->setFlash('image', [
    'title' => 'Sweet!',
    'text' => 'Modal with a custom image.',
    'imageUrl' => 'https://unsplash.it/400/200',
    'imageWidth' => 400,
    'imageHeight' => 200,
    'imageAlt' => 'Custom image',
]);

带有自定义宽度、填充、背景和动画的Nyan Cat的消息

Yii::$app->session->setFlash('NyanCat', [
    'title' => 'Custom width, padding, color, background.',
    'width' => 600,
    'padding' => '3em',
    'color' => '#716add',
    'background' => '#fff url(/images/trees.png)',
    'backdrop' => "rgba(0,0,123,0.4) url('/images/nyan-cat.gif') left top no-repeat",
]);

带有自动关闭计时器的消息

Yii::$app->session->setFlash('key1', [
    'title' => 'Auto close alert!',
    'html' => 'I will close in <b></b> milliseconds.',
    'timer' => 2000,
    'timerProgressBar' => true,
    'didOpen' => new \yii\web\JsExpression("
        () => {
            Swal.showLoading();
            const b = Swal.getHtmlContainer().querySelector('b');
            timerInterval = setInterval(() => {
                b.textContent = Swal.getTimerLeft();
            }, 100)
        }
    "),
    'willClose' => new \yii\web\JsExpression("
        () => {                            
            clearInterval(timerInterval);
        }
    "),
    'callback' => new \yii\web\JsExpression("
        (result) => {
            if (result.dismiss === Swal.DismissReason.timer) {
                console.log('I was closed by the timer');
            }
        }
    "),
]);

支持阿拉伯语、波斯语、希伯来语和其他从右到左的RTL语言

Yii::$app->session->setFlash('rlt', [
    'title' => 'هل تريد الاستمرار؟',
    'icon' => Alert::TYPE_QUESTION,
    'iconHtml' => '؟',
    'confirmButtonText' => 'نعم',
    'cancelButtonText' => 'لا',
    'showCancelButton' => true,
    'showCloseButton' => true,
]);

AJAX请求示例

Yii::$app->session->setFlash('ajax', [
    'title' => 'Submit your Github username',
    'input' => 'text',
    'inputAttributes' => [
        'autocapitalize' => 'off'
    ],
    'showCancelButton' => true,
    'confirmButtonText' => 'Look up',
    'showLoaderOnConfirm' => true,
    'backdrop' => true,
    'preConfirm' => new \yii\web\JsExpression("
        (login) => {
            return fetch('//api.github.com/users/' + login)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(response.statusText);
                    }
                    return response.json();
                })
                .catch(error => {
                    Swal.showValidationMessage(
                        'Request failed: ' + error
                    );
                })
        }
    "),
    'allowOutsideClick' => new \yii\web\JsExpression("
        () => !Swal.isLoading()
    "),
    'callback' => new \yii\web\JsExpression("
        (result) => {
            if (result.isConfirmed) {
                Swal.fire({
                    title: result.value.login + '\'s avatar',
                    imageUrl: result.value.avatar_url
                });
            }
        }
    ")
]);

Mixin示例

Yii::$app->session->setFlash('toast', [
    'icon' => Alert::TYPE_SUCCESS,
    'title' => 'Signed in successfully',
    'mixinOptions' => [
        'toast' => true,
        'position' => 'top-end',
        'showConfirmButton' => false,
        'timer' => 3000,
        'timerProgressBar' => true,
        'didOpen' => new \yii\web\JsExpression("
            (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer);
                toast.addEventListener('mouseleave', Swal.resumeTimer);
            }
        ")
    ],
]);

多个

Yii::$app->session->setFlash('multiple', [
    'items' => [
        [
            'icon' => Alert::TYPE_WARNING,
            'title' => 'Your title 1',
            'text' => 'Your message 1',
            'confirmButtonText' => 'Done 1!',
        ],
        [
            'icon' => Alert::TYPE_SUCCESS,
            'title' => 'Your title 2',
            'text' => 'Your message 2',
            'confirmButtonText' => 'Done 2!',
        ]
    ]
]);

或

Yii::$app->session->setFlash('multiple2', [
    'mixinOptions' => [
        'toast' => true,
        'position' => 'top-right',
        'showConfirmButton' => false,
        'timer' => 1500,
        'timerProgressBar' => true,
    ],
    'items' => [
        [

            'icon' => Alert::TYPE_INFO,
            'title' => 'Your title 1',
            'text' => 'Your message 1',
            'callback' => new \yii\web\JsExpression("
                (result) => {console.log('Close Your title 1')}
            "),
        ],
        [

            'icon' => Alert::TYPE_SUCCESS,
            'title' => 'Your title 2',
            'text' => 'Your message 2',
            'callback' => new \yii\web\JsExpression("
                (result) => {console.log('Close Your title 2')}
            "),
        ],
        [

            'icon' => Alert::TYPE_SUCCESS,
            'title' => 'Your title 3',
            'text' => 'Your message 3',
            'callback' => new \yii\web\JsExpression("
                (result) => {console.log('Close Your title 3')}
            "),
        ]
    ]
]);

渲染小部件

视图

<?php
use dominus77\sweetalert2\Alert;

一条基本消息

<?php Alert::widget([
    'options' => [
        'Any fool can use a computer'
    ],
]); ?>

一个标题和下方的文本

<?php Alert::widget([
    'options' => [
        'The Internet?',
        'That thing is still around?',
        Alert::TYPE_QUESTION
    ]
]); ?>

一条成功消息！

<?php Alert::widget([
    'options' => [
        'Good job!',
        'You clicked the button!',
        Alert::TYPE_SUCCESS
    ]
]); ?>

带有自动关闭计时器的消息

<?php Alert::widget([
    'options' => [
        'title' => 'Auto close alert!',
        'text' => 'I will close in 2 seconds.',
        'timer' => 2000,
    ],
    'callback' => new \yii\web\JsExpression("
        (result) => {
            if (result.dismiss === 'timer') {
                console.log('I was closed by the timer')
            }
        }
    "),
]); ?>

自定义HTML描述和按钮

<?php Alert::widget([
    'options' => [
        'title' => '<i>HTML</i> <u>example</u>',
        'icon' => Alert::TYPE_INFO,
        'html' => 'You can use <b>bold text</b>,'
            . '<a href="//github.com">links</a> '
            . 'and other HTML tags',
        'showCloseButton' => true,
        'showCancelButton' => true,
        'confirmButtonText' => '<i class="fa fa-thumbs-up"></i> Great!',
        'cancelButtonText' => '<i class="fa fa-thumbs-down"></i>',
    ]
]); ?>

带有Animate.css的自定义动画

示例

<?php Alert::widget([
    'customAnimate' => true,
    'options' => [
        'title' => 'Custom animation with Animate.css',
        'showClass' => [
            'popup' => 'animate__animated animate__fadeInDown'
        ],
        'hideClass' => [
            'popup' => 'animate__animated animate__fadeOutUp'
        ]
    ]
]); ?>

一条带有附加到“确认”按钮的函数的警告消息...

<?php Alert::widget([
    'options' => [
        'title' => 'Are you sure?',
        'text' => "You won't be able to revert this!",
        'icon' => Alert::TYPE_WARNING,
        'showCancelButton' => true,
        'confirmButtonColor' => '#3085d6',
        'cancelButtonColor' => '#d33',
        'confirmButtonText' => 'Yes, delete it!',
    ],
    'callback' => new \yii\web\JsExpression("
        (result) => {
            if(result.value === true){
                Swal.fire('Deleted!','Your file has been deleted.','success');
            }
        }
    "),
]); ?>

...通过传递参数，您可以为“取消”执行其他操作。

<?php Alert::widget([
    'mixinOptions' => [
        'customClass' => [
            'confirmButton' => 'btn btn-success',
            'cancelButton' => 'btn btn-danger',
        ],
        'buttonsStyling' => false
    ],
    'options' => [
        'title' => 'Are you sure?',
        'text' => "You won't be able to revert this!",
        'icon' => Alert::TYPE_WARNING,
        'showCancelButton' => true,
        'confirmButtonColor' => '#3085d6',
        'cancelButtonColor' => '#d33',
        'confirmButtonText' => 'Yes, delete it!',
        'cancelButtonText' => 'No, cancel!',
    ],
    'callback' => new \yii\web\JsExpression("
        (result) => {
            if(result.value) {
                Swal.fire('Deleted!', 'Your file has been deleted.', 'success');
            }            
            if (result.dismiss === 'cancel') {
                Swal.fire(
                    'Cancelled',
                    'Your imaginary file is safe :)',
                    'error'
                );
            }
        }
    "),
]); ?>

主题

视图

use dominus77\sweetalert2\assets\ThemeAsset;

/** @var yii\web\View $this */

ThemeAsset::register($this, ThemeAsset::THEME_DARK);

测试

$ ./vendor/bin/phpunit

更多信息

请参阅SweetAlert2

许可

MIT许可（MIT）。请参阅许可文件以获取更多信息。