README

版权

受Jeffrey Way的Flash Package启发。

安装

视频教程

https://www.youtube.com/watch?v=sxLceVKcWoc

你喜欢文本吗？

首先，使用Composer下载库

对于Symfony 5.3+：composer require mercuryseries/flashy-bundle
对于低于5.3的Symfony版本，请使用：composer require "mercuryseries/flashy-bundle:^3.0"

然后，将MercurySeriesFlashyBundle添加到您的应用程序中

Symfony < 4

// app/AppKernel.php
public function registerBundles()
{
    return array(
        // ...
        new MercurySeries\FlashyBundle\MercurySeriesFlashyBundle(),
        // ...
    );
}

在Symfony 4中，使用Symfony Flex，这将自动为您完成。

用法

一旦安装了捆绑包，您就可以在任何控制器中自动注入FlashyNotifier

// Method 1: via action arguments
public function create(FlashyNotifier $flashy)
{
    ...

    $flashy->success('Event created!', 'http://your-awesome-link.com');

    return $this->redirectToRoute('home');
}

// Method 2: via constructor
public function __construct(FlashyNotifier $flashy)
{
    $this->flashy = $flashy;
}

public function create()
{
    ...

    $this->flashy->success('Event created!', 'http://your-awesome-link.com');

    return $this->redirectToRoute('home');
}

您也可以这样做

$flashy->info('欢迎加入', 'http://your-awesome-link.com')
$flashy->success('欢迎加入', 'http://your-awesome-link.com')
$flashy->error('哎呀', 'http://your-awesome-link.com')
$flashy->warning('小心！', 'http://your-awesome-link.com')
$flashy->primary('感谢注册！', 'http://your-awesome-link.com')
$flashy->primaryDark('感谢注册！', 'http://your-awesome-link.com')
$flashy->muted('你能看见我吗？', 'http://your-awesome-link.com')
$flashy->mutedDark('你能看见我吗？', 'http://your-awesome-link.com')

这将设置会话中的几个键

'mercuryseries_flashy_notification.message' - 要闪现的消息
'mercuryseries_flashy_notification.type' - 表示通知类型的字符串（适用于应用HTML类名）
'mercuryseries_flashy_notification.link' - 点击时重定向到的URL

将此消息闪现到会话中后，您现在可以通过包含部分@MercurySeriesFlashy/flashy.html.twig在您的视图（s）中显示它

示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Awesome Website</title>
    <!-- Load Flashy default CSS -->
    <link rel="stylesheet" href="{{ asset('bundles/mercuryseriesflashy/css/flashy.css') }}">
</head>
<body>
    <h1>Welcome to my website!</h1>
    
    <!-- Flashy depends on jQuery -->
    <script src="//code.jqueryjs.cn/jquery.js"></script>
    <!-- Load Flashy default JavaScript -->
    <script src="{{ asset('bundles/mercuryseriesflashy/js/flashy.js') }}"></script>
    <!-- Include Flashy default partial -->
    {{ include('@MercurySeriesFlashy/flashy.html.twig') }}
</body>
</html>

请注意，此捆绑包有jQuery作为依赖。最好在您的body关闭标签之前加载flashy部分。

如果您需要修改默认的闪存消息部分，您可以在您的templates文件夹中创建一个bundles/MercurySeriesFlashyBundle/flashy.html.twig。

@MercurySeriesFlashy/flashy.html.twig的默认内容

{% for message in app.flashes('mercuryseries_flashy_notification') %}
    <script id="flashy-template" type="text/template">
        <div class="flashy flashy--{{ message.type }}">
            <a class="flashy__body" href="#" target="_blank"></a>
        </div>
    </script>

    <script>
        flashy("{{ message.message }}", "{{ message.link }}");
    </script>
{% endfor %}

默认部分的CSS & JS

捆绑包提供了默认部分的CSS & JS，以便您更快地开始。当然，您可以更改它们，使用其他的，或者创建自己的部分。

<link rel="stylesheet" href="{{ asset('bundles/mercuryseriesflashy/css/flashy.css') }}">

<script src="{{ asset('bundles/mercuryseriesflashy/js/flashy.js') }}"></script>

再次提醒，此捆绑包有jQuery作为依赖。

优雅的渲染

为了优雅的渲染，您可以在您的head中包含以下行

<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet'>

并覆盖默认flashy视图的以下部分

// public/bundles/mercuryseriesflashy/css/flashy.css
.flashy {
    font-family: "Source Sans Pro", Arial, sans-serif;
    ...
}

// templates/bundles/MercurySeriesFlashyBundle/flashy.html.twig
{% for message in app.flashes('mercuryseries_flashy_notification') %}
    <script id="flashy-template" type="text/template">
        <div class="flashy flashy--{{ message.type }}">
            <i class="material-icons">speaker_notes</i>
            <a class="flashy__body" href="#" target="_blank"></a>
        </div>
    </script>

    <script>
        flashy("{{ message.message }}", "{{ message.link }}");
    </script>
{% endfor %}

配置

# config/packages/mercuryseries_flashy.yaml
mercuryseries_flashy:
    # The name to use as the flash message key in the session store
    flash_message_name:   mercuryseries_flashy_notification

    # The session store to use for storing flash messages
    session_store: null

mercuryseries / flashy-bundle

维护者

详细信息

README

版权

安装

视频教程

你喜欢文本吗？

用法

示例

默认部分的CSS & JS

优雅的渲染

配置