Kosong

Ruang kosong terbaca seperti kutu. Keadaan kosong menyatakan ruang mana yang kosong, mengapa, dan apa yang harus dilakukan berikutnya — dan inilah kasus yang paling mudah terlupakan, karena selama pengembangan datanya selalu ada.

Keadaan kosong dasar

Belum ada pos

Tambahkan berkas Markdown ke src/posts dan ia akan muncul di sini.

empty({
  title: 'Belum ada pos',
  description: 'Tambahkan berkas Markdown ke src/posts dan ia akan muncul di sini.',
})

Dengan ikon

Ikonnya adalah hiasan — ia ditandai aria-hidden, karena judulnya sudah menyatakan apa yang terjadi.

Tidak ada apa-apa di sini

Folder ini tidak berisi halaman.

empty({
  icon: icon('folder'),
  title: 'Tidak ada apa-apa di sini',
  description: 'Folder ini tidak berisi halaman.',
})

Dengan tindakan

Anaknya menjadi baris tindakan.

Tidak ada hasil untuk “islands”

Periksa ejaannya, atau jelajahi dokumentasinya saja.

Jelajahi dokumentasi

empty({
  icon: icon('search'),
  title: 'Tidak ada hasil untuk “islands”',
  description: 'Periksa ejaannya, atau jelajahi dokumentasinya saja.',
},
  button({ href: '/docs' }, 'Jelajahi dokumentasi'),
  button({ variant: 'outline', color: 'neutral' }, 'Bersihkan pencarian'),
)

Di dalam kartu

Penerapan

Belum ada penerapan

Kirim ke main dan build pertamanya akan muncul di sini.

card(
  cardHeader({ title: 'Penerapan' }),
  cardBody(
    empty({
      title: 'Belum ada penerapan',
      description: 'Kirim ke main dan build pertamanya akan muncul di sini.',
    }, button({ size: 'sm' }, 'Sambungkan repositori')),
  ),
)

Menggantikan tabel

Tukar tabelnya dengan keadaan kosong alih-alih merender kepala tabel tanpa baris di bawahnya.

Riwayat build

Tidak ada build tercatat

Riwayat muncul di sini begitu situsnya diterapkan setidaknya sekali.

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

  return card(
    cardHeader({ title: 'Riwayat build' }),
    rows.length
      ? table({ columns: [{ key: 'commit', header: 'Commit' }], rows })
      : cardBody(empty({
          title: 'Tidak ada build tercatat',
          description: 'Riwayat muncul di sini begitu situsnya diterapkan setidaknya sekali.',
        })),
  )
})()

Props

Prop	Tipe	Bawaan	Deskripsi
`icon`	`Child`	—	Glif hiasan di atas judulnya; disembunyikan dari pembaca layar.
`title`	`Child`	—	Apa yang kosong, dalam beberapa kata.
`description`	`Child`	—	Mengapa ia kosong, atau apa yang harus dilakukan.

Anaknya dirender sebagai baris tindakan di bawah deskripsinya.