Update README.md
parent
fcf94077e2
commit
ec443c3683
|
@ -0,0 +1,69 @@
|
||||||
|
# ln.templates
|
||||||
|
|
||||||
|
Templating engine primarly used for html.
|
||||||
|
|
||||||
|
### Features:
|
||||||
|
|
||||||
|
##### Iterations
|
||||||
|
Render the children 5 times, with the variable xy set to the 5 values 0, 3, 6, 4, 1 :
|
||||||
|
|
||||||
|
<tag v-for:xy="[0,3,6,4,1]">...</tag>
|
||||||
|
|
||||||
|
|
||||||
|
##### Conditionals
|
||||||
|
Render tag only if attribute v-if evaluates to a non false value.
|
||||||
|
|
||||||
|
<tag v-if="true">...</tag>
|
||||||
|
|
||||||
|
##### Inclusions
|
||||||
|
Replace this tag with the rendered content of othertemplate.html:
|
||||||
|
|
||||||
|
<tag v-include="othertemplate.html">...</tag>
|
||||||
|
|
||||||
|
##### Slots
|
||||||
|
Use named slots to send content to included template:
|
||||||
|
|
||||||
|
<tag v-include="othertemplate.html">
|
||||||
|
<div v-slot="title"></slot>
|
||||||
|
<div v-slot=""></slot>
|
||||||
|
</tag>
|
||||||
|
|
||||||
|
Define Slots to be replaced with content from "caller":
|
||||||
|
|
||||||
|
<slot name="title">
|
||||||
|
<div>Some stuff...</div>
|
||||||
|
<slot name="slotname">
|
||||||
|
I am the default content, that will be rendered,
|
||||||
|
if there is no slot named "slotname"
|
||||||
|
</slot>
|
||||||
|
<slot>I am the default slot</slot>
|
||||||
|
<slot name="">I am also the default slot</slot>
|
||||||
|
|
||||||
|
By not providing any v-slot elements v-include will use the element itself to be the default slot.
|
||||||
|
|
||||||
|
|
||||||
|
<tag v-include="frame.html">
|
||||||
|
This tag will be surrounded by the frame!
|
||||||
|
Because there is no slot defined within it.
|
||||||
|
</tag>
|
||||||
|
|
||||||
|
##### Javascript
|
||||||
|
|
||||||
|
Define / run JavaScript logic within the script:
|
||||||
|
|
||||||
|
<template-script>
|
||||||
|
let v = 1 + 2;
|
||||||
|
</template-script>
|
||||||
|
|
||||||
|
Add style classes conditionally via expression:
|
||||||
|
|
||||||
|
<div :class="{ "text-center": true, "text-primary": false }">
|
||||||
|
|
||||||
|
Set attributes values from expressions:
|
||||||
|
|
||||||
|
<div :myattribute="getMyAttributeValue()">
|
||||||
|
|
||||||
|
Include content by expressions within text elements:
|
||||||
|
|
||||||
|
<div>This is my favourite color: {{ myFavouriteColor }}.
|
||||||
|
|
Loading…
Reference in New Issue