esiur/iui
2
0
Fork 0
mirror of https://github.com/esiur/iui.git synced 2025-06-27 09:23:12 +00:00
Code Issues Projects Releases Wiki Activity

docs

Browse Source
This commit is contained in:
Ahmed Zamil
2021-10-30 12:31:25 +03:00
parent b3479dbdbd
commit 1bac10e60d
10 changed files with 92 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
docs/md/getting-started/data-flow.md
View File

@ -9,4 +9,31 @@ When the :data attribute is set to an element any other attribute and child will
</div>
</i-codepreview>
Child element will be provided with the data of its parent
<i-codepreview>
<ul :data="screen">
<li>Width: <b>${d.width}</b></li>
<li>Height: <b>${d.height}</b></li>
</ul>
</i-codepreview>
Child element can set its data with *:data* attribute
<i-codepreview>
<ul :data="screen">
<li>Width: <b>${d.width}</b></li>
<li>Height: <b>${d.height}</b></li>
<li :data="d.width / d.height"> Ratio: ${d} </li>
</ul>
</i-codepreview>
Every element in the tree will have a *data* property
<i-codepreview>
<div :data="new Date()">
<button onclick="this.innerText = ((new Date) - this.data) + ' milliseconds passed'">
Click me
</button>
</div>
</i-codepreview>

9
docs/md/getting-started/declarative.md
View File

@ -48,4 +48,13 @@ Attributes are similar they must start with *async::*
<i-codepreview>
<input async::placeholder = "await (await fetch('md/hello.md')).text()">
</i-codepreview>
# Skip rendering
Any element with *skip* attribute will not enter the IUI rendering process
<i-codepreview>
<div skip>
${5 + 6}
</div>
</i-codepreview>

1
docs/md/getting-started/first.md
View File

@ -1,4 +1,3 @@
```html
<html>
<head>

23
docs/md/getting-started/if-content.md Normal file
View File

@ -0,0 +1,23 @@
# Conditional rendering
*:if* attribute is responsilbe for showing or hiding any element in the tree.
<i-codepreview>
<div :data="new Date().getHours()">
<span :if="d < 12">Good morning</span>
<span :if="d >= 12 && d < 18">Good afternoon</span>
<span :if="d >= 18">Good evening</span>
</div>
</i-codepreview>
**note:** if uses CSS display property to show and hide and element which means the element will not be removed from the DOM.
# Filling
*:content* attribute can be used to fill an element with html content.
<i-codepreview>
<ul :data="['Hello', 'World']" :content="'<li>' + d.join('</li><li>') + '</li>'">
</ul>
</i-codepreview>

2
docs/md/getting-started/referencing.md Normal file
View File

@ -0,0 +1,2 @@
# Referencing