pantoken / renderers/web-components/src / modal

Változó: modal

const modal: ElementDefinition

Alfa

<instui-modal> — egy valódi <dialog>, ezért ingyenesen kapja meg a fókuszcsapdát, az Escape-to-close-t és a ::backdrop-t. A open attribútum vezérli a showModal()/close()-et; egy natív elvetés (Escape vagy háttérkattintás) visszatükröződik az attribútumba, és buborékzó close eseményként ismét kiváltódik. Vezérelhető a könnyű DOM-ból az Invoker Commands-on keresztül — egy <button command="--show|--close|--toggle" commandfor="modal-id"> id szerint váltja. A tartalom az alapértelmezett slotba kerül.

Példa

<button command="--show" commandfor="confirm">Delete…</button>
<instui-modal id="confirm">
  <h2>Delete this item?</h2>
  <button command="--close" commandfor="confirm">Cancel</button>
</instui-modal>

Delete this item?