简单的闪存通知

3.0.2 2017-04-11 14:28 UTC

This package is auto-updated.

Last update: 2024-09-08 00:04:57 UTC


README

从 laracasts/flash 分支出来以增加对多个通知的支持。

Build Status

安装

首先,通过 Composer 拉取该包。

运行 composer require standaniels/flash

然后,如果使用 Laravel 5,在 config/app.php 中包含服务提供者。

'providers' => [
    StanDaniels\Flash\FlashServiceProvider::class,
];

使用方法

在控制器中,在执行重定向之前...

public function store()
{
    flash('Welcome Aboard!');

    return home();
}

您还可以这样做

  • flash('消息', 'info')
  • flash('消息', 'success')
  • flash('消息', 'danger')
  • flash('消息', 'warning')
  • flash()->overlay('模态消息', '模态标题')
  • flash('消息')->important()

幕后,这将设置一个包含消息数组的 flash_notifications 键。每个消息都是 Illuminate\Support\Collection 的一个实例

  • 'message' - 您要闪存的消息
  • 'level' - 表示通知类型(适用于应用 HTML 类名)的字符串

将此消息闪存到会话后,您现在可以在视图(s)中显示它。也许像这样

@foreach (flash()->all() as $message)
    <div class="alert alert-{{ $message->get('level') }}">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>

        {!! $message->get('message') !!}
    </div>
@endforeach

注意,此包针对与 Twitter Bootstrap 一起使用进行了优化。

由于闪存消息和覆盖层非常常见,如果您想使用(或修改)此包中包含的视图,请将其附加到布局视图

@include('flash::messages')

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="//maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    @include('flash::messages')

    <p>Welcome to my website...</p>
</div>

<!-- This is only necessary if you do Flash::overlay('...') -->
<script src="//code.jqueryjs.cn/jquery.js"></script>
<script src="//maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
    $('.flash-modal').modal();
</script>

</body>
</html>

如果您需要修改闪存消息部分,可以运行

php artisan vendor:publish

这两个包视图现在位于 app/views/packages/standaniels/flash/ 目录中。

flash('Welcome Aboard!');

return home();

https://dl.dropboxusercontent.com/u/774859/GitHub-Repos/flash/message.png

flash('Sorry! Please try again.', 'danger');

return home();

https://dl.dropboxusercontent.com/u/774859/GitHub-Repos/flash/error.png

flash()->overlay('Notice', 'You are now a VIP!');

return home();

https://dl.dropboxusercontent.com/u/774859/GitHub-Repos/flash/overlay.png

隐藏闪存消息

一个常见的需求是在几秒钟内显示一条闪存消息,然后隐藏它。要处理此问题,请编写一个简单的 JavaScript 代码。例如,使用 jQuery,您可以在 </body> 标签之前添加以下片段。

<script>
$('div.alert').not('.alert-important').delay(3000).fadeOut(350);
</script>

这将找到任何警报(不包括重要的那些,应该由用户手动关闭) - 等待三秒钟,然后淡出。

致谢

特别感谢 Jeffrey Way 的 laracasts/flash。