Navigation Rail

Uygulamanın üst düzey hedefleri, geniş bir pencerenin başlangıç kenarında alt alta, uygulamanın bulunduğu hedef işaretli olarak: tablette, açık bir katlanır telefonda ya da bir masaüstü penceresinde navigation bar'ın yerini tutar.

import com.pantrixui.components.navigation.navigationrail.PantrixNavigationRail

Bar ile aynı hedefler. items bir NavigationItem listesidir: ikon, etiket, rozet, seçiliyken başka ikon ve basılamayan hedef bar'daki gibidir. Bir ray üç ile yedi hedef taşır.
Durum ekranındır. selected bulunulan hedefin anahtarıdır, onSelect basılanınkini bildirir; bulunulan hedefe yeniden basmak da bildirilir. selected null ise hiçbir hedef işaretlenmez.
Başlık. header hedeflerin üstünde, rayın ortasında durur: menüyü açan bir düğme ya da ekranın ana işi.
Kayan hedefler. Hedefler raydan uzunsa kendi içinde kayar; başlık yerinde kalır.
Boy. Ray kendisine verilen yerin boyu kadardır ve o yerin bir sonu olmalıdır: bir scaffold'un yan bar'ının vardır, kayan bir sayfanın içinde boyu belli bir kutu gerekir.
Hap ya da yalnızca renk. Bulunulan hedef ikonunun arkasındaki hapla işaretlenir; NavigationRailStyle'ın indicator alanı NavigationIndicator.None ise yalnızca rengiyle.
Her platformda aynı. 80dp genişliğinde, bitiş kenarında ince bir çizgi; hedefler 56dp yüksekliğinde ve 4dp arayla. Ölçüleri style, etiketin yazısını labelStyle değiştirir.
Renkler. NavigationColors bar'ınkiyle aynı sınıftır: iki bileşeni de tek bir renk kümesi boyar.
Sistem çubukları. insets rayın üstte, altta ve başlangıç kenarında boş bıraktığı paydır: dolgu arkasına uzanır, hedefler dışında kalır.

Örnekler

Üç hedef

En yalın hâli: hedeflerin listesi (items), bulunulan hedefin anahtarı (selected) ve basılan hedefin anahtarını alan onSelect. Hedefler üstten başlayarak alt alta durur; her biri ray kadar geniştir, ikonun yanına basmak da hedefe basmaktır.

Ray, çerçevenin boyu kadardır (240dp): boyu olmayan bir yerde, kayan bir sayfanın içinde, ona bir boy vermek gerekir.

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") }
PantrixSurface(modifier = Modifier.fillMaxWidth().height(240.dp), border = PantrixTheme.colors.divider) {
    Row {
        PantrixNavigationRail(
            items = destinations,
            selected = where,
            onSelect = { where = it },
            tagKey = "plain"
        )
        PantrixText(
            text = "Açık hedef: ${destinations.first { it.key == where }.label}",
            modifier = Modifier.padding(PantrixTheme.spacing.lg),
            color = PantrixTheme.colors.textSecondary
        )
    }
}

Menü düğmesinin altında üç hedef

header hedeflerin üstünde, rayın ortasında durur: burada menüyü açan bir düğme. Basınca yandaki alan sayar.

Hedefler bir posta uygulamasınındır. "Gelen"deki rozet okunmamışları sayar: hedef açılınca sayı sıfırlanır ve rozet kalkar. Ekran okuyucu rozeti hedefin adından sonra okur: "Gelen, 3 okunmamış".

