Drawer

Un panneau qui glisse depuis un bord de l'écran, au-dessus du contenu, ouvert par un bouton. La personne l'utilise, le ferme, et revient là où elle était.

Sur cette page

Playground

Bord

Pied

Fond

HTML

<button class="feitio-button" type="button" popovertarget="pg-drawer">Ouvrir le panneau</button><div class="feitio-drawer" id="pg-drawer" popover role="dialog" aria-label="Filtres"><div class="drawer-header"><h2>Filtres</h2><button type="button" class="feitio-button close" data-size="small" popovertarget="pg-drawer" popovertargetaction="hide"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Fermer</button></div><div class="drawer-body"><p>Les filtres de la liste.</p></div></div>

Quand l'utiliser

Pour la navigation produit sur mobile (l'AppShell).
Pour les filtres d'une liste sur mobile, ou les détails d'un élément sans quitter la liste.

Quand ne pas l'utiliser

À confirmer : Dialogue.
Un formulaire long : une page.
Un tiroir ouvrant un autre : jamais.

Exemples

Du n'importe quel bord

Droite (par défaut), gauche, en haut ou en bas. Le titre et le pied de page sont optionnels ; la petite croix est toujours présente. Elle se ferme avec Esc ou un clic en dehors.

Afficher le code

HTML

<button type="button" class="feitio-button" popovertarget="filtros">…Filtros</button>
<div class="feitio-drawer" id="filtros" popover role="dialog" aria-labelledby="filtros-t">
  <div class="drawer-header">
    <h2 id="filtros-t">Filtros</h2>                       <!-- opcional -->
    <button type="button" class="feitio-button close" data-size="small" popovertarget="filtros" popovertargetaction="hide">…Fechar</button>
  </div>
  <div class="drawer-body">…</div>
  <div class="drawer-footer">…</div>                      <!-- opcional -->
</div>

Anatomie

Ce que contient le panneau latéral.

En-tête : le titre, optionnel, et la petite croix dans le coin.
Corps : le contenu ; il défile de lui-même.
Pied de page, optionnel : l'action, hors du défilement.

États

Ouverture et fermeture : elle glisse, et l'arrière-plan s'assombrit.
Ouvert : Esc, la petite croix ou un clic en dehors la ferment ; le focus revient sur le bouton d'ouverture.
Fermé : ne prend pas de place ni de focus.

Faire et ne pas faire

Filtres dans un panneau latéral, avec l'action indiquant le résultat : « Afficher 12 résultats ».

La personne sait ce qui se passe avant la fermeture.

Don’t

« Voulez-vous vraiment supprimer ? » à l'intérieur d'un panneau latéral.

Un tiroir se ferme avec un clic à l'extérieur ; une décision ne doit pas être accidentelle.

Le bouton pointe vers le tiroir (popovertarget) ; le navigateur indique s'il est ouvert.
Le tiroir a un nom : le titre, ou aria-label sans l'un.

Attributs

Attribut	Valeurs	Pour quoi
`class="feitio-drawer"` + `popover`	obligatoire	Le tiroir, hors écran jusqu'à ce qu'il soit ouvert.
`data-side`	`"end"`, `"start"`, `"top"`, `"bottom"`	D'ailleurs il entre de quel côté.
`class="drawer-header"`, `"drawer-body"`, `"drawer-footer"`	les parties	En-tête, corps et pied de page (optionnel).