Peels

Superpositions

Boîte de dialogue #

Fenêtre modale native avec API Invoker Commands — dialog

Cette action est irréversible. Êtes-vous sûr de vouloir continuer ?

 
<button commandfor="dialog-demo" command="show-modal">Ouvrir la boîte de dialogue</button>

<dialog id="dialog-demo" closedby="any">
  <p>Cette action est irréversible. Êtes-vous sûr de vouloir continuer ?</p>
  <div data-layout="cluster">
    <button commandfor="dialog-demo" command="close">Confirmer</button>
    <button commandfor="dialog-demo" command="close">Annuler</button>
  </div>
</dialog>

Fermer cette boîte de dialogue ?

 
<button commandfor="dialog-form-demo" command="show-modal">Ouvrir le formulaire</button>

<dialog id="dialog-form-demo" closedby="any">
  <form method="dialog">
    <p>Fermer cette boîte de dialogue ?</p>
    <button value="cancel">Fermer</button>
  </form>
</dialog>

Tiroir #

Panneau coulissant depuis un bord de l'écran — button[popovertarget] + aside[popover]

<button popovertarget="drawer-1" type="button" aria-label="Ouvrir le menu">
  Menu
</button>

<aside id="drawer-1" popover="auto" data-side="start">
  <button popovertarget="drawer-1" popovertargetaction="hide" type="button" aria-label="Fermer">
    ×
  </button>
  <nav>
    <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">À propos</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</aside>
<button popovertarget="drawer-2" type="button" aria-label="Ouvrir les filtres">
  Filtres
</button>

<aside id="drawer-2" popover="auto" data-side="end">
  <button popovertarget="drawer-2" popovertargetaction="hide" type="button" aria-label="Fermer">
    ×
  </button>
  <p>Panneau depuis la droite (data-side="end").</p>
</aside>

Bandeau dépliant #

Panneau qui se déroule en flow normal en poussant le contenu — button[aria-expanded] + [data-push-down]

<button class="push-down-toggle" type="button" aria-controls="pd-1" aria-expanded="false">
  Menu
</button>

<aside id="pd-1" data-push-down>
  <nav>
    <ul>
      <li><a href="#">Accueil</a></li>
      <li><a href="#">À propos</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</aside>

Info-bulle #

Info-bulle native — [title]

Survolez cet acronyme pour voir l’info-bulle native.

CSS 

<p>
  Survolez cet <abbr title="HyperText Markup Language">acronyme</abbr> pour voir l’info-bulle native.
</p>

<p>
  <button title="Enregistrer le document (Ctrl+S)">Enregistrer</button>
  <a href="#" title="Voir tous les articles de la catégorie CSS">CSS</a>
</p>

<!-- Premier jet : tooltip natif via [title]. Évolution future : anchor-positioning CSS. -->