Badge

Bir sayı ya da bir durum noktası. Çoğunlukla PantrixBadgedBox ile başka bir öğenin üstüne konur.

import com.pantrixui.components.elements.badge.PantrixBadge

• 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

Nokta ve sayı

count verilmeyen rozet bir noktadır; verilen, sayısıyla birlikte genişleyen bir hap. Tek haneli sayı tam bir dairedir, hap hiçbir zaman boyundan dar olmaz.

Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixBadge()
    PantrixBadge(count = 3)
    PantrixBadge(count = 12)
    PantrixBadge(count = 128)
}

Taşan sayı

maxCount'u aşan sayı yazılmaz, yerine sınır ve bir artı yazılır: varsayılan sınır 99'dur. Hap orada büyümeyi bırakır ve üstünde durduğu ikonu örtmez. Son rozetin sınırı 9'dur.

Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixBadge(count = 99)
    PantrixBadge(count = 100)
    PantrixBadge(count = 2500)
    PantrixBadge(count = 12, maxCount = 9)
}

Tonlar

tone rozeti temanın bir rolünün rengiyle doldurur ve sayıyı o rengin üstünde okunan renkle yazar. Varsayılan ton Danger'dır: bir rozet çoğunlukla bakılması gereken bir şeyi söyler. Üst satırda her tonda bir sayı, altta her tonda bir nokta var.

FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    itemVerticalAlignment = Alignment.CenterVertically
) {
    BadgeTone.entries.forEachIndexed { index, tone ->
        PantrixBadge(count = TONE_COUNTS[index], tone = tone, tagKey = "tone_${tone.name}")
    }
}
Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)) {
    BadgeTone.entries.forEach { tone -> PantrixBadge(tone = tone) }
}

private val TONE_COUNTS = listOf(1, 12, 5, 8, 120, 0)

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

Kendi rengi ve kendi açıklaması

colors rozete bir tonun değil, verilen rengin dolgusunu verir: burada temanın hiçbir rolünde olmayan, uygulamanın kendi moru. Yalnızca verilen alanlar değişir; verilmeyeni yine ton belirler.

Bu rozetler tek başına durur, bir ikonun üstünde değil. Bu yüzden ne söylediklerini kendileri söyler: contentDescription verildi ve ekran okuyucu "4 yeni teklif" diye okur.

val own = ownColors()
Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixBadge(count = 3, contentDescription = "3 yeni bildirim", tagKey = "described")
    PantrixBadge(
        count = 4,
        colors = BadgeColors(container = own.color, content = own.onColor),
        contentDescription = "4 yeni teklif",
        tagKey = "own_colors"
    )
}

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

modifier

Bir sayı ya da bir durum noktası. Çoğunlukla PantrixBadgedBox ile başka bir öğenin üstüne konur.

BadgeStyle

PantrixBadge'in geometrisi: sayacak bir şey yoksa bir nokta, varsa sayısıyla birlikte büyüyen bir hap.

BadgeColors

Tonunun renklerini almayan bir rozet için PantrixBadge'in boyandığı renkler: verilen renk kullanılır, verilmeyen tonun renginde kalır.

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.