Navigation Bar

Uygulamanın üst düzey hedefleri, ekranın alt kenarında: üç ile beş hedef, uygulamanın bulunduğu hedef işaretli olarak.

import com.pantrixui.components.navigation.navigationbar.PantrixNavigationBar

Durum ekranındır. Bar'a bulunulan hedefin anahtarı verilir (selected), bir hedefe basılınca anahtarı geri bildirilir (onSelect). Bulunulan hedefe yeniden basmak da bildirilir: uygulama o hedefi genellikle başına döndürür. selected null ise hiçbir hedef işaretlenmez.
Hap ya da yalnızca renk. Bulunulan hedef ikonunun arkasındaki bir hapla işaretlenir; NavigationBarStyle'ın indicator alanı NavigationIndicator.None ise yalnızca rengiyle.
Rozet. NavigationBadge hedefin ikonuna bir sayı ya da bir nokta koyar. Rozetin üstü ikonun üstüyle aynı hizadadır: bar'ın dışına taşmaz. Sayı bir rozetinki gibi sınırlanır: "99+".
Seçiliyken başka ikon. NavigationItem.selectedIcon uygulama o hedefteyken icon'un yerine çizilir.
Basılamayan hedef. enabled = false hedefi temanın devre dışı yazı rengiyle çizer; hedef basış almaz.
Her platformda aynı. 64dp yüksekliğinde, üstünde ince bir çizgi; 56×28dp'lik hap, 20dp'lik ikon ve footnote ile yazılan etiket. Ölçüleri style, etiketin yazısını labelStyle değiştirir.
Renkler. NavigationColors dolguyu, üstündeki yazıyı, hapı, hapın üstündeki ikonu ve hap yokken işaretleyen rengi ayrı ayrı alır. PantrixNavigationRail aynı renkleri ve aynı hedef listesini alır.
Sistem çubuğu. insets bar'ın alt kenarda ve yanlarda boş bıraktığı paydır: dolgu payın arkasına uzanır, hedefler dışında kalır.
Dik duran bar. orientation = NavigationBarOrientation.Vertical hedefleri alt alta, bar'ın dolgusundan bir kapsülde dizer: iPhone Duo'nun dış ekranında sistemin dikey bar'ındaki sekmeler gibi. PantrixScaffold onu orada sütunun dibine kendisi koyar. Dik bar'da hedefler yalnızca ikonlarıyladır; showLabels = true adlarını da yazar. Yatay bar'da da showLabels = false ikonları yalnız bırakır.
Etiketsiz hedef. Adı ekran okuyucuya söylenir ve işaretçi üstünde beklerken, klavyenin odağındayken ya da uzun basınca bir tooltip'te görünür: yatay bar'da hedefin üstünde, dik bar'da başında.
Otomasyon. tagKey verilen bar'ın hedefleri onun içinde adlandırılır: NavigationBar_main.Item_inbox.

Örnekler

Üç hedef

En yalın hâli: hedeflerin listesi (items), bulunulan hedefin anahtarı (selected) ve basılan hedefin anahtarını alan onSelect. Bar kendiliğinden bir şey seçmez; nerede olunduğunu ekran tutar. Hedefler bar'ın genişliğini paylaşır.

Bir hedefe bas, sonra aynı hedefe yeniden bas: o da bildirilir. Üstteki satır bunu sayar; gerçek bir uygulama o hedefi başına döndürür.

val destinations = listOf(
    NavigationItem(key = "files", label = "Dosyalar", icon = PantrixIcons.Folder),
    NavigationItem(key = "search", label = "Ara", icon = PantrixIcons.Search),
    NavigationItem(key = "profile", label = "Profil", icon = PantrixIcons.Person)
)
var where by rememberSaveable { mutableStateOf("files") }
var pressedAgain by rememberSaveable { mutableIntStateOf(0) }
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    Column {
        PantrixText(
            text = "Açık hedef: ${destinations.first { it.key == where }.label}. " +
                "Aynı hedefe yeniden basıldı: $pressedAgain kez.",
            modifier = Modifier.padding(PantrixTheme.spacing.lg),
            color = PantrixTheme.colors.textSecondary
        )
        PantrixNavigationBar(
            items = destinations,
            selected = where,
            onSelect = { key -> if (key == where) pressedAgain++ else where = key },
            tagKey = "plain"
        )
    }
}

