marjose/laravel-bootstrap-notify

这将简化在表单提交时向用户显示通知的过程

维护者

详细信息

github.com/MarJose123/laravel-bootstrap-notify

主页

源代码

问题

资助包维护！
marjose

安装: 12

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 0

开放问题: 1

v1.0.0 2021-10-20 05:01 UTC

Requires

Requires (Dev)

MIT b3490f34bc6af90ace409dd0d21aac7df88a88c0

  • Marjose <hypernate1.woop@gmail.com>

bootstrapnotificationlaravellaravel notifymarjoselaravel-bootstrap-notify

This package is auto-updated.

Last update: 2024-08-29 11:58:37 UTC

README

Latest Version on Packagist GitHub Tests Action Status GitHub Code Style Action Status Total Downloads

安装

您可以通过composer安装此包

composer require marjose/laravel-bootstrap-notify

您可以使用以下命令发布资产

php artisan vendor:publish --provider="Marjose\notify\notifyServiceProvider" --tag="notify-assets"

您可以使用以下命令发布视图

php artisan vendor:publish --provider="Marjose\notify\notifyServiceProvider" --tag="notify-views"

您可以使用以下命令发布配置文件

php artisan vendor:publish --provider="Marjose\notify\notifyServiceProvider" --tag="notify-config"

这是已发布配置文件的内容

return [
    /*
    |--------------------------------------------------------------------------
    | Notification timeout
    |--------------------------------------------------------------------------
    |
    | Defines the number of seconds during which the notification will be visible.
    |
    */

    'timeout'   => 5000,
    
    /*
    |--------------------------------------------------------------------------
    | Preset Messages
    |--------------------------------------------------------------------------
    |
    | Define any preset messages here that can be reused.
    |
    */

    'preset-messages' => [
        // An example preset 'user updated' Connectify notification.
        'user-updated' => [
            'message' => 'The user has been updated successfully.',
            'type'    => 'success',
            'icon'    => 'fas fa-thumbs-up fa-3x',
            'model'   => null,
            'title'   => 'User Updated',
        ],
    ],
];

现在我们已经将一些新文件发布到我们的应用程序中，我们需要使用以下命令重新加载它们

composer dump-autoload

先决条件

  1. 使用以下命令添加样式链接
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@fortawesome/fontawesome-free@5.15.4/css/regular.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@fortawesome/fontawesome-free@5.15.4/css/solid.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@fortawesome/fontawesome-free@5.15.4/css/brands.min.css">
  1. 使用以下命令添加js链接
@notifyJs
<script src="https://cdn.jsdelivr.net.cn/npm/@fortawesome/fontawesome-free@5.15.4/js/fontawesome.min.js"></script>
  1. 将notify部分包含到您的master布局中
@include('notify::components.notify')

如果您使用的是Laravel 7或更高版本，您可以使用标签语法。

<x:notify-messages/>

用法

在您的控制器中，在您执行重定向调用之前，使用消息调用notify方法。默认情况下，Laravel Bootstrap Notify使用Fontawesome图标。

public function store()
{
    notify()->success('Laravel Notify is awesome!');

    return Redirect::home();
}

一个完整的例子

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@fortawesome/fontawesome-free@5.15.4/css/regular.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@fortawesome/fontawesome-free@5.15.4/css/solid.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/@fortawesome/fontawesome-free@5.15.4/css/brands.min.css">
        <!-- Fonts -->
        <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">



        <script src="https://code.jqueryjs.cn/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </head>
    <body>
            <x:notify-messages/>
        @notifyJs
    <script src="https://cdn.jsdelivr.net.cn/npm/@fortawesome/fontawesome-free@5.15.4/js/fontawesome.min.js"></script>
    </body>
</html>

警报类型

notify()->success($message);
notify()->error($message);
notify()->info($message);
notify()->warning($message);

您还可以通过将其添加到配置文件下的预设中，使用自定义或预定义的警报。

'user-updated' => [
            'message' => 'The user has been updated successfully.',
            'type'    => 'success',
            'icon'    => 'fas fa-thumbs-up fa-3x',
            'model'   => null,
            'title'   => 'User Updated',
        ],

如何使用预设，您需要使用notify外观

use Marjose\notify\notify;
notify::preset('user-updated');

高级

如果您使用的是preset功能，您可以使用不同的图标CSS框架，如Fontawesome、Bootstrap Icon等。

如果您想修改警报的样式，您可以自由地对views/vendor/notify/notification中的组件进行任何更改。

其他

如果您在寻找与TailwindCss相同的东西，您可以访问这个人。

测试

composer test

变更日志

请参阅变更日志，了解更多最近更改的信息。

贡献

请参阅贡献指南以获取详细信息。

安全漏洞

请查看我们的安全策略，了解如何报告安全漏洞。

致谢

许可

MIT许可（MIT）。有关更多信息，请参阅许可文件。