Reference
UI elements
Every element the compiler knows, straight from src/elements.ts. All of them also take class, style, id and ref, and any DOM event with on:event.
| Element | Content | -> fires on | Props | Flags | HTML |
|---|---|---|---|---|---|
| text | text | — | role tag | bold muted small large danger primary success | <span> |
| title | text | — | role tag | bold muted small large danger primary success | <h2> |
| button | text | click | disabled role | primary danger small | <button> |
| input | state to bind | enter | placeholder type disabled label min max step role | required | <input> |
| textarea | state to bind | — | placeholder rows disabled label role | required | <textarea> |
| select | state to bind | change | options placeholder disabled label role | — | <select> |
| checkbox | state to bind | change | label disabled role | — | <input> |
| radio | state to bind | change | options label role | — | <div> |
| tabs | state to bind | change | options label role | — | <div> |
| file | state to bind | change | accept label disabled role | multiple | <input> |
| modal | state to bind | — | gap pad align justify role | — | <dialog> |
| image | source URL | — | alt width height role | — | <img> |
| video | source URL | — | width height poster role | controls autoplay loop muted | <video> |
| audio | source URL | — | role | controls autoplay loop muted | <audio> |
| link | text | — | to href target role | muted | <a> |
| badge | text | — | role | primary success danger | <span> |
| icon | text | — | size label role | muted primary success danger | <span> |
| spinner | — | — | role | — | <span> |
| divider | — | — | role | — | <hr> |
| row | — | — | gap pad align justify role tag | wrap | <div> |
| column | — | — | gap pad align justify role tag | — | <div> |
| grid | — | — | gap pad align justify cols role tag | — | <div> |
| card | — | — | gap pad align justify role tag | — | <div> |
| form | — | submit | gap pad align justify role | novalidate | <form> |
| list | — | — | role | — | <ul> |
| item | text | click | role | muted | <li> |
| table | — | — | role | — | <table> |
| tr | — | click | role | — | <tr> |
| th | text | — | role | — | <th> |
| td | text | — | role | muted bold | <td> |
| canvas | — | — | width height role | — | <canvas> |
column gap=4 align=center {
title "Users"
input draft placeholder="Name" -> add(draft)
button "Add" primary -> add(draft)
for u in users key u.id {
UserCard user=u
}
}