Üç hedef, birinde sayı

Posta uygulamasının üç hedefi. "Gelen kutusu"ndaki rozet okunmamışları sayar: NavigationBadge(contentDescription, count). Hedef açılınca sayı sıfırlanır ve rozet kalkar: sayacak bir şey kalmadığında badge null verilir. "Yıldızlı"nın selectedIcon'u vardır: seçiliyken yıldızın yerine o çizilir. Bir uygulama oraya ikonun dolu hâlini verir; PantrixIcons'ta dolu hâller olmadığı için burada başka bir ikon duruyor.

Rozetin contentDescription'ı zorunludur ve hedefin adından sonra okunur: "Gelen kutusu, 3 okunmamış". Tek başına bir sayı neyi saydığını söylemez; null vermek, adın bunu zaten söylediği yerde verilen bir karardır.

var where by rememberSaveable { mutableStateOf("starred") }
var unread by rememberSaveable { mutableIntStateOf(3) }
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    Column {
        PantrixText(
            text = when (where) {
                "starred" -> "Yıldızlı iletiler"
                "inbox" -> "Gelen kutusu: okunmamış kalmadı"
                else -> "Profil ve ayarlar"
            },
            modifier = Modifier.padding(PantrixTheme.spacing.lg),
            color = PantrixTheme.colors.textSecondary
        )
        PantrixNavigationBar(
            items = listOf(
                NavigationItem(
                    key = "starred",
                    label = "Yıldızlı",
                    icon = PantrixIcons.Star,
                    selectedIcon = PantrixIcons.Success
                ),
                NavigationItem(
                    key = "inbox",
                    label = "Gelen kutusu",
                    icon = PantrixIcons.Inbox,
                    badge = if (unread > 0) {
                        NavigationBadge(contentDescription = "$unread okunmamış", count = unread)
                    } else {
                        null
                    }
                ),
                NavigationItem(key = "profile", label = "Profil", icon = PantrixIcons.Person)
            ),
            selected = where,
            onSelect = { key ->
                where = key
                if (key == "inbox") unread = 0
            },
            tagKey = "mail"
        )
    }
}

Hap ile: beş hedef, biri basılamaz

Beş hedef: bir bar'ın taşıdığı en çok hedef. Bulunulan hedef ikonunun arkasındaki hapla işaretlenir (NavigationIndicator.Pill): her platformda varsayılan budur, burada açıkça yazıldı. Basış ve odak halkası da hapın yerinde çizilir, hedefin tamamında değil.

"Klasörler"deki rozet bir noktadır (count verilmedi); "Profil"deki 128, yazılan en büyük sayıyı aşar ve "99+" olur. "Takvim" basılamaz: enabled = false.

var where by rememberSaveable { mutableStateOf("search") }
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixNavigationBar(
        items = FIVE,
        selected = where,
        onSelect = { where = it },
        style = NavigationBarStyle(indicator = NavigationIndicator.Pill),
        tagKey = "pill"
    )
}

private val FIVE = listOf(
    NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
    NavigationItem(
        key = "folders",
        label = "Klasörler",
        icon = PantrixIcons.Folder,
        badge = NavigationBadge(contentDescription = "Yeni dosyalar var")
    ),
    NavigationItem(key = "search", label = "Ara", icon = PantrixIcons.Search),
    NavigationItem(key = "calendar", label = "Takvim", icon = PantrixIcons.Calendar, enabled = false),
    NavigationItem(
        key = "profile",
        label = "Profil",
        icon = PantrixIcons.Person,
        badge = NavigationBadge(contentDescription = "128 bildirim", count = 128)
    )
)

Yalnızca renk ile

Aynı bar, NavigationIndicator.None ile: hap çizilmez, bulunulan hedefin ikonu ve etiketi temanın primary rengindedir, ötekiler ikincil yazı renginde. iOS'un sekme çubuğu hedefini böyle işaretler; hiçbir platformun hazır stili bunu seçmez, isteyen stil verir.

