Komponen · 100 primitif 8 keluarga

Pustaka

Komponen

100 bahan dasar yang dipakai seluruh ruang kerja, semuanya terlihat di satu gulungan — tak perlu masuk satu per satu cuma untuk tahu rupanya. Tiap baris membawa satu spesimen pada ukuran aslinya; tak ada yang diperkecil atau dipotong.

Klik namanya untuk masuk ke halamannya — di sana ada lembar spesimen lengkap, kapan ia dipakai, dan yang paling sering hilang di dokumentasi: kapan sebaiknya jangan.

Aksi

9

Benda yang ditekan orang, lalu sesuatu langsung terjadi.

UiAnswerChoice Satu pilihan jawaban di dalam soal — bisa dipilih, lalu berubah menandakan benar atau salah.
UiButton Tombol yang ditekan untuk melakukan sesuatu di halaman ini — menyimpan, menghapus, membuka.
UiCopy Tombol yang menyalin sepotong teks ke papan klip, lalu mengabarkan bahwa penyalinan berhasil.
UiFormActions Baris penutup formulir. Tombol utama selalu di kanan, pembatalan di sebelah kirinya.
UiMenu Tombol tiga titik yang membuka daftar tindakan tambahan untuk satu baris atau satu benda.
UiSegmented Deretan pilihan berdempetan yang hanya boleh menyala satu — seperti tombol pilihan, tapi lebih rapat.
UiSwitch Sakelar hidup–mati yang langsung berlaku begitu digeser, tanpa perlu menekan tombol simpan.

Berlaku langsung — tidak perlu tombol simpan.

UiTag Keping kecil yang bisa diklik untuk menyaring daftar. Diklik berarti menyala; diklik lagi berarti padam.
UiToolbar Satu baris tempat tombol-tombol sejenis berkumpul di atas isi yang mereka kendalikan.
12 baris

Isian & formulir

12

Tempat orang mengetik, memilih, dan menyerahkan jawabannya.

UiCheckbox Kotak yang dicentang untuk menyetujui sesuatu, atau memilih beberapa hal sekaligus.
UiField Satu isian lengkap: namanya di atas, kotaknya di bawah, dan keterangannya menempel di situ juga.

Dipakai untuk masuk ke ruang kerja.

UiFieldset Pagar yang mengelompokkan beberapa isian di bawah satu judul bersama.
Pemberitahuan
UiFileDrop Bidang tempat berkas bisa dijatuhkan dari desktop, atau diklik untuk membuka pemilih berkas.

JPG atau PNG, maksimal 2 MB.

UiFormRow Dua isian bersebelahan di layar lebar, yang turun jadi bertumpuk begitu layarnya sempit.
UiHint Petunjuk yang terlipat — tersedia kalau dibutuhkan, tidak mengganggu kalau tidak.
Kenapa emailnya harus yang itu?
Karena undangan ruang kerja dikirim ke alamat yang sama, dan alamat itu yang dipakai untuk masuk nanti.
UiKbd Gambaran satu tuts papan tik di dalam kalimat, seperti tombol kecil yang dicetak.
Esc
UiOtp Deretan kotak untuk kode sekali pakai; ketikan berpindah sendiri ke kotak berikutnya.
UiQuantity Pengatur jumlah barang: tombol kurang, angka yang bisa diketik, tombol tambah.
UiRadioGroup Sekelompok pilihan bertumpuk ke bawah yang hanya boleh dipilih satu, masing-masing boleh punya penjelasan.
Cara pengiriman
UiSearchInput Kotak pencarian dengan kaca pembesar di kiri dan tombol pembersih yang muncul begitu ada isinya.
UiSlider Penggeser untuk memilih angka dalam rentang, dengan nilainya terbaca di sebelah namanya.
60%

Penanda & status

13

Memberi kabar tentang keadaan sesuatu. Tak ada yang bisa ditekan di sini.

UiAvatar Lingkaran berisi foto orang, atau inisial namanya kalau fotonya tidak ada.
N
UiBadge Keping kecil yang melaporkan keadaan sesuatu. Ia tidak bisa ditekan, dan itu memang maksudnya.
draf
UiBanner Satu baris kabar yang berlaku untuk seluruh halaman, duduk di paling atas isi.
Ruang kerja ini sedang dalam mode uji coba.
UiCallout Kotak berisi catatan penting yang menempel pada bagian halaman tempat ia berdiri.
UiDiscountTag Keping potongan harga yang menghitung sendiri persennya dari harga lama dan harga sekarang.
−34%
UiIcon Satu gambar garis dari kumpulan ikon yang dipakai seluruh ruang kerja.
UiOrderStatus Status pesanan yang sudah diterjemahkan ke bahasa manusia beserta warnanya.
Menunggu bayar
UiScorePill Keping nilai berbentuk "berapa benar dari berapa soal", warnanya mengikuti seberapa baik hasilnya.
9/10 benar
UiStatusDot Titik berwarna kecil dengan satu kata di sebelahnya — penanda status yang paling ringan.
lolos
UiStockPill Keping yang mengubah sisa stok jadi kalimat: tersedia, tinggal sedikit, atau habis.
Tersedia
UiStreak Penanda rentetan hari belajar berturut-turut, dengan api yang meredup kalau rentetannya putus.
12 hari
UiTooltip Keterangan singkat yang muncul saat kursor mendekat atau saat benda itu disorot papan tik.
Muncul saat hover dan saat fokus papan tik — coba tekan Tab.
UiTrend Angka perubahan dalam persen dengan panah naik atau turun, untuk ditempel di sebelah sebuah bilangan.
+12,4%

