Search
La recherche produit : un champ au centre de l'écran, avec les résultats affichés ligne par ligne à mesure que vous tapez.
Sur cette page
Playground
Résultats
Fond
<dialog open class="feitio-dialog search-dialog search-sample" id="pg-search" aria-labelledby="pg-search-t"><form method="dialog"><h2 id="pg-search-t" class="feitio-visually-hidden">Rechercher dans Feitio</h2><div class="search-head"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-search"></use></svg><label class="feitio-visually-hidden" for="pg-search-field">Rechercher dans Feitio</label><input class="search-field" id="pg-search-field" type="search" autocomplete="off" placeholder="Button, couleur…"><button type="submit" class="feitio-button close" data-size="small" value="close"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Fermer</button></div><ul class="results"><li><a href="#playground" data-active><strong>Table</strong><small>Composants</small></a></li><li><a href="#playground"><strong>Tokens</strong><small>Développement</small></a></li></ul><p class="foot"><span><kbd class="feitio-kbd">↵</kbd> ouvre le premier</span><span><kbd class="feitio-kbd">↑</kbd><kbd class="feitio-kbd">↓</kbd> choisir</span><span><kbd class="feitio-kbd">Esc</kbd> ferme</span></p></form></dialog>Quand l'utiliser
- Dans un produit ou une documentation comportant de nombreuses pages, où la recherche via le menu prend trop de temps.
Quand ne pas l'utiliser
- Pour filtrer une liste sur l'écran : un champ de filtre au-dessus d'elle, comme dans les catalogues.
- Avec peu de pages : le menu suffit.
Exemples
La recherche de ce site
Cliquez sur le bouton, ou appuyez sur / ou Ctrl + K.
Afficher le code
<button type="button" class="feitio-button" data-open-search>…Buscar</button>
<dialog class="feitio-dialog search-dialog" aria-labelledby="busca-t">
<form method="dialog">
<div class="search-head">…<input class="search-field" type="search">…</div>
<ul class="results">…</ul>
<p class="foot">…</p>
</form>
</dialog>Anatomie
- Champ : avec la loupe et Fermer sur la même ligne.
- Résultats : un par ligne, le nom et la zone ; le premier est déjà marqué.
- Clefs : ce que chacune fait.
États
- Ouvert : au milieu de l'écran, un peu au-dessus du centre ; un clic à l'extérieur le ferme, car la recherche ne décide rien.
- Tapage : les résultats changent avec chaque lettre ; Entrée ouvre le premier et les flèches naviguent dans la liste.
- Rien trouvé : il le dit et suggère un autre mot.
D'où proviennent les résultats
L'index est construit lorsque le site est publié, à partir de chaque page (avec Pagefind, qui fonctionne sans serveur). Dans ce brouillon, la liste a été écrite à la main.
Accessibilité
- C'est un Dialog nommé ; le focus commence dans le champ.
- Les résultats sont des liens : Tab, flèches et Entrée fonctionnent.
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
data-open-search | sur le bouton d'ouverture | Ouvre la recherche. |
class="feitio-dialog search-dialog" | sur le <dialog> | La recherche, qui se ferme avec un clic en dehors. |
class="results" | la liste | Un résultat par ligne. |