var where by rememberSaveable { mutableStateOf("search") }
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixNavigationBar(
        items = FIVE,
        selected = where,
        onSelect = { where = it },
        style = NavigationBarStyle(indicator = NavigationIndicator.None),
        tagKey = "tint"
    )
}

private val FIVE = listOf(
    NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
    NavigationItem(
        key = "folders",
        label = "Klasörler",
        icon = PantrixIcons.Folder,
        badge = NavigationBadge(contentDescription = "Yeni dosyalar var")
    ),
    NavigationItem(key = "search", label = "Ara", icon = PantrixIcons.Search),
    NavigationItem(key = "calendar", label = "Takvim", icon = PantrixIcons.Calendar, enabled = false),
    NavigationItem(
        key = "profile",
        label = "Profil",
        icon = PantrixIcons.Person,
        badge = NavigationBadge(contentDescription = "128 bildirim", count = 128)
    )
)

Stil: başka ölçüler ve etiket yazısı

style bar'ın ölçülerini değiştirir, labelStyle etiketlerin yazı stilini. Hazır bar her platformda 64dp'dir; Android'in kendi bar'ı 80dp ve hapı daha büyüktür, iOS'un sekme çubuğu 49pt'dir ve hapı yoktur. İkisi de hazır stil değildir, ama bir stil ikisini de isteyebilir.

Üstteki bar 80dp, hapı 64×32dp, ikonu 24dp. Alttaki 49dp, hapsız, etiketleri caption ile yazılı ve ikonla etiketin arası daha dar (labelGap = 2.dp). Yalnızca verilen alanlar değişir. Bir hedef hiçbir zaman platformun dokunma hedefinden alçak olmaz.

var where by rememberSaveable { mutableStateOf("search") }
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixNavigationBar(
        items = FIVE,
        selected = where,
        onSelect = { where = it },
        style = NavigationBarStyle(
            height = 80.dp,
            indicatorWidth = 64.dp,
            indicatorHeight = 32.dp,
            iconSize = 24.dp
        ),
        tagKey = "tall"
    )
}
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixNavigationBar(
        items = FIVE,
        selected = where,
        onSelect = { where = it },
        labelStyle = PantrixTheme.typography.caption,
        style = NavigationBarStyle(height = 49.dp, labelGap = 2.dp, indicator = NavigationIndicator.None),
        tagKey = "low"
    )
}

private val FIVE = listOf(
    NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
    NavigationItem(
        key = "folders",
        label = "Klasörler",
        icon = PantrixIcons.Folder,
        badge = NavigationBadge(contentDescription = "Yeni dosyalar var")
    ),
    NavigationItem(key = "search", label = "Ara", icon = PantrixIcons.Search),
    NavigationItem(key = "calendar", label = "Takvim", icon = PantrixIcons.Calendar, enabled = false),
    NavigationItem(
        key = "profile",
        label = "Profil",
        icon = PantrixIcons.Person,
        badge = NavigationBadge(contentDescription = "128 bildirim", count = 128)
    )
)

Bulunulan hedef bir rolün renginde

Yalnızca bulunulan hedefin rengi değişti, gerisi temanın. selectedContainer hapı boyar; temanın bir rolünün rengi verildiğinde üstündeki ikonun rengi de o rolden gelir, selectedContent ayrıca verilmedikçe. selectedTint hap çizilmeyen stilde hedefi işaretleyen renktir.

İkisinin de kendi yeri vardır: biri verilince ötekinin çizildiği yerde bir şey değişmez. Aynı colors haplı ve hapsız iki bar'a verildi.

val success = PantrixTheme.colors.success
val colors = NavigationColors(selectedContainer = success.container, selectedTint = success.color)
var where by rememberSaveable { mutableStateOf("search") }
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixNavigationBar(
        items = FIVE,
        selected = where,
        onSelect = { where = it },
        colors = colors,
        tagKey = "role"
    )
}
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixNavigationBar(
        items = FIVE,
        selected = where,
        onSelect = { where = it },
        style = NavigationBarStyle(indicator = NavigationIndicator.None),
        colors = colors,
        tagKey = "role_tint"
    )
}

