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-29 17:09:15 +03:00
parent 1e8ae99d39
commit b3479dbdbd
35 changed files with 857 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/md/getting-started/data-flow.md Normal file
View File

@ -0,0 +1,12 @@
# Data flow
When the :data attribute is set to an element any other attribute and child will be able to access this field directly using the variable *data* or the shortended *d*.
<i-codepreview>
<div :data="{name: 'Ahmed Zamil', job: 'Developer'} ">
My name is ${d.name} and I work as a ${d.job}.
</div>
</i-codepreview>

51
docs/md/getting-started/declarative.md Normal file
View File

@ -0,0 +1,51 @@
# Declarative Rendering
# Text nodes
Text nodes are enclosed with `${...}`
<i-codepreview>
${ navigator.userAgent }
</i-codepreview>
# Fields
starts with `:`
<i-codepreview>
<input :value="navigator.userAgent">
</i-codepreview>
# Attributes
starts with `::`
<i-codepreview>
<input ::placeholder="navigator.appName">
</i-codepreview>
# Asynchronous
*Promise*
Promises are automatically resolved.
<i-codepreview>
${fetch("md/hello.md")}
</i-codepreview>
*Await*
To use await in text nodes **async** attribute must be added to the parent element
<i-codepreview>
<div async>
${await (await fetch("md/hello.md")).text()}
</div>
</i-codepreview>
In attributes, the attribute name must be preceded with **async:**
<i-codepreview>
<input async:value = "await (await fetch('md/hello.md')).text()">
</i-codepreview>
Attributes are similar they must start with *async::*
<i-codepreview>
<input async::placeholder = "await (await fetch('md/hello.md')).text()">
</i-codepreview>

14
docs/md/getting-started/first.md Normal file
View File

@ -0,0 +1,14 @@
```html
<html>
<head>
<link href="node_modules/css/iui.css" rel="stylesheet" />
<script src="node_modules/src/iui.js" type="module"></script>
</head>
<body>
<i-app>
Current time: ${new Date()}
</i-app>
</body>
</html>
```

15
docs/md/getting-started/install.md Normal file
View File

@ -0,0 +1,15 @@
NPM
```html
npm install @esiur/iui
```
Include in web page
#
```html
<link href="node_modules/css/iui.css" rel="stylesheet" />
<script src="node_modules/src/iui.js" type="module"></script>
```