Add more examples to show off skooma's features
This commit is contained in:
parent
c93b5632de
commit
22ef3ae3c5
1 changed files with 48 additions and 0 deletions
48
skooma.md
48
skooma.md
|
@ -43,3 +43,51 @@ html.div(style: {color: 'red'})
|
|||
|
||||
Generators can be called with many arguments. Arrays get iterated recursively as
|
||||
if they were part of a flat argument list.
|
||||
|
||||
## A few more examples:
|
||||
|
||||
Create a Button that deletes itself:
|
||||
|
||||
```js
|
||||
document.body.append(
|
||||
html.button("Delete Me", {click: event => event.target.remove()})
|
||||
)
|
||||
```
|
||||
|
||||
Turn a two-dimensional array into an HTML table:
|
||||
```js
|
||||
const table = rows =>
|
||||
html.table(html.tbody(rows.map(
|
||||
row => html.tr(row.map(
|
||||
cell => html.rd(cell, {dataset: {
|
||||
content: cell.toLowerCase(),
|
||||
}})
|
||||
))
|
||||
)))
|
||||
```
|
||||
|
||||
A list that you can add items to
|
||||
```js
|
||||
let list, input = ""
|
||||
document.body.append(html.div([
|
||||
list=html.ul(),
|
||||
html.input({type: 'text', input: e => input = e.target.value}),
|
||||
html.button({click: event => list.append(html.li(input))}, "Add"),
|
||||
]))
|
||||
```
|
||||
|
||||
A list that you can also delete items from
|
||||
```js
|
||||
const listItem = content => html.li(
|
||||
html.span(content), " ", html.a("[remove]", {
|
||||
click: event => event.target.closest("li").remove(),
|
||||
style: { cursor: 'pointer', color: 'red' },
|
||||
})
|
||||
)
|
||||
let list, input = ""
|
||||
document.body.append(html.div([
|
||||
list=html.ul(),
|
||||
html.input({type: 'text', input: e => input = e.target.value}),
|
||||
html.button({click: event => list.append(listItem(input))}, "Add"),
|
||||
]))
|
||||
```
|
||||
|
|
Loading…
Reference in a new issue