var where by rememberSaveable { mutableStateOf("starred") }
var unread by rememberSaveable { mutableIntStateOf(3) }
var menus by rememberSaveable { mutableIntStateOf(0) }
PantrixSurface(modifier = Modifier.fillMaxWidth().height(440.dp), border = PantrixTheme.colors.divider) {
    Row {
        PantrixNavigationRail(
            items = listOf(
                NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
                NavigationItem(
                    key = "inbox",
                    label = "Gelen",
                    icon = PantrixIcons.Inbox,
                    badge = if (unread > 0) NavigationBadge("$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
            },
            header = {
                PantrixIconButton(
                    imageVector = PantrixIcons.Menu,
                    contentDescription = "Menüyü aç",
                    onClick = { menus++ },
                    tagKey = "rail_menu"
                )
            },
            tagKey = "mail"
        )
        PantrixText(
            text = when (where) {
                "starred" -> "Yıldızlı iletiler"
                "inbox" -> "Gelen kutusu: okunmamış kalmadı"
                else -> "Profil ve ayarlar"
            } + if (menus > 0) "\nMenü $menus kez açıldı" else "",
            modifier = Modifier.padding(PantrixTheme.spacing.lg),
            color = PantrixTheme.colors.textSecondary
        )
    }
}

Kısa bir rayda hedefler kayar

Yedi hedef, 220dp'lik bir rayda: bir rayın taşıdığı en çok hedef, hepsini gösteremeyecek kadar kısa bir yerde. Hedefler kendi içinde kayar; başlıktaki düğme kaymaz, yerinde kalır. Rayı yukarı kaydır: "Hakkında"ya kadar iner.

"Klasörler"deki rozet bir noktadır, "Profil"deki 128 "99+" olur, "Takvim" basılamaz.

var where by rememberSaveable { mutableStateOf("search") }
PantrixSurface(modifier = Modifier.fillMaxWidth().height(220.dp), border = PantrixTheme.colors.divider) {
    Row {
        PantrixNavigationRail(
            items = SEVEN,
            selected = where,
            onSelect = { where = it },
            header = {
                PantrixIconButton(
                    imageVector = PantrixIcons.Menu,
                    contentDescription = "Menüyü aç",
                    onClick = {},
                    tagKey = "short_menu"
                )
            },
            tagKey = "short"
        )
    }
}

private val SEVEN = 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)
    ),
    NavigationItem(key = "inbox", label = "Gelen", icon = PantrixIcons.Inbox),
    NavigationItem(key = "info", label = "Hakkında", icon = PantrixIcons.Info)
)

Yalnızca renk ile

NavigationIndicator.None ile hap çizilmez: bulunulan hedefin ikonu ve etiketi temanın primary rengindedir, ötekiler ikincil yazı renginde. Basış ve odak halkası yine hapın yerinde çizilir.

Çerçeve 440dp: yedi hedef hazır ölçüleriyle sığar ve ray kaymaz.

var where by rememberSaveable { mutableStateOf("search") }
PantrixSurface(modifier = Modifier.fillMaxWidth().height(440.dp), border = PantrixTheme.colors.divider) {
    Row {
        PantrixNavigationRail(
            items = SEVEN,
            selected = where,
            onSelect = { where = it },
            style = NavigationRailStyle(indicator = NavigationIndicator.None),
            tagKey = "tint"
        )
    }
}

private val SEVEN = 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)
    ),
    NavigationItem(key = "inbox", label = "Gelen", icon = PantrixIcons.Inbox),
    NavigationItem(key = "info", label = "Hakkında", icon = PantrixIcons.Info)
)

Stil: genişlik, aralıklar ve etiket yazısı

style rayın ölçülerini, labelStyle etiketlerin yazı stilini değiştirir; yalnızca verilen alanlar değişir. İlk ray hazır hâlidir: 80dp genişliğinde, hedefleri 56dp ve 4dp arayla. İkincisi 96dp genişliğinde, hedefleri 64dp ve 12dp arayla, üstten ve alttan 16dp içeride; etiketleri caption ile yazılı.

İkinci rayın bitiş kenarında çizgi de yok: divider = false.