Wadah & data

22

Kotak, baris, dan angka — tempat isi halaman duduk.

UiAddressCard Alamat pengiriman yang ditulis rapi: nama, baris alamat, lalu nomor telepon.
Rida Amalia Jl. Cihampelas No. 12Bandung, Jawa Barat 40131 0812-3456-7890
UiCartLine Satu barang di keranjang: gambarnya, namanya, catatannya, dan harganya dalam satu baris.

Abaya Kirana — Hitam

Ukuran M

Rp 349.000
UiCheckoutSummary Rincian biaya sebelum bayar: tiap barisnya satu pos, lalu total di paling bawah.
Subtotal Rp 149.000
Ongkos kirim Rp 22.000
Potongan -Rp 20.000
Total Rp 151.000
UiDivider Garis pemisah antar bagian, boleh dengan satu kata di tengahnya.
UiFacts Daftar pasangan istilah dan penjelasannya, seperti keterangan di sisi halaman.
Status
Mengikat
Ranah
Desain
Ditegakkan
checks#designNoElevation
UiFigure Gambar beserta keterangan di bawahnya, terikat sebagai satu kesatuan.
Tangga bidang: arahnya berlawanan antara mode terang dan gelap.
UiKeyValue Pasangan istilah dan isinya dalam bentuk paling rapat — dua kolom, tanpa jarak berlebih.
Kolom
auto 1fr
Baris
rapat
Dipakai di
panel samping
UiList Bungkus daftar yang memberi garis pemisah antar barisnya.
UiListItem Satu baris di dalam daftar — sama dengan baris biasa, tapi sudah jadi anggota daftar yang sah.
UiMasteryRing Cincin penguasaan sebuah topik, lengkap dengan nama topiknya di sebelah kanan.
Kata kerja lampau
UiMeter Bilah terisi yang menunjukkan sebuah angka dibanding batasnya.
Pasal yang punya pemeriksa 11/18
UiPanel Kotak berlatar sedikit lebih terang untuk mengumpulkan isi yang saling berhubungan.

Fakta pasal

Isi panel duduk di sini.
UiProgressRing Cincin yang terisi searah jarum jam, dengan persennya tertulis di tengah.
UiProse Pembungkus tulisan panjang yang mengatur jarak antar paragraf dan lebar barisnya.
Satu pasal satu berkas. Halaman ini, proyeksi ringkas di AGENTS.md, dan gerbang pemeriksanya membaca sumber yang sama — jadi tidak ada satu pun aturan yang ditulis dua kali.
UiQuote Kutipan yang menjorok, dengan nama penuturnya di bawah.

Kalau sebuah aturan penting, beri ia pemeriksa.

Catatan rapat, 12 Agustus
UiRow Satu baris setinggi tetap di dalam daftar, yang bisa dibuat dapat diklik.
Pesanan NB-1042
UiSection Satu bagian halaman dengan judul di kiri dan catatan kecil di kanan judulnya.

Tata letak

empat bentuk menutupi hampir semua susunan
Isi bagian ini duduk di bawah judulnya.
UiStat Satu angka besar dengan namanya di atas dan keterangan kecil di bawahnya.

Primitif

100

di shared/ui/

UiStatGroup Baris berisi beberapa angka besar yang otomatis turun ke bawah kalau layarnya sempit.

Primitif

100

Pasal

18

Keluarga

8

UiTable Tabel data berkolom yang bisa digulir ke samping tanpa menyeret seluruh halaman.
Pesanan terakhir
NomorPembeliStatusTotal
NB-1042rida@…DibayarRp 149.000
NB-1041anis@…MenungguRp 19.000
NB-1040yusuf@…DibatalkanRp 79.000
UiTimeline Rangkaian kejadian berurutan dari atas ke bawah, dihubungkan satu garis tegak.

  1. 12 Agu · 09.14

    Pesanan dibuat

  2. 12 Agu · 09.31

    Pembayaran diterima

  3. 13 Agu · 08.02

    Paket diserahkan ke kurir

UiTimelineItem Satu kejadian di dalam linimasa: waktunya, judulnya, dan penjelasan tambahan kalau ada.

  1. Kemarin

    Naskah disetujui

  2. Hari ini

    Sedang ditinjau

Keadaan & lapisan

