esiur/iui
2
0
Fork 0
mirror of https://github.com/esiur/iui.git synced 2025-05-06 06:42:58 +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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/iui.css
View File

@ -3080,7 +3080,7 @@ html[dir='rtl'] .navbar-item[level='1'] {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
flex: 1;
flex: 2;
}
.codepreview-preview{

11
docs/index.html
View File

@ -76,12 +76,12 @@
<i-navbar style="padding: 10px">
</i-navbar>
<i-router type="hash" style="height: 100vh; width: 100vw;">
<i-router type="hash" style="height: calc(100vh - 110px); width: 100vw;">
<i-route name="getting-started" caption="Getting started" :content="load(this)">
<i-route name="install" caption="Install" :content="load(this)">
</i-route>
<i-route name="first" caption="First App" :content="load(this)">
<i-route name="first" caption="First App" :content="load(this, true)">
</i-route>
<i-route name="declarative" caption="Declarative Rendering" :content="load(this)">
@ -89,15 +89,16 @@
<i-route name="data-flow" caption="Data Flow" :content="load(this)">
</i-route>
<i-route name="if-content" caption="Conditions and Filling" :content="load(this)">
</i-route>
</i-route>
<i-route name="getting-started2" caption="Getting started">
Getting started
<i-route name="IUI Widgets" caption="IUI Widgets">
<i-route name="install" caption="Install">
<i-route name="IUIElement" caption="IUIElement">
</i-route>

4
docs/js/docs.js
View File

@ -6,11 +6,11 @@ marked.setOptions({
}
});
async function load(route) {
async function load(route, skip=false) {
var link = "md/" + route.link + ".md";
let content = await fetch(link);
if (content.status != 200)
return "Not found " + content.url;
var md = marked(await content.text());
return md;
return skip ? "<div skip>" + md + "</div>" : md;
}

27
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

@ -49,3 +49,12 @@ 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

6
src/UI/CodePreview.js
View File

@ -8,12 +8,10 @@ export default IUI.module(class CodePreview extends IUIElement {
async create() {
if (this.hasAttribute("debug"))
debugger;
this._code = this.innerHTML;
this._code = this.innerHTML.trim();
this.textContent = '';
// create elements
@ -31,7 +29,7 @@ export default IUI.module(class CodePreview extends IUIElement {
let self = this;
this.editor.addEventListener("input", function() {
self._code = self.editor.innerText;
self._code = self.editor.innerText.trim();
self.update();
}, false);