PHPackages                             dominus77/yii2-sweetalert2-widget - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. dominus77/yii2-sweetalert2-widget

ActiveYii2-extension[Utility & Helpers](/categories/utility)

dominus77/yii2-sweetalert2-widget
=================================

Renders a SweetAlert2 widget for Yii2.

v2.0.0(3y ago)2070.4k↓34.7%111MITPHPCI failing

Since May 2Pushed 3y ago1 watchersCompare

[ Source](https://github.com/Dominus77/yii2-sweetalert2-widget)[ Packagist](https://packagist.org/packages/dominus77/yii2-sweetalert2-widget)[ Patreon](https://www.patreon.com/dominus77)[ RSS](/packages/dominus77-yii2-sweetalert2-widget/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (6)Versions (20)Used By (1)

yii2-sweetalert2-widget
=======================

[](#yii2-sweetalert2-widget)

[![Latest Version](https://camo.githubusercontent.com/36c58cbbdbee791e731068712499d3e6a39619b78f054a1f460e2c339c3c3797/68747470733a2f2f706f7365722e707567782e6f72672f646f6d696e757337372f796969322d7377656574616c657274322d7769646765742f762f737461626c65)](https://packagist.org/packages/dominus77/yii2-sweetalert2-widget)[![Software License](https://camo.githubusercontent.com/d35ecf6a7e86f5eeeee921a4bd24662097d43424c105e33463ff031785eb7210/68747470733a2f2f706f7365722e707567782e6f72672f646f6d696e757337372f796969322d7377656574616c657274322d7769646765742f6c6963656e7365)](https://github.com/Dominus77/yii2-sweetalert2-widget/blob/master/LICENSE.md)[![Build Status](https://camo.githubusercontent.com/06b248d445bfa843a73da970b2e051948ceba4be1e7c108e6d72b83e7806fe72/68747470733a2f2f7472617669732d63692e6f72672f446f6d696e757337372f796969322d7377656574616c657274322d7769646765742e7376673f6272616e63683d76312e332e34)](https://travis-ci.org/Dominus77/yii2-sweetalert2-widget)[![codecov](https://camo.githubusercontent.com/4cfc855f24e5ab597a6bda83662ec13702da6dd89adf63b281d7ef246b5533ad/68747470733a2f2f636f6465636f762e696f2f67682f446f6d696e757337372f796969322d7377656574616c657274322d7769646765742f6272616e63682f6d61737465722f67726170682f62616467652e737667)](https://codecov.io/gh/Dominus77/yii2-sweetalert2-widget)[![Scrutinizer Code Quality](https://camo.githubusercontent.com/0030e320ef62d28083529044239fa2477222d91d2b76e4fbb128770316afadfd/68747470733a2f2f7363727574696e697a65722d63692e636f6d2f672f446f6d696e757337372f796969322d7377656574616c657274322d7769646765742f6261646765732f7175616c6974792d73636f72652e706e673f623d6d6173746572)](https://scrutinizer-ci.com/g/Dominus77/yii2-sweetalert2-widget/?branch=master)[![Total Downloads](https://camo.githubusercontent.com/0b27c93e5baa9579a1bbb78d6bfc6998f17f54673c35b15a603afa05431d3485/68747470733a2f2f706f7365722e707567782e6f72672f646f6d696e757337372f796969322d7377656574616c657274322d7769646765742f646f776e6c6f616473)](https://packagist.org/packages/dominus77/yii2-sweetalert2-widget)

Renders a [SweetAlert2](https://sweetalert2.github.io/) widget for Yii2.

[![Logo SweetAlert2](/swal2-logo.png)](/swal2-logo.png)

Installation
------------

[](#installation)

The preferred way to install this extension is through [composer](http://getcomposer.org/download/).

Either run

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

or add

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

to the require section of your `composer.json` file.

Usage
-----

[](#usage)

Once the extension is installed, simply use it in your code by:

Flash message
-------------

[](#flash-message)

View:

```

```

Controller:

A basic message

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

A title with a text under

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

A modal with a title, an error icon, a text, and a footer

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

A modal window with a long content inside:

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

Custom HTML description and buttons with ARIA labels

```
Yii::$app->session->setFlash('customHtml', [
    'title' => 'HTML example',
    'icon' => Alert::TYPE_INFO,
    'html' => '
       You can use bold text,
       links
       and other HTML tags
     ',
    'showCloseButton' => true,
    'showCancelButton' => true,
    'focusConfirm' => false,
    'confirmButtonText' => ' Great!',
    'confirmButtonAriaLabel' => 'Thumbs up, great!',
    'cancelButtonText' => '',
    'cancelButtonAriaLabel' => 'Thumbs down',
]);
```

A dialog with three buttons

```
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');
            }
        }
    ")
]);
```

A custom positioned dialog

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

Custom animation with [Animate.css](https://animate.style/)

Set to View:

```

```

also

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

A confirm dialog, with a function attached to the "Confirm"-button

```
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'
                );
            }
        }
    ")
]);
```

... and by passing a parameter, you can execute something else for "Cancel"

```
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'
                );
            }
        }
    ")
]);
```

A message with a custom image

```
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',
]);
```

A message with custom width, padding, background and animated 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",
]);
```

A message with auto close timer

```
Yii::$app->session->setFlash('key1', [
    'title' => 'Auto close alert!',
    'html' => 'I will close in  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');
            }
        }
    "),
]);
```

Right-to-left support for Arabic, Persian, Hebrew, and other RTL languages

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

AJAX request example

```
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 example

```
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);
            }
        ")
    ],
]);
```

Multiple

```
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!',
        ]
    ]
]);
```

or

```
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')}
            "),
        ]
    ]
]);
```

Render Widget
-------------

[](#render-widget)

View:

```