Skip to content
Elements / Feedback

dialog

binds state

A panel over the screen for something that needs an answer or attention first: confirm a delete, a short form, one item's details. It opens when bind= is true, so start that state false and open it from a button, unless it should greet people as the screen opens; its × button, Escape and a press outside it close it.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground
Tweak the props
size

Props

"text"textThe title at its top, e.g. Delete order?optional
bindstateA true/false state: true shows it, e.g. bind=confirm. Open it with on=set:confirm:true; close it from a button inside with on=set:confirm:false.required
sizesm · md · lgHow wide it gets: sm (a question), md (a short form) or lg (details).md
onactionActions to run when it's closed by its × button, Escape or a press outside it, e.g. emit:changed. Separate several with ;—
ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—
tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

Children: any elements.

SayShape v0.1 is an early prototype under the MIT License. Status · GitHub