luishuh/toastr-laravel-v2

laravel中的Toastr通知,新增功能。此库由roksta21@gmail.com创建。

dev-master 2018-01-14 17:18 UTC

This package is not auto-updated.

Last update: 2024-09-29 05:01:46 UTC


README

为laravel提供简单的Toastr通知

安装

通过npm安装Toastr

    npm install toastr --save

在resources/assets/js/bootstrap.js中引入js,作为window.toastr = require('toastr');

在resources/assets/sass/app.scss中导入sass,作为@import "node_modules/toastr/toastr";,然后通过npm构建npm run prod

通过composer安装

    composer require "luishuh/toastr-laravel-v2:@dev"

config/app.php中包含服务提供者和其别名。

'providers' => [
    LuisHuh\Toastr\ToastrServiceProvider::class,
];

'aliases' => [
    'Toast' => LuisHuh\Toastr\Toast::class,
];

运行

php artisan vendor:publish --provider="LuisHuh\Toastr\ToastrServiceProvider"

以发布你的资源/assets/vendor/luishuh/toastr.blade.php中的包视图

在你的主视图中添加@include('vendor.luishuh.toastr'),例如,

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="/css/app.css">
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="js/app.js"></script>
        @include('vendor.luishuh.toastr')
    </body>
    </html>

使用

只需使用辅助函数toast()来创建通知器。

    toast()->success('message', 'title');
    toast()->info('message', 'title');
    toast()->warning('message', 'title');
    toast()->error('message', 'title');

您可以通过

    toast()->success('message', 'title')->timeOut(5000);

您可以通过

    toast()->success('message', 'title')->closeButton(true);

您可以通过

    toast()->success('message', 'title')->debug(true);

您可以通过

    toast()->success('message', 'title')->newestOnTop(true);

您可以通过

    toast()->success('message', 'title')->progressBar(true);

您可以通过

    toast()->success('message', 'title')->positionClass('top-right');
    toast()->success('message', 'title')->positionClass('bottom-right');
    toast()->success('message', 'title')->positionClass('bottom-left');
    toast()->success('message', 'title')->positionClass('top-left');
    toast()->success('message', 'title')->positionClass('top-full-width');
    toast()->success('message', 'title')->positionClass('bottom-full-width');
    toast()->success('message', 'title')->positionClass('top-center');
    toast()->success('message', 'title')->positionClass('bottom-center');

您可以通过

    toast()->success('message', 'title')->preventDuplicates(true);

您可以通过

    toast()->success('message', 'title')->showDuration(300);

您可以通过

    toast()->success('message', 'title')->hideDuration(1000);

您可以通过

    toast()->success('message', 'title')->extendedTimeOut(1000);

您可以通过

    toast()->success('message', 'title')->showEasing('swing');
    toast()->success('message', 'title')->hideEasing('linear');

您可以通过

    toast()->success('message', 'title')->showMethod('fadeIn');
    toast()->success('message', 'title')->hideMethod('fadeOut');

您可以通过

    <script type="text/javascript">
        function behavior(){
            alert("Hello World");
        }
    </script>
    toast()->success('message', 'title')->onclick('behavior');    

您可以通过添加所有选项,不需要添加所有,只需添加您需要的。

    toast()->success('message', 'title')->options([
        'closeButton'       =>  true,
        'debug'             =>  false,
        'newestOnTop'       =>  false,
        'progressBar'       =>  true,
        'positionClass'     =>  'toast-top-right',
        'preventDuplicates' =>  false,
        'onclick'           =>  'behavior',
        'showDuration'      =>  300,
        'hideDuration'      =>  1000,
        'timeOut'           =>  5000,
        'extendedTimeOut'   =>  1000,
        'showEasing'        =>  'swing',
        'hideEasing'        =>  'linear',
        'showMethod'        =>  'fadeIn',
        'hideMethod'        =>  'fadeOut'
    ]);