Pusty stan

Puste miejsce czyta się jak błąd. Pusty stan mówi, które miejsce jest puste, dlaczego i co zrobić dalej — a przy tym najłatwiej o nim zapomnieć, bo podczas pracy dane są zawsze.

Podstawowy pusty stan

Jeszcze żadnych wpisów

Dodaj plik Markdown do src/posts, a pojawi się tutaj.

empty({
  title: 'Jeszcze żadnych wpisów',
  description: 'Dodaj plik Markdown do src/posts, a pojawi się tutaj.',
})

Z ikoną

Ikona jest ozdobą — ma aria-hidden, bo tytuł już mówi, co się dzieje.

Nic tu nie ma

Ten katalog nie zawiera żadnych stron.

empty({
  icon: icon('folder'),
  title: 'Nic tu nie ma',
  description: 'Ten katalog nie zawiera żadnych stron.',
})

Z akcją

Dzieci stają się rzędem akcji.

Brak wyników dla „wyspy”

Sprawdź pisownię albo przejrzyj dokumentację.

Przeglądaj dokumentację

empty({
  icon: icon('search'),
  title: 'Brak wyników dla „wyspy”',
  description: 'Sprawdź pisownię albo przejrzyj dokumentację.',
},
  button({ href: '/docs' }, 'Przeglądaj dokumentację'),
  button({ variant: 'outline', color: 'neutral' }, 'Wyczyść wyszukiwanie'),
)

W karcie

Wdrożenia

Jeszcze żadnych wdrożeń

Wypchnij na main, a pierwszy build pojawi się tutaj.

card(
  cardHeader({ title: 'Wdrożenia' }),
  cardBody(
    empty({
      title: 'Jeszcze żadnych wdrożeń',
      description: 'Wypchnij na main, a pierwszy build pojawi się tutaj.',
    }, button({ size: 'sm' }, 'Podepnij repozytorium')),
  ),
)

Zamiast tabeli

Podmień tabelę na pusty stan, zamiast renderować nagłówek bez żadnych wierszy pod nim.

Historia buildów

Brak zapisanych buildów

Uruchomienia pojawią się tutaj, gdy witryna zostanie wdrożona choć raz.

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

  return card(
    cardHeader({ title: 'Historia buildów' }),
    rows.length
      ? table({ columns: [{ key: 'commit', header: 'Commit' }], rows })
      : cardBody(empty({
          title: 'Brak zapisanych buildów',
          description: 'Uruchomienia pojawią się tutaj, gdy witryna zostanie wdrożona choć raz.',
        })),
  )
})()

Propsy

Prop	Typ	Domyślnie	Opis
`icon`	`Child`	—	Ozdobny znak nad tytułem; ukryty przed czytnikami ekranu.
`title`	`Child`	—	Co jest puste, w kilku słowach.
`description`	`Child`	—	Dlaczego jest puste albo co z tym zrobić.

Dzieci renderują się jako rząd akcji pod opisem.