private val FIVE = listOf(
    NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
    NavigationItem(
        key = "folders",
        label = "Klasörler",
        icon = PantrixIcons.Folder,
        badge = NavigationBadge(contentDescription = "Yeni dosyalar var")
    ),
    NavigationItem(key = "search", label = "Ara", icon = PantrixIcons.Search),
    NavigationItem(key = "calendar", label = "Takvim", icon = PantrixIcons.Calendar, enabled = false),
    NavigationItem(
        key = "profile",
        label = "Profil",
        icon = PantrixIcons.Person,
        badge = NavigationBadge(contentDescription = "128 bildirim", count = 128)
    )
)

Kendi renkleriyle

Temada olmayan bir renkte bar: uygulamanın kendi moru. Tema bu dolgunun üstünde neyin okunduğunu bilemez; dolguyla (container) birlikte üstündeki renk de (content) verilir. Öteki hedefler o renkle yazılır, basılamayan hedef onun bir payıyla, üstteki çizgi de ondan çıkar.

Hap ve üstündeki ikon ayrıca verildi (selectedContainer, selectedContent). Hap çizmeyen bir stilde bunlar kullanılmaz: bulunulan hedef bar'ın yazı rengindedir, ötekiler onun bir payında.

val own = ownColors()
var where by rememberSaveable { mutableStateOf("folders") }
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    PantrixNavigationBar(
        items = FIVE,
        selected = where,
        onSelect = { where = it },
        colors = NavigationColors(
            container = own.color,
            content = own.onColor,
            selectedContainer = own.container,
            selectedContent = own.onContainer
        ),
        tagKey = "own"
    )
}

private val FIVE = listOf(
    NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
    NavigationItem(
        key = "folders",
        label = "Klasörler",
        icon = PantrixIcons.Folder,
        badge = NavigationBadge(contentDescription = "Yeni dosyalar var")
    ),
    NavigationItem(key = "search", label = "Ara", icon = PantrixIcons.Search),
    NavigationItem(key = "calendar", label = "Takvim", icon = PantrixIcons.Calendar, enabled = false),
    NavigationItem(
        key = "profile",
        label = "Profil",
        icon = PantrixIcons.Person,
        badge = NavigationBadge(contentDescription = "128 bildirim", count = 128)
    )
)

Sistem çubuğunun arkasında

insets bar'ın alt kenarda ve yanlarda boş bıraktığı paydır: dolgu payın arkasına uzanır, hedefler payın dışında kalır. Gerçek bir ekranda payı PantrixScaffold verir (bottomBar = { insets -> … }) ve sistemin gezinme çubuğu bar'ın dolgusunun üstünde durur. Uygulamanın kendi alt bar'ı payını böyle alır.

Burada scaffold yok: payın yerini 24dp tutuyor, içindeki çizgi de sistemin hareket çubuğunu. Hedefler çizginin üstünde kalır, bar'ın dolgusu altına kadar iner.

var where by rememberSaveable { mutableStateOf("search") }
PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
    Box(contentAlignment = Alignment.BottomCenter) {
        PantrixNavigationBar(
            items = FIVE,
            selected = where,
            onSelect = { where = it },
            insets = PaddingValues(bottom = 24.dp),
            tagKey = "insets"
        )
        // Sistemin hareket çubuğunun yerinde bir çizgi: bar'ın dolgusunun üstünde, hedeflerin altında.
        Box(
            modifier = Modifier
                .padding(bottom = 10.dp)
                .size(width = 120.dp, height = 4.dp)
                .background(PantrixTheme.colors.textSecondary, PantrixTheme.shapes.full)
        )
    }
}

private val FIVE = listOf(
    NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
    NavigationItem(
        key = "folders",
        label = "Klasörler",
        icon = PantrixIcons.Folder,
        badge = NavigationBadge(contentDescription = "Yeni dosyalar var")
    ),
    NavigationItem(key = "search", label = "Ara", icon = PantrixIcons.Search),
    NavigationItem(key = "calendar", label = "Takvim", icon = PantrixIcons.Calendar, enabled = false),
    NavigationItem(
        key = "profile",
        label = "Profil",
        icon = PantrixIcons.Person,
        badge = NavigationBadge(contentDescription = "128 bildirim", count = 128)
    )
)

Dik duran bar

