mdcnette/snackbar
Composer 安装命令：
composer require mdcnette/snackbar
包简介
A MDC Snackbar components integrated to Nette
README 文档
README
Material components SNACKBAR implementation to NETTE Framework.
Idea behind was inspired by Ipublikuj.
Install
The best way to get MDCNette dialog is via composer.
php composer.phar require mdcnette/snackbar
Add MDC Snackbar extensions to your config file
extensions:
mdcsnackbar: MDCNette\Snackbar\DI\SnackbarExtension
Then in your presenter (typically in BasePresenter) add this.
use TSnackbar;
Add this to your @layout.latte.
{snippet snackbar} // if you want use ajax. wrap control to snippet
{control snackbar}
{/snippet}
Client side (js/css)
And finally you need to setup javascript... The best approach is to install it with npm.
npm install @mdcnette/snackbar
or you can find it in this repo in client-side folder.
in dist folder you can find files to include.
material-components-web.min.css
(styles for snackbar) link this to your head in html layout.
material-components-web.min.js
(base js for snackbar) add this to your script load.
mdcnette.ajax.snackbar.js/or/mdcnette.noajax.snackbar.js
(js for snackbar) add this to you script load.
@layout.latte preview
<!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>
After this you can start using material snackbar!
Usage
$this->snackbar(
"<message>", //Message
["<template>"], //Template -> viz template
[array(<options>)] //Options -> viz options table
);
Options
For better understanding, look for official demo HERE
| Name | Description | Default | type | Good to know |
|---|---|---|---|---|
wait | Time for snackbar dismiss | 2750 ms | integer | |
ajax | if action is fired with ajax | false | boolean | |
action | Url for action | false | String | Must be set actionText option |
actionText | Text for action button | false | String | Must be set action option |
multiline | Snackbar is taller to for longer message | false | boolean | |
rtl | Right to left | false | boolean | |
actionDismiss | On click action will dismiss (only with ajax) | true | boolean | OR wait for timeout |
alignStart | Shows snackbar on the left side of page | false | boolean | works with rtl |
You can set up default options in config file for all snackbars.
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...
Template
MDCNette Snackbar comes with possibility to add custom predefined options template.
In config you can add this template:
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
And usage may look like this:
$this->snackbar('FATAL ERROR', 'error');
// You can add custom options to every template as well
$this->snackbar('VERY LOOOOOOOOOOOOOONG FATAL ERROR', 'error', ['multiline' => true]);
Examples
$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
]);
统计信息
- 总下载量： 123
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 0
- 点击次数： 2
- 依赖项目数： 1
- 推荐数： 0
其他信息
- 授权协议： MIT
- 更新时间： 2017-04-06