Monkberry directives
npm install monkberry-directives --save
Usage
Import directives and pass in to render function.
;;; const view = Monkberry;
Show and hide
With this two directives you can easily show/hide don nodes. But how it's different from {% if %}
?
Then using if expression, node completely removes from document. Show/hide directives do not remove node from document,
but only change display
style.
<div :show={{ visible }}> ...</div>
<div :hide={{ visible }}> ...</div>
FadeIn
This directive allow to show a little opacity animation using CSS transition on nodes what just appears in document. For example if you want to show each item of for with fading effect.
{% for array %} <li :fadeIn>{{ text }}</li>{% endfor %}
Each of element will be shown with fading effect. You can also specify duration in ms.
{% if visible %} <div :fadeIn="1000"> ... </div>{% endif %}
Event listeners
List of supported event listeners:
Example of usage
<form :onsubmit={{ this.handleSubmit }}> <input type="text" value=""> <button type="submit">Send</button></form>
and component
; { super; thishandleSubmit = thishandleSubmit; } { ... }
List of supported listeners
:onclick, :oncontextmenu, :ondblclick, :onmousedown, :onmouseenter, :onmouseleave, :onmousemove, :onmouseover, :onmouseout, :onmouseup, :onkeydown, :onkeypress, :onkeyup, :onload, :onresize, :onscroll, :onblur, :onchange, :onfocus, :onfocusin, :onfocusout, :oninput, :onreset, :onselect, :onsubmit, :ondrag, :ondragend, :ondragenter, :ondragleave, :ondragover, :ondragstart, :ondrop, :animationend, :animationiteration, :animationstart, :transitionend, :onmessage, :onopen, :onwheel