EmptyState
Ce qui s'affiche à la place d'une liste vide : il explique pourquoi elle est vide et invite à l'étape suivante.
Sur cette page
Playground
Pas encore de rappels
Créez le premier et il apparaîtra ici.
Dessin
Taille
Action
Fond
<div class="feitio-empty"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 120 100" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 40c30-2.6 62 1.4 92-1.8"/>
<path d="M18 41.5c3 16 6.2 32 10.4 46.6"/>
<path d="M25.6 88.6c22.4-1.8 43.6.6 66.2-1.6"/>
<path d="M101.6 41.6c-2.8 15.4-6 30.8-10.4 46.4"/>
<path d="M32 52c1.8 10 3.2 20 4.6 29.4M50 52.6c.4 9.8.2 19.6.6 29.2M68.4 52c-.6 9.8-1.2 19.6-1.8 29.6M86 51.6c-1.6 9.6-3 19.4-4.8 29.2"/>
<path d="M36 39c2.4-14 13-24.4 24.6-24.6C72.8 14.2 83.4 25 85 38.6"/>
<path class="feitio-hot" d="M60.6 6.4c-.2 2.4.2 4.8-.1 7.2M44 11.2c1.4 1.8 2.6 3.6 4 5.6M77.2 11c-1.4 1.8-2.6 3.8-4 5.8"/>
</svg>
<h3>Pas encore de rappels</h3><p>Créez le premier et il apparaîtra ici.</p></div>Quand l'utiliser
- Quand une liste, un tableau ou une page n'a rien à montrer : la première fois, après un filtre sans résultats, ou lors d'une grosse erreur.
Quand ne pas l'utiliser
- Pendant le chargement : "vide" et "chargement" sont deux choses différentes.
- Erreur de champ : les composants d'erreur.
Exemples
Aucun calendrier pour le moment
Créez-en le premier et il apparaîtra ici.
Première fois
Avec le dessin et l'action principale.
Afficher le code
<div class="feitio-empty">
<svg …>…</svg>
<h3>Nenhum agendamento ainda</h3>
<p>Crie o primeiro e ele aparece aqui.</p>
<button type="button" class="feitio-button" data-variant="primary">Criar agendamento</button>
</div>Rien trouvé pour "plantes"
Essayez d'autres mots, ou voyez-les tous.
Recherche sans résultats
Pas de dessin, compacte et le moyen de désactiver le filtre.
Afficher le code
<div class="feitio-empty" data-size="compact">
<h3>Nada encontrado para "plantas"</h3>
…
</div>Le serveur n'a pas répondu
Rien n'est perdu. Réessayez dans un minute.
Grosse erreur
Avec le dessin sur papier froissé et ce qu'il faut faire.
Afficher le code
<div class="feitio-empty">
<svg …>…</svg>
<h3>O servidor não respondeu</h3>
…
</div>Faire et ne pas faire
Do
Aucune tâche ici
Créer la première.
Dit ce que c'est et ce qu'il faut faire.
Don’t
Cela ressemble à ne rien avoir encore ici…
Des ellipses et aucune issue : la personne est laissée face au néant.
Écriture
- Titre : ce qui n'existe pas (« Aucun calendrier pour le moment »). Texte : l'étape suivante. Bouton : l'action, avec verbe et objet.
Accessibilité
- Le dessin suit (
aria-hidden) ; le titre et le texte disent tout.
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-empty" | obligatoire | La boîte centrée. |
data-size="compact" | optionnel | Pour une recherche ou un filtre sans résultats. |
Les dessins se trouvent dans le catalogue d'illustrations.