val destinations = SEVEN.take(4)
var where by rememberSaveable { mutableStateOf("search") }
PantrixSurface(modifier = Modifier.fillMaxWidth().height(340.dp), border = PantrixTheme.colors.divider) {
    Row {
        PantrixNavigationRail(
            items = destinations,
            selected = where,
            onSelect = { where = it },
            tagKey = "usual"
        )
        PantrixNavigationRail(
            items = destinations,
            selected = where,
            onSelect = { where = it },
            labelStyle = PantrixTheme.typography.caption,
            style = NavigationRailStyle(
                width = 96.dp,
                itemMinHeight = 64.dp,
                itemSpacing = 12.dp,
                verticalPadding = 16.dp,
                divider = false
            ),
            tagKey = "wide"
        )
    }
}

private val SEVEN = 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)
    ),
    NavigationItem(key = "inbox", label = "Gelen", icon = PantrixIcons.Inbox),
    NavigationItem(key = "info", label = "Hakkında", icon = PantrixIcons.Info)
)

Bir rolün dolgusunda, başlığıyla

container temanın bir rolünün rengi olduğunda üstünde neyin okunduğunu tema bilir: content verilmedi, hedefler rolün eşlenik rengiyle yazıldı. Basılamayan hedef o rengin bir payıyla yazılır, kenardaki çizgi de ondan çıkar.

Başlıktaki ikon ve yazı da renk söylemiyor: temanın kendi dolgusunda kendi varsayılan renklerinde olurlardı, burada rayın üstüne yazılan renktedirler.

var where by rememberSaveable { mutableStateOf("search") }
PantrixSurface(modifier = Modifier.fillMaxWidth().height(340.dp), border = PantrixTheme.colors.divider) {
    Row {
        PantrixNavigationRail(
            items = SEVEN.take(4),
            selected = where,
            onSelect = { where = it },
            colors = NavigationColors(container = PantrixTheme.colors.primary.color),
            header = {
                PantrixIcon(imageVector = PantrixIcons.Star, contentDescription = null)
                PantrixText(text = "Acme", style = PantrixTheme.typography.footnote)
            },
            tagKey = "role"
        )
    }
}

private val SEVEN = 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)
    ),
    NavigationItem(key = "inbox", label = "Gelen", icon = PantrixIcons.Inbox),
    NavigationItem(key = "info", label = "Hakkında", icon = PantrixIcons.Info)
)

Kendi renkleriyle

Temada olmayan bir renkte ray: uygulamanın kendi moru. Dolgu (container) ve üstünde okunan renk (content) birlikte verilir; öteki hedefler, basılamayan hedef ve kenardaki çizgi o renkten çıkar. Hap ve üstündeki ikon da ayrıca verildi (selectedContainer, selectedContent).

Aynı NavigationColors bir PantrixNavigationBar'a da verilebilir: bar ile ray tek bir renk kümesiyle boyanır.

val own = ownColors()
var where by rememberSaveable { mutableStateOf("search") }
PantrixSurface(modifier = Modifier.fillMaxWidth().height(440.dp), border = PantrixTheme.colors.divider) {
    Row {
        PantrixNavigationRail(
            items = SEVEN,
            selected = where,
            onSelect = { where = it },
            colors = NavigationColors(
                container = own.color,
                content = own.onColor,
                selectedContainer = own.container,
                selectedContent = own.onContainer
            ),
            tagKey = "own"
        )
    }
}

private val SEVEN = 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)
    ),
    NavigationItem(key = "inbox", label = "Gelen", icon = PantrixIcons.Inbox),
    NavigationItem(key = "info", label = "Hakkında", icon = PantrixIcons.Info)
)

Sistem çubuklarının arkasında

insets rayın üstte, altta ve başlangıç kenarında boş bıraktığı paydır: dolgu payın arkasına uzanır, başlık ve hedefler payın dışında kalır. Gerçek bir ekranda payı PantrixScaffold yan bar'ına verir ve ray sistem çubuklarının arkasına uzanır.

