Badged Box

badge'i content'in üstüne, ortası bir köşesine gelecek şekilde koyar ve rozet için yer ayırmaz.

import com.pantrixui.components.elements.badge.PantrixBadgedBox

Sayı ya da nokta. count verilirse sayıyı yazan bir haptır, verilmezse bir nokta. Tek haneli sayı bir dairenin içindedir.
Taşan sayı. maxCount'u aşan sayı "99+" diye yazılır ve hap orada büyümeyi bırakır.
Sıfır da bir sayıdır. Sıfır "0" olarak çizilir: sayacak bir şey kalmadığında rozeti kaldırmak çağıranın işidir. Sıfırın altındaki bir sayı da "0" olur.
Altı ton. tone rozeti temanın bir rolüyle doldurur; colors rol dışı bir renk verir.
Bir şeyin köşesinde. PantrixBadgedBox rozeti içeriğinin köşesine oturtur; yuvarlak bir içerikte kutunun değil çemberin üstüne (BadgeOverlap.Circular).
Yazı ölçeği. Sayı temanın caption stiliyle yazılır ve sistemin yazı boyutuyla birlikte büyür, hap da onunla.

Örnekler

Bir ikonun köşesinde

PantrixBadgedBox rozeti içeriğinin köşesine oturtur: varsayılan köşe, satırın bittiği yandaki üst köşedir.

Rozet okuyucudan gizlidir; sayıyı ikonun kendi açıklaması söyler ("Gelen kutusu, 5 okunmamış"). Sayı sıfıra inince rozet hiç konmaz: bunu rozet değil, çağıran yapar. Düğmelerle sayıyı artır: 99'u geçince "99+" olur ve hap ikonun dışına doğru uzar.

var unread by rememberSaveable { mutableIntStateOf(START_UNREAD) }
Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixBadgedBox(badge = { if (unread > 0) PantrixBadge(count = unread, tagKey = "unread") }) {
        PantrixIcon(
            imageVector = PantrixIcons.Inbox,
            contentDescription = if (unread > 0) "Gelen kutusu, $unread okunmamış" else "Gelen kutusu",
            tagKey = "inbox"
        )
    }
    PantrixButton(
        text = "+1",
        onClick = { unread += 1 },
        variant = ButtonVariant.Outline,
        size = ButtonSize.Small,
        tagKey = "one_more"
    )
    PantrixButton(
        text = "+50",
        onClick = { unread += MANY },
        variant = ButtonVariant.Outline,
        size = ButtonSize.Small,
        tagKey = "many_more"
    )
    PantrixButton(
        text = "Okundu",
        onClick = { unread = 0 },
        variant = ButtonVariant.Text,
        size = ButtonSize.Small,
        tagKey = "read"
    )
}

private const val START_UNREAD = 5

private const val MANY = 50

Avatarların üstünde

Yuvarlak bir içerikte rozet kutunun köşesinde değil çemberin üstünde durur: overlap = BadgeOverlap.Circular. alignment hangi köşe olduğunu söyler; durum noktası altta, satırın bittiği yandadır.

Durum noktaları BadgeStyle(dotSize = 12.dp) ile büyütüldü: bir avatarın üstünde seçilecek kadar. Noktanın ne anlama geldiğini avatarın açıklaması söyler ("İbrahim Öztürk, çevrimiçi"); nokta okuyucudan gizlidir.

val statusDot = BadgeStyle(dotSize = 12.dp)
Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.xl)) {
    PantrixBadgedBox(
        badge = { PantrixBadge(count = 2, tagKey = "messages") },
        overlap = BadgeOverlap.Circular
    ) {
        PantrixAvatar(contentDescription = "Ayşe Yılmaz, 2 yeni mesaj", initials = "AY", tagKey = "badged_ayse")
    }
    PantrixBadgedBox(
        badge = { PantrixBadge(tone = BadgeTone.Success, style = statusDot, tagKey = "online") },
        alignment = Alignment.BottomEnd,
        overlap = BadgeOverlap.Circular
    ) {
        PantrixAvatar(
            contentDescription = "İbrahim Öztürk, çevrimiçi",
            initials = "İÖ",
            tone = AvatarTone.Info,
            tagKey = "badged_ibrahim"
        )
    }
    PantrixBadgedBox(
        badge = { PantrixBadge(tone = BadgeTone.Neutral, style = statusDot, tagKey = "offline") },
        alignment = Alignment.BottomEnd,
        overlap = BadgeOverlap.Circular
    ) {
        PantrixAvatar(
            contentDescription = "ilker kaya, çevrimdışı",
            initials = "ik",
            tone = AvatarTone.Success,
            tagKey = "badged_ilker"
        )
    }
    PantrixBadgedBox(
        badge = { PantrixBadge(count = MANY * 3, tagKey = "team") },
        overlap = BadgeOverlap.Circular
    ) {
        PantrixAvatar(
            contentDescription = "Ekip, 99'dan fazla yeni mesaj",
            icon = PantrixIcons.Person,
            tone = AvatarTone.Primary,
            tagKey = "badged_team"
        )
    }
}

private const val MANY = 50

Bir yazının yanında

Rozet bir yazının üstünde de durabilir. PantrixBadgedBox içeriğinin satır çizgisini korur: alignByBaseline ile "yeni" etiketi yanındaki başlıkla aynı satırda durur, nokta da etiketin köşesinde.

Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixText(
        text = "Kampanyalar",
        modifier = Modifier.alignByBaseline(),
        style = PantrixTheme.typography.callout
    )
    PantrixBadgedBox(
        badge = { PantrixBadge(tone = BadgeTone.Primary, tagKey = "new") },
        modifier = Modifier.alignByBaseline()
    ) {
        PantrixText(text = "yeni", style = PantrixTheme.typography.footnote)
    }
}

API

badge

badge'i content'in üstüne, ortası bir köşesine gelecek şekilde koyar ve rozet için yer ayırmaz.

Parametre	Tür	Varsayılan	Ne olduğu
`badge`	`@Composable () -> Unit`		İçeriğin üstüne konan şey: çoğunlukla bir `PantrixBadge`. Gösterilecek bir şey yoksa hiçbir şey.
`modifier`	`Modifier`	`Modifier`	Kutunun modifier'ı.
`alignment`	`Alignment`	`Alignment.TopEnd`	Rozetin ortasının `content` üstünde nerede olduğu.
`overlap`	`BadgeOverlap`	`BadgeOverlap.Rectangular`	Bu yerin `content`'in çevresindeki kutunun mu, içindeki çemberin mi üstünde olduğu.
`content`	`@Composable () -> Unit`		Rozetin ait olduğu şey.

Erişilebilirlik

Ekran okuyucu. contentDescription verilmeyen rozet okuyucudan gizlidir: tek başına okunan bir "3" bir şey anlatmaz, sayıyı üstünde durduğu öğenin açıklaması söyler.