DescriptionList

Pasangan label dan nilai untuk halaman detail: ringkasan pickup, profil klien, atau isi satu baris tabel.

Dasar

Berikan daftar field. layout="inline" menaruh label di kiri dan nilainya di kanan — susunan yang paling mudah dipindai di halaman detail. Field yang belum terisi tetap digambar dengan emptyText, karena baris yang hilang terbaca sebagai data yang gagal dimuat.

Kode pickup: PU-0042
Lokasi: Kantor Bekasi
Armada: B 1234 XYZ
Berat tercatat: 2,1 ton
Residu: 0
Catatan: —

Beberapa kolom

columns membagi field menjadi dua atau tiga kolom mulai lebar sm; di HP selalu satu kolom. Field panjang seperti alamat diberi wide supaya memakai seluruh baris.

Nama klien: PT Sinar Bekasi
NPWP: 01.234.567.8-901.000
PIC: Rini Hartati
Telepon: +62 812 3456 7890
Alamat penjemputan: Jl. Ahmad Yani No. 12, Bekasi Selatan, Jawa Barat 17141

Nilai khusus

Slot value-[key] mengganti nilai satu field saja: status sebagai Badge, kode dengan CopyButton, atau dokumen sebagai tautan. Field lain tidak ikut berubah.

Kode pickup: PU-0042
Status: Selesai
Berita acara: BA-0042.pdf

API

Props

Prop	Tipe	Default	Keterangan
items	W4cDescriptionListItem[]	[]	Pasangan label dan nilai, dalam urutan tampilnya.
layout	'stack' \| 'inline'	'stack'	stack menaruh label di atas nilainya, inline menaruhnya bersebelahan. Di layar HP keduanya bertumpuk.
columns	1 \| 2 \| 3	1	Jumlah kolom mulai lebar sm. HP selalu satu kolom, apa pun isinya.
size	'sm' \| 'md'	'md'	sm untuk panel samping dan kartu, md untuk halaman detail.
divided	boolean	false	Garis pemisah antar field. Berguna pada daftar panjang satu kolom.
emptyText	string	'—'	Ditampilkan saat nilainya kosong, sehingga baris tidak pernah terlihat gagal dimuat. Angka 0 tetap dianggap nilai.

W4cDescriptionListItem

Field	Tipe	Default	Keterangan
label	string	—	Nama field.
value	string \| number \| null	—	Nilainya. Kosong, null, atau tidak diisi akan menampilkan emptyText.
key	string	—	Kunci field, sekaligus akhiran slot value-[key] untuk nilai khusus.
wide	boolean	false	Membuat field memakai seluruh lebar pada daftar berkolom, misalnya alamat.

Slots

Slot	Tipe	Default	Keterangan
value	{ item, index }	—	Mengganti nilai semua field.
value-[key]	{ item, index }	—	Mengganti nilai satu field saja — badge, tautan, atau tombol salin — dan menimpa slot value.

Komponen ini menggambar <dl> dengan <dt> dan <dd>, sehingga pembaca layar membacakan label bersama nilainya, bukan sebagai dua baris terpisah.