Boş durum

Boş bir alan hata gibi okunur. Bir boş durum, hangi alanın boş olduğunu, neden boş olduğunu ve sırada ne yapılacağını söyler — ve en kolay unutulan durumdur, çünkü geliştirme sırasında hep veri vardır.

Temel boş durum

Henüz yazı yok

src/posts içine bir Markdown dosyası ekleyin, burada görünsün.

empty({
  title: 'Henüz yazı yok',
  description: 'src/posts içine bir Markdown dosyası ekleyin, burada görünsün.',
})

Bir simgeyle

Simge süstür — aria-hidden ile işaretlenir, çünkü başlık neler olduğunu zaten söyler.

Burada bir şey yok

Bu klasörde hiç sayfa yok.

empty({
  icon: icon('folder'),
  title: 'Burada bir şey yok',
  description: 'Bu klasörde hiç sayfa yok.',
})

Bir eylemle

Çocuklar eylem sırası olur.

“islands” için sonuç yok

Yazımı denetleyin ya da bunun yerine belgelere göz atın.

Belgelere göz at

empty({
  icon: icon('search'),
  title: '“islands” için sonuç yok',
  description: 'Yazımı denetleyin ya da bunun yerine belgelere göz atın.',
},
  button({ href: '/docs' }, 'Belgelere göz at'),
  button({ variant: 'outline', color: 'neutral' }, 'Aramayı temizle'),
)

Bir kartta

Dağıtımlar

Henüz dağıtım yok

main dalına gönderin, ilk derleme burada görünsün.

card(
  cardHeader({ title: 'Dağıtımlar' }),
  cardBody(
    empty({
      title: 'Henüz dağıtım yok',
      description: 'main dalına gönderin, ilk derleme burada görünsün.',
    }, button({ size: 'sm' }, 'Bir depo bağla')),
  ),
)

Bir tablonun yerine

Altında hiç satır olmayan bir başlık işlemek yerine tabloyu bir boş durumla değiştirin.

Derleme geçmişi

Kayıtlı derleme yok

Site en az bir kez dağıtıldığında çalıştırmalar burada görünür.

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

  return card(
    cardHeader({ title: 'Derleme geçmişi' }),
    rows.length
      ? table({ columns: [{ key: 'commit', header: 'İşleme' }], rows })
      : cardBody(empty({
          title: 'Kayıtlı derleme yok',
          description: 'Site en az bir kez dağıtıldığında çalıştırmalar burada görünür.',
        })),
  )
})()

Proplar

Prop	Tür	Varsayılan	Açıklama
`icon`	`Child`	—	Başlığın üstündeki süs simgesi; ekran okuyuculardan gizlenir.
`title`	`Child`	—	Birkaç sözcükle neyin boş olduğu.
`description`	`Child`	—	Neden boş olduğu ya da bu konuda ne yapılacağı.

Çocuklar, açıklamanın altında eylem sırası olarak işlenir.