README

Material components SNACKBAR 实现至 NETTE 框架。

灵感来源于Ipublikuj。

安装

获取 MDCNette 对话框的最佳方式是通过 composer。

php composer.phar require mdcnette/snackbar

将 MDC Snackbar 扩展添加到您的配置文件中

extensions:
    mdcsnackbar: MDCNette\Snackbar\DI\SnackbarExtension

然后在您的演示者（通常在 BasePresenter 中）添加以下内容。

use TSnackbar;

将其添加到您的 @layout.latte。

{snippet snackbar} // if you want use ajax. wrap control to snippet
    {control snackbar}
{/snippet}

客户端（js/css）

最后，您需要设置 JavaScript... 最佳方式是使用 npm 安装。

npm install @mdcnette/snackbar

或者您可以在本存储库的 client-side 文件夹中找到它。

在 dist 文件夹中您可以找到需要包含的文件。

material-components-web.min.css

（snackbar 的样式）将其链接到 HTML 布局的 head。

material-components-web.min.js

（snackbar 的基本 JavaScript）将其添加到您的脚本加载中。

mdcnette.ajax.snackbar.js /或/ mdcnette.noajax.snackbar.js

（snackbar 的 JavaScript）将其添加到您的脚本加载中。

@layout.latte 预览

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="path/to/material-components-web.min.css" type="text/css">
</head>

<body>
    {include content}
    
    {snippet snackbar} // use snippet tag only if you want use ajax.
        {control snackbar}
    {/snippet snackbar}
    
    <script src="path/to/material-components-web.min.js" type="text/javascript"></script>
    
    <!--IF AJAX-->
    <script src="path/to/nette.ajax.js" type="text/javascript"></script>
    <script src="path/to/mdcnette.ajax.snackbar.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    	$.nette.init();
    });
    </script>
    <!--/ IF AJAX-->
    
    <!--IF NO AJAX-->
    <script src="path/to/mdcnette.noajax.snackbar.js" type="text/javascript"></script>
    <!--/IF NO AJAX-->

</body>
</html>

在此之后，您就可以开始使用 material snackbar 了！

用法

$this->snackbar(
    "<message>",                //Message
    ["<template>"],             //Template -> viz template
    [array(<options>)]          //Options -> viz options table
    );

选项

为了更好地理解，请查看官方演示这里

名称	描述	默认值	类型	了解
`wait`	snackbar 消失的时间	2750 毫秒	整数
`ajax`	如果动作通过 ajax 触发	false	布尔值
`action`	动作的 URL	false	字符串	必须设置 `actionText` 选项
`actionText`	动作按钮的文本	false	字符串	必须设置 `action` 选项
`multiline`	snackbar 更高以适应更长的消息	false	布尔值
`rtl`	从右到左	false	布尔值
`actionDismiss`	点击动作将消失（仅限于 ajax）	true	布尔值	或者等待超时
`alignStart`	在页面的左侧显示 snackbar	false	布尔值	与 rtl 一起工作

您可以在配置文件中为所有 snackbar 设置默认选项。

extensions:
    mdcsnackbar: MDCNette\Snackbar\DI\SnackbarExtension
    
mdcsnackbar:
    wait: 5000 # default 4000 (must be same or higher)
    ajax: true # default false
    alignStart: true # default false
    # etc...

模板

MDCNette Snackbar 允许添加自定义预定义选项模板。

在配置中您可以添加此模板

extensions:
    mdcsnackbar: MDCNette\Snackbar\DI\SnackbarExtension
    
mdcsnackbar:
    rtl: true # 'rtl' is now set for all templates
    error:
        wait: 7500
    left:
        alignStart: true
    right:
        alignStart: true
        rtl: true

使用方式可能如下

$this->snackbar('FATAL ERROR', 'error');
// You can add custom options to every template as well
$this->snackbar('VERY LOOOOOOOOOOOOOONG FATAL ERROR', 'error', ['multiline' => true]);

示例

$this->snackbar('You are logged in as guest@example.com');

$this->snackbar('User added', NULL,
    [
        'wait'         => 5000,
        'action'       => $this->link('undo!'),
        'actionButton' => 'undo',
        'alignStart    => true
    ]);

mdcnette / snackbar

维护者

详细信息

README

安装

客户端（js/css）

用法

选项

模板

示例