Penanda

Penanda

Sebuah kapsul untuk segala sesuatu yang diungkapkan tentang suatu hal dalam satu kata: sebuah status, sebuah nama, sebuah versi, sebuah kategori. Mereka adalah dua objek hingga suatu hari kode dan status berdiri berdampingan dalam satu header, terpisah satu kepala, dan tidak ada yang bisa mengatakan apa arti perbedaan itu — jadi bentuknya satu dan nada adalah keseluruhan yang membedakan mereka. Apa yang dibawanya adalah bebas: sebuah kata, sebuah angka, sebuah glif, atau dua dari tiga tersebut. Lingkaran berdiri di tempat yang tidak ada ruang untuk kapsul, dan penghitung, yang menggantung dari baris dan berukuran sesuai teks yang digantungnya, adalah satu hal di sini yang bukan penanda.

Di tengah kalimat

Sebuah kata yang dipisahkan saat dibaca: sebuah versi, sebuah fase, sebuah kategori. Nada netral, karena penanda yang datang berwarna telah membuat klaim tentang apa yang ditandainya — dan dalam sebuah kalimat tidak ada yang dapat diklaim.

Versi 2.4 adalah Dirilis API ini adalah Dihapus

Kategori-kategori

Nada yang membedakan tanpa memberi peringkat. Mereka tidak membawa makna — tidak ada yang mengatakan bahwa yang ketiga lebih baik dari yang kelima — yang justru membuatnya dapat digunakan untuk taksonomi, di mana makna akan menjadi kebohongan. Dipakai persis seperti sebuah status: kapsul yang sama, ritme yang sama.
Netral ruby grapefruit bittersweet sunflower straw grass mint teal aqua blue-jeans plum lavender pink-rose

Sebuah status dalam kata-kata

Diumumkan dalam sebuah kalimat atau di samping judul, di mana itu adalah pesan alih-alih tanda dalam kolom.
Operasi berhasil Terjadi kesalahan Lanjutkan dengan hati-hati Untuk informasi Anda

Sebuah status dibaca secara dozen

Dalam sebuah kolom, sebuah centang di samping hitungan netral dibaca sebagai dua objek dan tabelnya dibaca sebagai kebisingan. Di sini warna mengelilingi angka dan kolom dipindai dalam satu langkah — kompak, karena sebuah sel tidak memiliki ruang untuk spare.
15 success 15 error 15 warning 15 info 15 running 15 pending 15 paused 15 play 15 skipped 15 disabled

Apa yang dibawanya

Sebuah kata untuk apa status itu, sebuah angka untuk berapa banyak dari itu, keduanya, atau tidak ada. Angka selalu digambar satu langkah mundur dari yang lainnya: itu memenuhi syarat status, bukan status itu sendiri.
Lulus 15 Lulus15

Tiga bentuk berdampingan

Informasi yang sama di tempat yang sebenarnya dibaca. Lingkaran adalah bentuk untuk sel yang terlalu sempit untuk kapsul, dan satu-satunya yang dapat menunjukkan status sebagai jumlah — dan itu digambar dengan warna yang sama yang diisi kapsul.
Bentuksuccesswarningerrorskipped
Kapsul 15 15 15 15
Lingkaran

Lingkaran

Sebuah status yang diceritakan oleh sebuah lingkaran alih-alih oleh sebuah kata, untuk tempat di mana status dibaca secara dozen — sebuah daftar lari, baris pekerjaan. Cincin membawa warna, glif di dalamnya menunjukkan status mana itu, dan kedua sisi tumpukan menggambar markup yang sama.
success error warning info running pending paused play skipped disabled

LED

Sebuah titik yang menyala dan kata-katanya: sebuah keadaan yang dibaca sekilas dalam satu baris, sebanyak dua lusin dalam ringkasan atau daftar layanan. Lebih kecil dari penanda, lebih tenang dari lingkaran. off adalah titik yang tidak menyala — sebuah hitungan nol —, running bernafas.
success info running warning error dev off cat-mint
34 ok 2 sedang berjalan 0 kesalahan 0 antrian

Hitungan

Berapa banyak yang menunggu untuk dilihat, sebagai pil: di sudut ikon atau tombol (dalam induk dengan hitungan), merah kecuali disebutkan, 99+ setelah 99; sebuah kata (« Baru ») atau titik sebagai pengganti angka; tidak ada pada nol kecuali diminta. countApply() menjaga satu tetap saat halaman berubah.
3 99+ 12 2 Baru
Kotak Masuk 4 error 7 warning 14 success 21 info 28 accent 35 Ditampilkan nol 0

Sebuah status yang merupakan jumlah

Sebuah lari adalah satu-satunya status dengan jumlah di dalamnya, jadi cincin digambar sejauh mana lari telah mencapai. Twig mencetak nilai yang diberikan; memindahkannya setelah itu adalah urusan browser.
0% 25% 50% 75% 100%

Ukuran lingkaran

Sebuah penghitung di samping penanda

Satu perbedaan yang tersisa, dan itu bukan tentang makna. Di sebelah kiri sebuah penghitung: dua belas dari sesuatu, menggantung dari baris yang mengarah ke sana dan berukuran dalam teks baris itu sendiri. Di sebelah kanan sebuah penanda: dua belas dari sesuatu yang berjalan dengan baik, berdiri sendiri dan berukuran dalam token. Sebuah hitungan di samping item menu adalah sebuah penghitung; angka yang sama dalam kolom saluran adalah sebuah penanda.
12 12

Vue

Komponen yang sama, digerakkan: mengganti jenis atau nilai menggerakkan busur alih-alih menggambar ulang. Ini adalah apa yang ditempatkan aplikasi saat status akan berubah di depan mata pembaca.

Penggunaan

{{ marker('success', 'Operation successful') }}
{{ marker('success', null, { count: 15, compact: true }) }}
{{ status_icon('running', { progress: 0.4 }) }}