Leerzustand

Eine leere Fläche liest sich wie ein Fehler. Ein Leerzustand sagt, welche Fläche leer ist, warum, und was als Nächstes zu tun ist — und er ist der Fall, den man am leichtesten vergisst, weil es in der Entwicklung immer Daten gibt.

Einfacher Leerzustand

Noch keine Beiträge

Lege eine Markdown-Datei in src/posts an, und sie erscheint hier.

empty({
  title: 'Noch keine Beiträge',
  description: 'Lege eine Markdown-Datei in src/posts an, und sie erscheint hier.',
})

Mit Icon

Das Icon ist Dekoration — es ist mit aria-hidden markiert, weil der Titel schon sagt, was los ist.

Hier ist nichts

Dieser Ordner enthält keine Seiten.

empty({
  icon: icon('folder'),
  title: 'Hier ist nichts',
  description: 'Dieser Ordner enthält keine Seiten.',
})

Mit einer Aktion

Kinder werden zur Aktionsreihe.

Keine Treffer für „Islands“

Prüfe die Schreibweise, oder stöbere stattdessen in der Dokumentation.

Doku durchstöbern

empty({
  icon: icon('search'),
  title: 'Keine Treffer für „Islands“',
  description: 'Prüfe die Schreibweise, oder stöbere stattdessen in der Dokumentation.',
},
  button({ href: '/de/docs' }, 'Doku durchstöbern'),
  button({ variant: 'outline', color: 'neutral' }, 'Suche zurücksetzen'),
)

In einer Karte

Deployments

Noch keine Deployments

Push nach main, und der erste Build taucht hier auf.

card(
  cardHeader({ title: 'Deployments' }),
  cardBody(
    empty({
      title: 'Noch keine Deployments',
      description: 'Push nach main, und der erste Build taucht hier auf.',
    }, button({ size: 'sm' }, 'Repository verbinden')),
  ),
)

Anstelle einer Tabelle

Tausche die Tabelle gegen einen Leerzustand, statt einen Kopf ohne Zeilen darunter zu rendern.

Build-Verlauf

Keine Builds erfasst

Läufe erscheinen hier, sobald die Website mindestens einmal deployt wurde.

return (() => {
  const rows = []

  return card(
    cardHeader({ title: 'Build-Verlauf' }),
    rows.length
      ? table({ columns: [{ key: 'commit', header: 'Commit' }], rows })
      : cardBody(empty({
          title: 'Keine Builds erfasst',
          description: 'Läufe erscheinen hier, sobald die Website mindestens einmal deployt wurde.',
        })),
  )
})()

Props

Prop	Typ	Standard	Beschreibung
`icon`	`Child`	—	Dekoratives Zeichen über dem Titel; vor Screenreadern verborgen.
`title`	`Child`	—	Was leer ist, in wenigen Worten.
`description`	`Child`	—	Warum es leer ist, oder was dagegen zu tun ist.

Kinder werden als Aktionsreihe unter der Beschreibung gerendert.