README

Material 组件 DIALOG 对 NETTE 框架的实现。

灵感来源于 Ipublikuj。

安装

获取 MDCNette dialog 的最佳方式是通过 composer。

php composer.phar require mdcnette/dialog

在配置中添加 MDCNette dialog 扩展。

extensions:
    mdcdialog: MDCNette\Dialog\DI\DialogExtension

客户端（js/css）

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

npm install @mdcnette/dialog

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

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

material-components-web.min.css

（对话框和所有其他材料组件的样式） 将此链接到 HTML 布局的 head 中。

material-components-web.min.js

（对话框和所有其他材料组件的基 js） 将此添加到您的脚本加载中。

mdcnette.ajax.dialog.js /or/ mdcnette.noajax.dialog.js

（对话框的 js） 将此添加到您的脚本加载中。

@layout.latte 预览

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="path/to/material-components-web.min.css" type="text/css">
    
    <!--Optionaly you will want google fonts and icons-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>
{include content}

<script src="path/to/material-components-web.min.js" type="text/javascript"></script>

<!--AJAX-->
<script src="path/to/nette.ajax.js" type="text/javascript"></script>
<script src="path/to/mdcnette.ajax.dialog.js" type="text/javascript"></script>
// Do not forget to initialize nette.ajax...
<!--or NO AJAX-->
<script src="path/to/mdcnette.noajax.dialog.js" type="text/javascript"></script>
</body>

</html>

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

用法

在 presenter 中添加 Trait（通常在 BasePresenter 中）

use MDCNette\Dialog\TDialog;

您想要放置对话框的地方，创建一个组件。

public function createComponentPermissionDialog() {
    $dialog = $this->dialogFactory->create();

    $dialog->addDialog(
        'add',                                                              // Name
        'Are you sure?',                                                    // Title    
        'You cannot take this action back'                                  // Optional Message
        ['add permission' => [$this, 'addPermission'], 'dismiss' => null]   // Actions ['buttonText' => [callable] || null]
    );

    return $dialog;
}

public function addPermission(MDCNette\Dialog\Components\Dialog, int $id){
    // doMagic
}

在模板中。

{control permissionDialog}
<a n:href="permissionDialog:add! id => $userId">Snackbar</a>

您就可以使用了！

如何链式调用对话框

对话框可以链式调用。

use MDCNette\Dialog\TDialog;

public function createComponentPermissionDialog() {
    $dialog = $this->dialogFactory->create();

    $dialog->addDialog(
        'add',
        'Giving important permission',
        [$this, 'getMessage'], // you can also add calback as message (title also)
        ['add permission' => [$this, 'addPermission'], 'nope' => null]
    );

    $dialog->addDialog(
        'addForce',
        'Are you sure?',
        'This user is badass! You cannot take this action back!'
        ['force add' => [$this, 'addForcePermission'], 'i made my mind' => null]
    );

    return $dialog;
}

public function getMessage(MDCNette\Dialog\Components\Dialog $dialog, int $id) {
    $user = //GET USER BY $id 
    return 'Do you want to give admin permission to '. $user['name'] . ' ' . $user['surname'];  
}

public function addPermission(int $id) {
    if (/*check User*/) {
        $this['permissionDialog']->showDialog('addForce', ['id' => $id]);
    }
}

public function addForcePermission(int $id) {
    //DO MAGIC HERE
}

选项

您可以在配置中设置一些选项

extensions:
    mdcdialog: MDCNette\Dialog\DI\DialogExtension
    
mdcdialog:
    ajax: true       # default value (boolean)
    scrolling: false # default value (boolean)
    icon: false      # default value (string - material icon name)
    button: dismiss  # default value (string)

ajax 通过 Ajax 提交表单
scrolling 使内容可滚动
- scrolling 用于对话框中的长文本。有关更多信息，请参阅材料组件 dialog
icon 在标题前添加材料图标
如果没有指定 button，则将有一个没有操作的按钮，仅用于关闭对话框

或者您可以在组件内设置。

public function createComponentPermissionDialog() {
    $dialog = $this->dialogFactory->create();

    $dialog->setAjax(true);
    $dialog->setScrolling(false);
    $dialog->setIcon('stars');

    return $dialog;
}

或者为单个对话框。

public function createComponentPermissionDialog() {
    $dialog = $this->dialogFactory->create();

    $dialog->addDialog('add',[$this, 'addPermission'],'Are you sure?');
    
    $dialog->getDialog('add')->setAjax(true);
    $dialog->getDialog('add')->setScrolling(false);
    $dialog->getDialog('add')->setIcon('stars');

    return $dialog;
}

mdcnette / dialog

维护者

详细信息

README

安装

客户端（js/css）

用法

如何链式调用对话框

选项