10

Saat isinya kosong, saat masih dimuat, dan hal-hal yang muncul di atas halaman.

UiAlertDialog Kotak konfirmasi untuk tindakan yang sulit dibatalkan, dengan tombol batal dan tombol lanjut.
UiDrawer Laci yang menggeser masuk dari sisi layar, membawa isi yang lebih panjang dari sebuah lembar.
UiEmpty Yang tampil saat belum ada isinya: judul, alasannya kosong, dan satu jalan keluar.

Belum ada pesanan

Pesanan pertama muncul di sini begitu ada yang menyelesaikan pembayaran.

UiLiveRegion Wilayah tak terlihat yang membacakan perubahan kepada pembaca layar.
Sengaja tak terlihat. Ia hanya terdengar, dan hanya oleh yang memakai pembaca layar.
UiLoadingOverlay Lapisan tipis yang menutupi satu bagian selagi bagian itu diperbarui.

Pesanan hari ini

42

Menyegarkan angka Menyegarkan angka
UiPopover Panel kecil yang muncul menempel pada tombol pemicunya, membawa isi yang bisa diklik.
UiSheet Lembar yang muncul di tengah layar di atas halaman, dengan tombolnya di bagian bawah.
UiSkeleton Bentuk abu-abu berdenyut yang menempati tempat isi sungguhan selagi ia dimuat.
UiSpinner Lingkaran berputar yang menandakan ada pekerjaan berjalan tanpa diketahui kapan selesainya.
Memuat pesanan
UiToast Pemberitahuan singkat yang muncul di pojok sesudah sesuatu terjadi, lalu hilang sendiri.
Tak terlihat sampai ada pesan yang dikirim. Wadahnya sendiri memang tidak menggambar apa-apa.

Pemformatan

11

Satu tempat memutuskan bagaimana harga, waktu, dan angka ditulis — supaya tidak ditulis empat puluh cara.

UiCode Blok kode dengan spasi dan pergantian barisnya terjaga persis, plus tombol salin. 
npm run rules:verify
npm run rules:sync
UiDateTime Tanggal atau jam yang ditulis dalam gaya Indonesia dan tetap terbaca mesin.
UiDuration Lama waktu yang ditulis dalam satuan paling masuk akal: detik, menit, atau jam.
1 mnt
UiFileSize Ukuran berkas yang naik sendiri ke satuan yang pas — bita, kibibita, mebibita.
840 B
UiMedia Kotak gambar dengan perbandingan sisi yang dikunci, jadi tata letaknya tak melompat.
UiNumber Bilangan dengan pemisah ribuan gaya Indonesia, dan lebar angka yang rata.
1.284.000
UiPercent Angka persen yang ditulis dari pecahan — 0,72 keluar sebagai 72%.
72%
UiPrice Harga dalam rupiah, boleh dengan harga lama yang dicoret di sebelahnya.
Rp 149.000
UiRating Nilai bintang beserta jumlah orang yang memberi penilaian.
UiRelativeTime Waktu yang ditulis sebagai jarak dari sekarang: "2 hari lalu", "baru saja".
UiTruncate Tulisan panjang yang dipotong dengan titik-titik, dan utuhnya muncul saat kursor mampir.
Abaya Kirana edisi terbatas warna hitam arang dengan bordir tepi

Tata letak

9

Pengatur jarak dan susunan. Tak satu pun punya rupa sendiri; semuanya tak terlihat sampai diisi.

UiCenter Kotak yang menaruh isinya persis di tengah, mendatar dan menegak sekaligus.
tepat di tengah
UiCluster Penderet ke samping yang membungkus sendiri ke baris berikutnya kalau tak muat.
Selesai Menunggu Gagal
UiGrid Petak yang mengatur sendiri jumlah kolomnya berdasarkan lebar minimum tiap sel.
satu
dua
tiga
UiScrollArea Wilayah yang menggulir sendiri, dan gulirannya tidak menembus ke halaman di belakangnya.
Gulir kotak ini sampai habis, lalu perhatikan bahwa halaman di belakangnya tidak ikut bergerak. Baris ini sengaja dibuat panjang supaya isinya benar-benar melebihi tinggi kotaknya, dan gulirnya bisa dicoba sungguhan.
UiSpacer Ruang kosong yang memuai untuk mendorong isi sesudahnya ke ujung.
kiri kanan
UiSplit Baris dengan isi pertama yang memuai, sehingga isi terakhir terdorong ke ujung kanan.
menempel kiri terdorong kanan
UiStack Penumpuk ke bawah yang memberi jarak sama rata antar isinya.
satu dua tiga
UiSticky Pembungkus yang membuat isinya menempel di atas selagi halaman digulir.
menempel saat digulir
UiVisuallyHidden Tulisan yang disembunyikan dari mata tapi tetap terbaca pembaca layar.
Sengaja tak terlihat. Nyalakan pembaca layar untuk membuktikan ia benar-benar ada.