README

简单地将 sweet alert 消息闪现到屏幕上。此控件是 SweetAlert 插件 的包装器

安装

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

要安装，请运行以下命令之一：

$ php composer.phar require aryelds/yii2-sweet-alert "@dev"

或添加以下内容到您的 composer.json 文件的 require 部分。

"aryelds/yii2-sweet-alert": "@dev"

使用方法

基本消息

use aryelds\sweetalert\SweetAlert;

echo SweetAlert::widget([
    'options' => [
        'title' => "Here's a message!"
    ]
]);

标题下方有文本

use aryelds\sweetalert\SweetAlert;

echo SweetAlert::widget([
    'options' => [
        'title' => "Here's a message!",
        'text' => "It's pretty, isn't it?"
    ]
]);

成功消息

use aryelds\sweetalert\SweetAlert;

echo SweetAlert::widget([
    'options' => [
        'title' => "Good Job!",
        'text' => "You clicked the button!",
        'type' => SweetAlert::TYPE_SUCCESS
    ]
]);

错误消息

use aryelds\sweetalert\SweetAlert;

echo SweetAlert::widget([
    'options' => [
        'title' => "Error!",
        'text' => "An error happened!",
        'type' => SweetAlert::TYPE_ERROR
    ]
]);

带有 "确认" 和 "取消" 功能的警告

use aryelds\sweetalert\SweetAlert;

echo SweetAlert::widget([
    'options' => [
        'title' => "Are you sure?",
        'text' => "You will not be able to recover this imaginary file!",
        'type' => SweetAlert::TYPE_WARNING,
        'showCancelButton' => true,
        'confirmButtonColor' => "#DD6B55",
        'confirmButtonText' => "Yes, delete it!",
        'cancelButtonText' => "No, cancel plx!",
        'closeOnConfirm' => false,
        'closeOnCancel' => false
    ],
    'callbackJs' => new \yii\web\JsExpression(' function(isConfirm) {
        if (isConfirm) { 
            swal("Deleted!", "Your imaginary file has been deleted.", "success");
        } else { 
            swal("Cancelled", "Your imaginary file is safe :)", "error");
        }
    }')
]);

prompt 函数的替代方案

use aryelds\sweetalert\SweetAlert;

echo SweetAlert::widget([
    'options' => [
        'title' => "An input!",
        'text' => "Write something interesting:",
        'type' => SweetAlert::TYPE_INPUT,
        'showCancelButton' => true,
        'closeOnConfirm' => false,
        'animation' => "slide-from-top",
        'inputPlaceholder' => "Write something"
    ],
    'callbackJs' => new \yii\web\JsExpression(' function(inputValue) {
        if (inputValue === false) return false;
        if (inputValue === "") { 
            swal.showInputError("You need to write something!");
            return false
        }
        swal("Nice!", "You wrote: " + inputValue, "success");
    }')
]);

HTML 消息

use aryelds\sweetalert\SweetAlert;
use yii\bootstrap\Html;

echo SweetAlert::widget([
    'options' => [
        'title' => Html::tag('small', 'HTML Message!', ['style' => 'color: #00008B']),
        'text' => Html::tag('h2', 'Custom Message'),
        'type' => SweetAlert::TYPE_INFO,
        'html' => true
    ]
]);

使用 SweetAlert 的闪存消息

控制器示例

public function actionPage() {
    $model = new SomeModel();
    
    Yii::$app->getSession()->setFlash('success', [
        'text' => 'My custom text',
        'title' => 'My custom title',
        'type' => 'success',
        'timer' => 3000,
        'showConfirmButton' => false
    ]);

    return $this->render('page', [
        'model' => $model,
    ]);
}

视图

use aryelds\sweetalert\SweetAlert;

foreach (Yii::$app->session->getAllFlashes() as $message) {
    echo SweetAlert::widget([
        'options' => [
            'title' => (!empty($message['title'])) ? Html::encode($message['title']) : 'Title Not Set!',
            'text' => (!empty($message['text'])) ? Html::encode($message['text']) : 'Text Not Set!',
            'type' => (!empty($message['type'])) ? $message['type'] : SweetAlert::TYPE_INFO,
            'timer' => (!empty($message['timer'])) ? $message['timer'] : 4000,
            'showConfirmButton' =>  (!empty($message['showConfirmButton'])) ? $message['showConfirmButton'] : true
        ]
    ]);
}

使用主题

您可以选择以下选项之一

SweetAlert::THEME_TWITTER
SweetAlert::THEME_GOOGLE
SweetAlert::THEME_FACEBOOK

示例

use aryelds\sweetalert\SweetAlert;

echo SweetAlert::widget([
    'options' => [
        'title' => 'Themes!',
        'text' => 'Here\'s the Twitter theme for SweetAlert!',
        'confirmButtonText' => "Cool!",
        'animation' => 'slide-from-top',
        'theme' => SweetAlert::THEME_TWITTER
    ]
]);

更多选项请访问插件页面

SweetAlert

许可证

yii2-sweet-alert 采用 BSD 3-Clause 许可证发布。有关详细信息，请参阅捆绑的 LICENSE.md 文件。