Dashboard

Contoh

Yang digambar di bawah adalah isi halaman dashboard. Sidebar, header, dan navigasi bawahnya milik AppShell, yang membungkus <NuxtPage /> di layout — jadi halaman tidak menggambar kerangka lagi.

Susunannya

• Satu baris judul. Judul halaman, pemilih periode (SegmentedControl), dan satu aksi utama. Bukan tiga tombol yang sama menonjol.
• Empat angka, tidak lebih.StatCard berderet empat di layar lebar, dua di tablet, satu di HP. Angka kelima selalu menjadi angka yang tidak pernah dibaca.
• Kiri untuk yang perlu ditindak, kanan untuk yang perlu diketahui. Tabel pekerjaan terbaru mengambil dua kolom; riwayat aktivitas satu kolom. Di HP keduanya bertumpuk dengan tabel di atas.
• Angka yang bisa diklik menjadi tautan. Kartu keluhan memakai to, jadi seluruh kartu adalah sasaran klik menuju daftarnya — bukan hanya angkanya.
• Jumlah kolom mengikuti lebar wadah, bukan lebar layar. Contoh ini memakai @container dengan varian @xl: dan @5xl:, karena halaman dashboard duduk di sebelah sidebar yang bisa diciutkan — lebar layar bukan ukuran yang benar. Di wadah yang sempit, baris judulnya ikut menumpuk supaya pemilih periode tidak memotong labelnya sendiri.

Yang membuat dashboard jadi tidak dipakai

• Menaruh setiap angka yang bisa dihitung. Dashboard bukan laporan; laporan punya halamannya sendiri.
• Memakai trend="up" dengan warna bawaan untuk angka yang naiknya buruk. Setel trendColor — keluhan naik bukan kabar baik.
• Grafik tanpa angka. Kalau satu nilai yang penting, tulis nilainya; grafik menjelaskan bentuk, bukan menggantikan angka.
• Membiarkan kartu berubah tinggi saat datanya datang. Pakai loading milik StatCard, bukan menyembunyikan kartunya.