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