Burada scaffold yok: üstteki 24dp'lik şerit sistemin durum çubuğunun yerini tutuyor. Rayın dolgusu şeridin arkasında sürer, menü düğmesi şeridin altında başlar.

var where by rememberSaveable { mutableStateOf("search") }
PantrixSurface(modifier = Modifier.fillMaxWidth().height(340.dp), border = PantrixTheme.colors.divider) {
    Row {
        PantrixNavigationRail(
            items = SEVEN.take(4),
            selected = where,
            onSelect = { where = it },
            header = {
                PantrixIconButton(imageVector = PantrixIcons.Menu, contentDescription = "Menüyü aç", onClick = {}, tagKey = "menu")
            },
            insets = PaddingValues(top = 24.dp),
            tagKey = "insets"
        )
    }
    // Sistemin durum çubuğunun yerinde bir şerit: rayın dolgusu arkasında sürer.
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(24.dp)
            .background(PantrixTheme.colors.textSecondary.copy(alpha = 0.16f))
    )
}

private val SEVEN = 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)
    ),
    NavigationItem(key = "inbox", label = "Gelen", icon = PantrixIcons.Inbox),
    NavigationItem(key = "info", label = "Hakkında", icon = PantrixIcons.Info)
)

API

items

Parametre	Tür	Varsayılan	Ne olduğu
`items`	`List<NavigationItem>`		Hedefler, sırasıyla: üç ile yedi 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`	Raya uygulanır.
`labelStyle`	`TextStyle`	`PantrixTheme.typography.footnote`	Etiketlerin yazı stili: verilmezse temanın `footnote` stili. Renklerini ray verir.
`style`	`NavigationRailStyle?`	`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.
`header`	`(@Composable ColumnScope.() -> Unit)?`	`null`	Hedeflerin üstünde, rayın genişliğinin ortasında durur. İçindeki bir yazı ya da ikon kendi rengini söylemiyorsa temanın dolgusunda kendi varsayılan rengindedir, çağıranın dolgusunda ise rayın üstüne yazılan renkte.
`insets`	`PaddingValues`	`PaddingValues()`	Rayın üstte, altta ve başlangıç kenarında boş bıraktığı pay. Dolgusu bu payın arkasına uzanır. Bir scaffold'un yan bar'ına verdiği paydır.
`tagKey`	`String?`	`null`	Otomasyon için, dilden bağımsız bir anahtar: rayın test etiketi `NavigationRail_<tagKey>` olur, hedefleri de onun içinde adlandırılır: `NavigationRail_<tagKey>.Item_<destination's key>`.

NavigationRailStyle

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

Parametre	Tür	Varsayılan	Ne olduğu
`width`	`Dp`	`Dp.Unspecified`	Rayın, boş bıraktığı payların yanındaki genişliği.
`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ı.
`itemMinHeight`	`Dp`	`Dp.Unspecified`	Bir hedefin en az yüksekliği. Hedef hiçbir zaman platformun dokunma hedefinden alçak olmaz ve büyüyen yazıyla birlikte uzar.
`itemSpacing`	`Dp`	`Dp.Unspecified`	Bir hedefle sonrakinin arası.
`headerGap`	`Dp`	`Dp.Unspecified`	Başlıkla ilk hedefin arası.
`verticalPadding`	`Dp`	`Dp.Unspecified`	Başlığın ya da ilk hedefin üstündeki ve son hedefin altındaki boşluk.
`indicator`	`NavigationIndicator?`	`null`	Bulunulan hedefi neyin işaretlediği.
`divider`	`Boolean?`	`null`	Rayın bitiş kenarı boyunca, genişliğinin içinde ince bir çizgi olup olmadığı.

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 ve sağdan sola. Bir hedef sekme olarak okunur: adı, rozetinin söylediği ve seçili olup olmadığı. Sağdan sola okunan dillerde ray sağ kenardadır ve çizgisi sol kenarına geçer.