Bar dik durur: hedefler alt alta, bar'ın dolgusundan bir kapsülde ve kapsülün çevresinde ince bir çizgiyle. iPhone Duo'nun dış ekranında sistem sağ kenar boyunca böyle bar'lar için bir sütun ayırır; PantrixScaffold gezinmeyi o sütunun dibine koyar ve ona ScaffoldNavigationPlacement.VerticalBar der ("Scaffold" sayfasında bir örneği var).

Soldaki yalnızca ikonlarıyladır, UIKit'in o sütundaki sekmeleri gibi: bir hedefin üstünde bekle ya da uzun bas, adı başındaki tooltip'te görünür; ekran okuyucu da adını söyler. Sağdaki showLabels = true ile adlarını da yazar ve en uzun adı kadar geniştir. İkisi aynı durumu paylaşır: birinde bir hedefe basınca öteki de o hedefi işaretler.

var where by rememberSaveable { mutableStateOf("search") }
Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.xxl)) {
    PantrixNavigationBar(
        items = FIVE,
        selected = where,
        onSelect = { where = it },
        orientation = NavigationBarOrientation.Vertical,
        tagKey = "upright_icons"
    )
    PantrixNavigationBar(
        items = FIVE,
        selected = where,
        onSelect = { where = it },
        orientation = NavigationBarOrientation.Vertical,
        showLabels = true,
        tagKey = "upright_labels"
    )
}

private val FIVE = listOf(
    NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
    NavigationItem(
        key = "folders",
        label = "Klasörler",
        icon = PantrixIcons.Folder,
        badge = NavigationBadge(contentDescription = "Yeni dosyalar var")
    ),
    NavigationItem(key = "search", label = "Ara", icon = PantrixIcons.Search),
    NavigationItem(key = "calendar", label = "Takvim", icon = PantrixIcons.Calendar, enabled = false),
    NavigationItem(
        key = "profile",
        label = "Profil",
        icon = PantrixIcons.Person,
        badge = NavigationBadge(contentDescription = "128 bildirim", count = 128)
    )
)

API

items

Uygulamanın üst düzey hedefleri, ekranın alt kenarında: üç ile beş hedef, uygulamanın bulunduğu hedef işaretli olarak.

