ProgressGroup

Satu bilah yang memecah satu keseluruhan menjadi bagian-bagiannya: 15 GB penyimpanan yang terisi foto, video, dan dokumen; atau berat material yang terkumpul bulan ini.

Dasar

Ini bukan progres sebuah pekerjaan — untuk itu pakai Progress. Yang digambar di sini adalah komposisi: satu angka yang terdiri dari beberapa angka lain.

Penyimpanan11,3 dari 15 GB
  • Foto4,2 GB
  • Video5,1 GB
  • Dokumen1,4 GB
  • Lain-lain0,6 GB
  • Kosong3,7 GB
Material terkelola bulan ini428,6 kg
  • Plastik182,4 kg
  • Kertas146,2 kg
  • Residu100,0 kg
Kapasitas armada
  • Beroperasi58%
  • Perawatan17%
  • Menganggur25%

Dengan atau tanpa max

  • Beri max bila keseluruhannya adalah batas yang diketahui — kuota 15 GB, kapasitas 12 armada. Sisa yang belum terpakai ikut digambar dan ikut terbaca.
  • Biarkan kosong bila yang penting perbandingannya, bukan batasnya. Keseluruhannya menjadi jumlah bagiannya, jadi bilahnya penuh.

Warna bagiannya

Bagian yang tidak memilih warna mendapat warna berikutnya dari rotasi primary → success → warning → neutral. danger tidak ikut rotasi — sama seperti auto pada Avatar — karena potongan merah terbaca sebagai ada yang salah dengan bagian itu, bukan sebagai warnanya. Bagian yang memang masalah, seperti residu atau material tertolak, memintanya sendiri lewat color="danger".

Bilahnya sendiri aria-hidden: seluruh angkanya ditulis sebagai teks di daftar bawahnya, jadi warna tidak pernah menjadi satu-satunya cara membacanya. Itu juga sebabnya daftar itu tetap ada — sebagai sr-only — ketika legend dimatikan.

Angka yang ditulis

Bagian tanpa valueText menuliskan porsinya dalam persen, bukan nilai mentahnya. Itu bukan pilihan gaya: komponen di library ini tidak memformat angka (aturan yang sama berlaku untuk StatCard dan Progress), dan nilai mentah membuka dua lubang sekaligus — 15 − (4,2 + 5,1 + 1,4 + 0,6) menghasilkan 3.6999999999999993 dalam bilangan pecahan biner, dan titik desimalnya salah untuk pembaca Indonesia. Persen yang dibulatkan adalah satu-satunya angka yang bisa ditulis komponen ini tanpa menebak.

Jadi kirim valueText (dan remainderText) berisi angka yang sudah diformat aplikasi, dan value sebagai angka untuk lebar bilahnya.

Batas yang perlu diketahui

  • Tiga sampai empat bagian. Rotasi warnanya hanya punya empat warna yang aman, dan potongan kelima mengulang warna pertama. Kalau bagiannya lebih banyak, kumpulkan sisanya menjadi satu "Lain-lain" — itu juga membuat bilahnya lebih mudah dibaca.
  • Potongan sangat kecil tidak terbaca. 0,6 dari 15 GB adalah 4% — beberapa piksel. Angkanya tetap ada di daftar bawah, dan di situlah ia dibaca; bilahnya menunjukkan bentuk, bukan menggantikan angka.

API

PropTipeDefaultKeterangan
segmentsW4cProgressGroupSegment[][]Bagian-bagiannya. Tiap bagian menerima value, label, color, dan valueText sendiri.
maxnumber—Keseluruhan yang dibagi. Tanpa ini, keseluruhannya adalah jumlah bagiannya — bilahnya selalu penuh dan yang terbaca hanya perbandingannya.
size'sm' | 'md' | 'lg''md'Tinggi bilah: 4, 6, atau 10 piksel. Sama seperti Progress.
labelstring'Komposisi'Nama keseluruhannya, ditulis di atas bilah dan menjadi nama daftar bagiannya. Ganti dengan apa yang sebenarnya dibagi: "Penyimpanan", "Kuota bulan ini".
value-textstring—Teks di kanan atas bilah, misalnya "11,3 dari 15 GB". Format angkanya di aplikasi.
legendbooleantrueMenggambar daftar bagiannya di bawah bilah. Dimatikan pun daftarnya tetap ada untuk pembaca layar.
remainder-labelstring'Sisa'Nama bagian yang belum terpakai, muncul bila max lebih besar dari jumlah bagiannya.
remainder-textstring—Teks untuk bagian yang belum terpakai, misalnya "3,7 GB". Tanpa ini yang ditulis adalah porsinya dalam persen.

Angka diformat di aplikasi, bukan di komponen: kirim value sebagai angka untuk lebar bilahnya, dan valueText sebagai teks yang dibaca orang.