EmptyState
Was stattdessen eines leeren Listenzeigers angezeigt wird: es erklärt, warum leer ist, und lädt den nächsten Schritt ein.
Auf dieser Seite
Playground
Noch keine Erinnerungen
Erstelle die erste, dann erscheint sie hier.
Zeichnung
Größe
Aktion
Hintergrund
<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>Noch keine Erinnerungen</h3><p>Erstelle die erste, dann erscheint sie hier.</p></div>Wann verwenden
- Wenn eine Liste, Tabelle oder Seite nichts anzuzeigen hat: beim ersten Mal, nach einem Filter ohne Ergebnisse oder bei einem großen Fehler.
Wann nicht verwenden
- Während des Ladens: "empty" und "loading" sind verschiedene Dinge.
- Feldfehler: die Fehlerkomponenten.
Beispiele
Noch keine Termine
Erstellen Sie den ersten, und er erscheint hier.
Erstmal
Mit dem Skizze und der Hauptaktion.
Code anzeigen
<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>Nichts für "Pflanzen" gefunden
Versuchen Sie ein anderes Wort oder sehen Sie sie alle.
Suche ohne Ergebnisse
Keine Skizze, kompakt und der Weg zum Zurücksetzen des Filters.
Code anzeigen
<div class="feitio-empty" data-size="compact">
<h3>Nada encontrado para "plantas"</h3>
…
</div>Der Server hat nicht geantwortet
Nichts wurde verloren. Versuchen Sie es in einer Minute erneut.
Große Fehlermeldung
Mit dem gerissenen Papier-Zeichnung und was zu tun ist.
Code anzeigen
<div class="feitio-empty">
<svg …>…</svg>
<h3>O servidor não respondeu</h3>
…
</div>Do and don't
Do
Keine Aufgaben hier
Erstellen Sie die erste.
Sagt, was es ist und was zu tun ist.
Don’t
Das sieht so aus, als wäre hier noch nichts…
Kolonnenstriche und kein Ausweg: Die Person bleibt vor dem Nichts stehen.
Schreiben
- Titel: das, was nicht existiert ("Keine Termine noch"). Text: der nächste Schritt. Button: die Handlung, mit Verb und Objekt.
Barrierefreiheit
- Das Zeichen geht weiter (
aria-hidden); die Überschrift und der Text sagen alles.
Attribute
| Attribut | Werte | Zum Zweck |
|---|---|---|
class="feitio-empty" | erforderlich | Der zentrierte Kasten. |
data-size="compact" | optional | Für eine Suche oder Filterung ohne Ergebnisse. |
Die Zeichnungen sind im Illustrations-Katalog.