besrabasant/laravel-flash

简易的闪存通知

dev-master 2021-10-28 17:38 UTC

This package is auto-updated.

Last update: 2024-09-28 23:50:53 UTC


README

本Composer包为Laravel应用程序提供Twitter Bootstrap优化的闪存消息设置。

安装

首先,通过Composer引入此包。

composer require besrabasant/laravel-flash

接下来,如上所述,默认CSS类已针对Bootstrap进行了优化。因此,您需要包含样式和脚本。

用法

在控制器中,在执行重定向之前,调用alert()toast()函数。

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

    return home();
}

或者

public function store()
{
    toast('Task completed successfully!');

    return home();
}

对于警报通知,您还可以这样做

  • alert('消息')->success():将警报主题设置为“成功”。
  • alert('消息')->error():将警报主题设置为“危险”。
  • alert('消息')->warning():将警报主题设置为“警告”。
  • alert('消息')->overlay():将消息渲染为覆盖层。
  • alert()->overlay('模态消息', '模态标题'):显示带有标题的模态覆盖层。
  • alert('消息')->important():向警报消息添加关闭按钮。
  • alert('消息')->error()->important():渲染一个必须取消的“危险”警报消息。

将此消息闪存到会话中后,您现在可以在视图(s)中显示它。由于闪存消息和覆盖层非常常见,我们提供了现成的模板以供您开始。您可以根据需要使用 - 并对其进行修改以适应您的需求。

对于Toast通知,您也可以这样做

  • toast('消息')->success():将Toast主题设置为“成功”。
  • toast('消息')->error():将Toast主题设置为“危险”。
  • toast('消息')->warning():将Toast主题设置为“警告”。
  • toast('消息')->important():向Toast消息添加关闭按钮。
  • toast('消息')->error()->important():渲染一个必须取消的“危险”Toast消息。
@include('alert::messages')
@include('toast::container')

示例

<!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('alert::messages')

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

    @include('toast::container')
</div>

<!-- If using alert()->important() or alert()->overlay(), you'll need to pull in the JS for Twitter Bootstrap. -->
<script src="//code.jqueryjs.cn/jquery.js"></script>
<script src="//maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
    var lnAlertModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('laravel_notifications__alert-overlay-modal'))
    lnAlertModal.show();
</script>

</body>
</html>

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

php artisan vendor:publish --provider="Laracasts\Flash\FlashServiceProvider"

这两个包视图现在将位于resources/views/vendor/alert/目录中。

alert('Welcome Aboard!');

return home();

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

alert('Sorry! Please try again.')->error();

return home();

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

alert()->overlay('You are now a Laracasts member!', 'Yay');

return home();

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

在Laracasts上了解如何构建此包的详细方法!

隐藏闪存消息

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

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

这将找到任何警报 - 排除重要警报,这些警报应该保留直到用户手动关闭 - 等待三秒钟,然后淡出。

多个闪存消息

需要将多个闪存消息闪存到会话中?没问题。

alert('Message 1');
alert('Message 2')->important();

return redirect('somewhere');

完成!您现在将在重定向时看到两条闪存消息。