Badge

Gunakan badge untuk menampilkan elemen visual kecil yang menunjukkan status atau nilai numerik pada composable lain. Berikut beberapa skenario umum saat Anda mungkin menggunakan badge:

• Notifikasi: Menampilkan jumlah notifikasi yang belum dibaca pada ikon aplikasi atau lonceng notifikasi.
• Pesan: Menunjukkan pesan baru atau belum dibaca dalam aplikasi chat.
• Pembaruan status: Menampilkan status tugas, seperti "selesai", "sedang berlangsung", atau "gagal".
• Jumlah keranjang: Menampilkan jumlah item di keranjang belanja pengguna.
• Konten baru: Menyoroti konten atau fitur baru yang tersedia untuk pengguna.

Permukaan API

Gunakan composable BadgedBox untuk menerapkan badge di aplikasi Anda. Pada akhirnya, ini adalah penampung. Anda mengontrol tampilannya dengan dua parameter utama ini:

• content: Konten composable yang berisi BadgedBox. Biasanya Icon.
• badge: Composable yang muncul sebagai badge di atas konten. Biasanya composable Badge khusus.

Contoh dasar

Cuplikan kode ini menunjukkan implementasi dasar BadgedBox:

@Composable
fun BadgeExample() {
    BadgedBox(
        badge = {
            Badge()
        }
    ) {
        Icon(
            imageVector = Icons.Filled.Mail,
            contentDescription = "Email"
        )
    }
}
Badges.kt

Contoh ini menampilkan badge yang tumpang-tindih dengan composable Icon yang disediakan. Perhatikan hal berikut dalam kode:

• BadgedBox berfungsi sebagai penampung keseluruhan.
• Argumen untuk parameter badge dari BadgedBox adalah Badge. Karena Badge tidak memiliki argumennya sendiri, aplikasi akan menampilkan badge default, yang merupakan lingkaran merah kecil.
• Icon berfungsi sebagai argumen untuk parameter content dari BadgedBox. Ini adalah ikon yang menampilkan badge. Dalam hal ini, ikon email.

Berikut tampilannya:

Contoh mendetail

Cuplikan berikut menunjukkan cara menampilkan nilai dalam badge yang merespons tindakan pengguna.

@Composable
fun BadgeInteractiveExample() {
    var itemCount by remember { mutableIntStateOf(0) }

    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        BadgedBox(
            badge = {
                if (itemCount > 0) {
                    Badge(
                        containerColor = Color.Red,
                        contentColor = Color.White
                    ) {
                        Text("$itemCount")
                    }
                }
            }
        ) {
            Icon(
                imageVector = Icons.Filled.ShoppingCart,
                contentDescription = "Shopping cart",
            )
        }
        Button(onClick = { itemCount++ }) {
            Text("Add item")
        }
    }
}
Badges.kt

Contoh ini mengimplementasikan ikon keranjang belanja dengan badge yang menampilkan jumlah item di keranjang pengguna.

• The BadgedBox hanya ditampilkan jika jumlah item lebih dari 0.
• Argumen untuk containerColor dan contentColor mengontrol tampilan badge.
• Composable Text untuk slot konten Badge muncul dalam badge. Dalam hal ini, jumlah item di keranjang ditampilkan.

Implementasi ini akan muncul sebagai berikut:

Referensi lainnya

• Material 3 - Badge
• BadgedBox
• Badge