die schittigs/contao-flash-bundle

1.0.2 2019-03-25 09:34 UTC

This package is auto-updated.

Last update: 2024-09-23 20:11:25 UTC


README

这是一个为 Contao 4.4+ 定制的包。它使得处理闪存消息(为单个用户设计的短暂、非正式消息)变得非常方便。

特性

  • 🔋 提供了可立即使用的前端模块,包括样式表和 JavaScript
  • ⏳ 消息在渲染或被忽略之前将保留在会话中
  • ⁉️ 显示成功、错误、信息以及完全自定义的消息
  • 👽 高级功能,如命名空间和进一步自定义
  • 📼 简单而坚固,即使在禁用 JS 的环境中也能正常工作

安装

通过 Contao 管理器或 Composer 进行安装

composer require dieschittigs/contao-flash-bundle

基本用法

将新的前端模块 "Flash Messages" 添加到您的页面布局中。您的消息将在这里显示 - 主容器顶部可能是个不错的选择。

如果您想在钩子方法内部显示消息,可以这样做

// Info
Flash::info('The weather ☀️ is great today!');

// Success
Flash::success('Transaction complete.');

// Warning
Flash::warning('Wir brauchen mehr Silos!');

// Custom html message
Flash::comfirmnuke('<p>Please confirm.</p><a href="…">Yes.</a><a href="…">Nope.</a>');

ℹ️ Flash 类位于 Contao 命名空间中,所以(可能)不需要 use 语句。

这些消息将保存在用户会话中。它们 等待 在前端模块中渲染,然后它们会自动删除。因此,您有长时间运行的过程,需要多次重定向和多个消息?没问题 🕶️。

ℹ️ 消息 "堆叠",因此如果有多个警告,它们将在前端模块显示时一次性全部显示

生成的 HTML 可能看起来像这样

<div class="mod_flash_messages">
    <div class="flash-messages-wrapper">
        <ul class="flash-messages">
            <li class="flash-message warning">
                <i class="flash-icon"></i>
                <div class="flash-content">
                    The email address you entered was malformed …
                </div>
            </li>
            <li class="flash-message success">
                <i class="flash-icon"></i>
                <div class="flash-content">
                    … but we were able to fix it. Everything's fine.
                </div>
                <a href="flash/clear?id=id2" class="flash-dismiss"></a>
            </li>
        </ul>
        <div class="flash-comm">
            <script>
                window.ContaoFlash = window.ContaoFlash || {};
                window.ContaoFlash.clear = [id1, id2];
            </script>
            <noscript>
                <img width="1" height="1" src="flash/clear?ids=id1,id2" />
            </noscript>
        </div>
    </div>
<div>

高级用法

创建高级闪存消息

Flash::warning('Your account has been compromised.')
->setAutoDismiss(false) // User has to dismiss this message manually
->addClass(['important', 'user']) // Additional CSS classes
->setNamespace('profile') // Only show this message in modules with the matching namespace

路由

想要通过 JS 显示消息?我们提供了支持!

[GET] flash/get

获取包含所有消息的 JSON 数组。

// Response
[
    {
        id: 'MIW987K',
        type: 'info',
        cssClasses: ['info'],
        message: 'Item purchased',
        autoDismiss: true,
        namespace: 'checkout'
    },
    …
]

[GET] flash/clear?id={id}

删除具有提供 id 的消息。

[GET] flash/clear?ids={id1,id2}

删除具有提供 id 的消息

自定义

查看 Resources/public 以获取 CSS 和 JS。

MIT © Die Schittigs