Parametre	Tür	Varsayılan	Ne olduğu
`items`	`List<NavigationItem>`		Hedefler, sırasıyla: üç ile beş hedef.
`selected`	`String?`		Uygulamanın bulunduğu hedefin anahtarı; uygulama hiçbirinde değilse null.
`onSelect`	`(key: String) -> Unit`		Basılan hedefin anahtarıyla çağrılır, bulunulan hedefe basılınca da.
`modifier`	`Modifier`	`Modifier`	Bar'a uygulanır.
`orientation`	`NavigationBarOrientation`	`NavigationBarOrientation.Horizontal`	bar'ın hangi yöne uzandığı: alt kenar boyunca, ya da sistemin dikey bar'ında dik.
`showLabels`	`Boolean`	`orientation == NavigationBarOrientation.Horizontal`	her hedefin ikonunun altında etiketini gösterip göstermediği: alt kenarda aksi söylenmedikçe gösterir, dik duran bar'da istenmedikçe göstermez.
`labelStyle`	`TextStyle`	`PantrixTheme.typography.footnote`	Etiketlerin yazı stili: verilmezse temanın `footnote` stili. Renklerini bar verir.
`style`	`NavigationBarStyle?`	`null`	Bu çağrının kendi stili: çevresindeki her stili ezer, yoğunluk ona da uygulanır. Yalnızca verdiği alanlar değişir ve her platformda değişir.
`colors`	`NavigationColors?`	`null`	Bu çağrının kendi renkleri. Yalnızca verdikleri değişir, gerisi temanınki kalır.
`insets`	`PaddingValues`	`PaddingValues()`	bar'ın alt kenarda ve yanlarında boş tuttuğu yer, dolgusu arkasında: bir scaffold'un alt bar'ına verdiği. Dik duran bir bar onu kapsülünün çevresinde boş tutar, arkasında bir şey olmadan.
`tagKey`	`String?`	`null`	Otomasyon için, dilden bağımsız bir anahtar: bar'ın test etiketi `NavigationBar_<tagKey>` olur, hedefleri de onun içinde adlandırılır: `NavigationBar_<tagKey>.Item_<destination's key>`.

NavigationBarStyle

PantrixNavigationBar'ın geometrisi ve uygulamanın bulunduğu hedefi nasıl işaretlediği.

Parametre	Tür	Varsayılan	Ne olduğu
`height`	`Dp`	`Dp.Unspecified`	Bar'ın, boş bıraktığı payların üstündeki yüksekliği. Bir hedef hiçbir zaman platformun dokunma hedefinden alçak olmaz ve büyüyen yazıyla birlikte uzar.
`indicatorWidth`	`Dp`	`Dp.Unspecified`	Bulunulan hedefin ikonunun arkasındaki hapın ve bir basışın çizildiği yerin genişliği.
`indicatorHeight`	`Dp`	`Dp.Unspecified`	O hapın yüksekliği.
`iconSize`	`Dp`	`Dp.Unspecified`	Bir hedefin ikonu.
`labelGap`	`Dp`	`Dp.Unspecified`	Hapın yeriyle altındaki etiketin arası.
`indicator`	`NavigationIndicator?`	`null`	Bulunulan hedefi neyin işaretlediği.
`divider`	`Boolean?`	`null`	Bar'ın üst kenarı boyunca, yüksekliğinin içinde ince bir çizgi olup olmadığı; dik dururken kapsülünün çevresinde.
`uprightIndicatorWidth`	`Dp`	`Dp.Unspecified`	Dik duran bir bar'da hapın genişliği ve orada bir basışın çizildiği yer. Orada bir hedef hapı ve etiketi kadar geniştir.

NavigationColors

Temanın renklerini almadığı yerde bir navigation bar'ın ya da bir rayın renkleri: verilen renk kullanılır, verilmeyen temanınki kalır. İkisi aynı renkleri alır. Böylece pencerenin genişliğine göre birini ya da ötekini gösteren bir ekran ikisini de tek bir renk kümesiyle boyar.

Parametre	Tür	Varsayılan	Ne olduğu
`container`	`Color`	`Color.Unspecified`	Dolgu. Boş bırakılan payların arkasına da uzanır. Temanın `surface` rengi.
`content`	`Color`	`Color.Unspecified`	Dolgunun üstüne yazılanlar: uygulamanın bulunduğu hedefin, hapının altındaki etiketi ve öteki hedeflerin ikonlarıyla etiketleri. Temanın kendi dolgusunda ilki temanın `textPrimary`, ötekiler `textSecondary` rengindedir. Çağıranın dolgusunda ve bu renk verildiğinde hepsi bu renktedir. Bulunulan hedefi bir hap işaretlemiyorsa ötekiler bu rengin bir payındadır.
`selectedContainer`	`Color`	`Color.Unspecified`	Stil hap çiziyorsa, bulunulan hedefin ikonunun arkasındaki hap. `primary` rolünün `container`'ı.
`selectedContent`	`Color`	`Color.Unspecified`	Bulunulan hedefin, hapının üstündeki ikonu: `selectedContainer`'ın üstünde okunan renk. `primary` rolünün `onContainer`'ı.
`selectedTint`	`Color`	`Color.Unspecified`	Stilin hap çizmediği, hedefi yalnızca rengin işaretlediği yerde bulunulan hedefin ikonu ve etiketi: `container`'ın üstünde okunan bir renk. Temanın kendi dolgusunda `primary` rolünün `color`'ı, çağıranın dolgusunda `content`: orada marka renginin okunduğunu söyleyen bir şey yoktur.
`divider`	`Color`	`Color.Unspecified`	Stil çizgi çiziyorsa, bir bar'ın üst kenarı ya da bir rayın bitiş kenarı boyunca uzanan ince çizgi. Temanın kendi zeminlerinde temanın `divider` rengi. Bir dolgunun üstünde, o çizginin okunmayacağı yerde, `content`'in bir payı: Subtle bir düğmenin kenarı gibi.

Erişilebilirlik

Ekran okuyucu. Bir hedef sekme olarak okunur: adı, rozetinin söylediği ve seçili olup olmadığı. "Gelen kutusu, 3 okunmamış".