Éléments et attributs

La vue d’un widget PlayerVox OverCrow se compose d’un jeu fermé d’éléments. Cette page liste chacun d’eux avec son contenu, ses attributs et les événements qu’il peut envoyer. La vue explique le balisage qui les entoure : expressions, if, for, composants.

<box class="panel">
  <box class="header">
    <text class="title">{t("title")}</text>
    <text class="value">{latest(state.values)}</text>
  </box>
  <chart class="plot" kind="area" min="0" max="100">
    <series class="series" values={state.values}/>
  </chart>
</box>

Deux conteneurs box, deux éléments text liés à l’état et un chart doté d’une series : PlayerVox OverCrow dessine le tout, graphique compris.

Lire la fiche d’un élément

• Contenu : ce que l’élément peut contenir. Les éléments de bloc sont tous les éléments qui peuvent figurer seuls dans un conteneur (tous sauf span, option et series) ; en ligne désigne le contenu d’un text ; texte, du texte brut ; vide signifie que l’élément s’écrit <name …/>.
• Parents : où l’élément peut se trouver ; tout conteneur désigne n’importe quel conteneur.
• Focus clavier : toujours pour les contrôles ; quand un événement est écouté pour un élément qui ne prend le focus que si la vue écoute l’un de ses événements (on:activate…) ; jamais sinon.
• Rôle : la nature de l’élément, telle qu’elle est annoncée aux technologies d’assistance.
• Événements : les événements que la vue peut écouter avec on:<event>.

Un type tel que « texte ≤ 256 octets » donne une limite.

Attributs communs à tous les éléments

Éléments

box

Conteneur générique ; la mise en page flex ou grid vient du style. La racine de la vue est un box.

Aucun attribut propre.

scroll

Conteneur qui rogne son contenu et que l’hôte fait défiler à la molette, par glissement et au clavier.

list

Liste à défilement vertical dont les enfants ne sont mis en page et peints que lorsqu’ils sont visibles.

text

Bloc de texte avec retour à la ligne ; ses enfants en ligne suivent le texte (une ligne de chat avec des emotes).

span

Portion de texte stylée à l’intérieur d’un text.

icon

Icône Lucide teintée par color, dimensionnée par font-size sauf si width et height sont définis.

image

Image matricielle du paquet, ou image remise par un service (identifiant asset:) ; object-fit s’applique.

avatar

Image ronde, avec un texte de remplacement tant que l’image manque ou n’a pas pu être chargée.

badge

Courte pastille de texte.

Aucun attribut propre.

button

Contrôle activable ; ses enfants (icône, texte) forment son contenu.

toggle

Bascule activé/désactivé.

checkbox

Case à cocher (listes de tâches).

slider

Curseur sur un intervalle numérique ; le glissement est géré par l’hôte.

select

Liste déroulante ; la liste ouverte est dessinée par l’hôte.

option

Choix d’un select ; son texte est le libellé affiché.

field

Champ de texte d’une ligne, édité par l’hôte, méthodes de saisie (IME) comprises.

textarea

Champ de texte de plusieurs lignes, édité par l’hôte, méthodes de saisie (IME) comprises.

form

Regroupe des contrôles nommés. Avec intent, la validation envoie leurs valeurs à un service d’écriture directement depuis l’hôte ; la logique du widget ne fournit jamais ce contenu.

elapsed

Durée affichée que l’hôte fait avancer à partir d’un repère donné par un service : un chronomètre qui tourne ne demande aucun travail à la logique. Stylé comme text ; repeint seulement quand le texte affiché change, au plus à 60 Hz, et jamais quand le widget est masqué.

progress

Barre de progression horizontale.

gauge

Jauge en anneau ou en arc.

chart

Graphique en ligne, en aire, en barres ou sparkline, dessiné par l’hôte.

series

Une série de données d’un chart, colorée par color.

separator

Filet de séparation entre deux groupes.

canvas

Surface que l’hôte peint à partir de la dernière liste de commandes passée à draw.

Aucun attribut propre.

popover

Panneau flottant ancré à un élément, dessiné au-dessus du contenu et rogné au cadre du widget (listes déroulantes, menus contextuels).

Événements

Un événement marqué comme action de l’utilisateur autorise un appel de service protégé pendant que la logique le traite. Le détail est ce que reçoit un gestionnaire ; dans un gestionnaire écrit sous forme d’appel, il s’appelle event :

    <list class="history" stick-to-end={state.following} item-height="20" label={heading(state)} on:stick={stuck(event.stuck)}>

Les touches nommées de keydown sont :

Enter, Escape, Backspace, Delete, ArrowUp, ArrowDown, ArrowLeft, ArrowRight, Home, End, PageUp, PageDown.

Toute autre key est un unique caractère imprimable.

Tailles par défaut

Les éléments que PlayerVox OverCrow dessine prennent ces tailles, en pixels logiques à 100 %, sauf si le style définit width ou height. Tout autre élément tire sa taille de son contenu et du style : un canvas n’a pas de taille tant que le style ne lui en donne pas.

.dots {
  height: 12px;
}