Tabs

Aynı içeriğin görünümleri arasında geçen bir sekme satırı: biri seçilidir ve bir işaret, bir sonraki seçilene kayar.

import com.pantrixui.components.container.tab.PantrixTabs

İşaret. Seçili sekmeyi stilin indicator'ı işaretler: altında bir çizgi, üstünde bir çizgi, arkasında bir hap ya da yalnızca rengi. İşaret seçim değişince kayar; hareketin azaltıldığı temada yerine hemen geçer.
Paylaşılan ya da kayan satır. Sekmeler satırın genişliğini paylaşır. scrollable ile her biri etiketi kadar geniştir ve satır yana kayar: seçili sekmede açılır, sonra seçileni ortasına getirir.
İkon ve rozet. TabItem.icon etiketin önünde, TabItem.badge arkasında durur: bir sayı ya da bir nokta. Sekme dar kaldığında kısaltılan etikettir, rozet bütün kalır.
Devre dışı sekme. enabled'ı false olan sekmeye basmak bir şey yapmaz, ok tuşları onu atlar ve hangi renk verilirse verilsin temanın devre dışı yazı rengiyle çizilir.
Platform. Bir sekmenin en az yüksekliği Android'de 48dp, iOS'ta 44dp, masaüstünde ve web'de 40dp'dir; sekme hiçbir zaman platformun dokunma hedefinden alçak olmaz.
Renk. Satırın kendi dolgusu yoktur: sayfanın ya da bir yüzeyin üstünde durur. TabsColors seçili ve seçili olmayan sekmelerin, işaretin ve alttaki ince çizginin rengini verir.
Otomasyon. tagKey ile satır Tabs_<tagKey>, sekmeleri Tabs_<tagKey>.Tab_<key> olur. Bir seçim, sekmenin sırasıyla ve basışla mı tuşla mı yapıldığıyla bildirilir; etiketiyle hiçbir zaman.

Örnekler

Bir profilin görünümleri

En yalın hâli: satırın genişliğini eşit paylaşan üç sekme ve altında seçilen görünüm. Seçili sekmenin sırası ekranın durumudur; rememberSaveable ile tutulur ve ekran dönünce kaybolmaz.

Görünümü sekmeler çizmez: altındaki metin burada, when ile seçilir. Varsayılan işaret seçili sekmenin altındaki çizgidir.

var tab by rememberSaveable { mutableIntStateOf(0) }
PantrixTabs(
    tabs = listOf(
        TabItem(label = "Genel", tagKey = "general"),
        TabItem(label = "Güvenlik", tagKey = "security"),
        TabItem(label = "Bildirimler", tagKey = "notifications")
    ),
    selectedIndex = tab,
    onSelect = { tab = it },
    tagKey = "profile"
)
PantrixText(
    text = when (tab) {
        0 -> "Ad, e-posta ve dil"
        1 -> "Parola ve iki adımlı doğrulama"
        else -> "Hangi bildirimlerin geleceği"
    },
    color = PantrixTheme.colors.textSecondary
)

Rozetli sekmeler

TabItem.badge etiketin arkasına bir TabBadge koyar: count verilirse bir sayı, verilmezse bir nokta. "Hareketler" sekmesi görülmemiş hareketlerin sayısını gösterir; sekme açılınca sayı sıfırlanır ve rozet kalkar. "Ayarlar"daki nokta bekleyen bir güncellemeyi söyler.

Ekran okuyucu rozetin contentDescription'ını sekmenin adından sonra okur: "Hareketler, 3 yeni hareket". Tek başına bir sayı neyi saydığını söylemez; bu yüzden açıklamanın varsayılanı yoktur, null vermek bir karardır.

var view by rememberSaveable { mutableIntStateOf(0) }
var unseen by rememberSaveable { mutableIntStateOf(3) }
PantrixTabs(
    tabs = listOf(
        TabItem(label = "Özet", tagKey = "overview"),
        TabItem(
            label = "Hareketler",
            tagKey = "activity",
            badge = if (unseen > 0) TabBadge(contentDescription = "$unseen yeni hareket", count = unseen) else null
        ),
        TabItem(
            label = "Ayarlar",
            tagKey = "settings",
            badge = TabBadge(contentDescription = "Güncelleme var", tone = BadgeTone.Primary)
        )
    ),
    selectedIndex = view,
    onSelect = { chosen ->
        view = chosen
        if (chosen == 1) unseen = 0
    },
    tagKey = "account"
)
PantrixText(
    text = when (view) {
        0 -> "Hesabın özeti: bakiye ve son hareketler"
        1 -> "Son otuz günün hareketleri"
        else -> "Bildirimler, dil ve gizlilik"
    },
    color = PantrixTheme.colors.textSecondary
)

Seçili sekmenin işareti

Seçili sekmeyi neyin işaretlediğini stil söyler: TabsStyle(indicator = ...). Dört satır aynı seçimi gösterir ve her birinin üstünde işaretinin adı yazar; birinde başka bir sekmeye bas, dördü birlikte değişir.

Underline her platformda varsayılandır: seçili sekmenin alt kenarında bir çizgi. Top aynı çizgiyi üst kenara koyar, değiştirdiği içeriğin altında duran bir satır için. Pill seçili sekmenin arkasına primary rolünün soluk dolgusunda bir hap koyar ve satırın altındaki ince çizgiyi çizmez: iOS'taki bölümlü denetimin çizimidir, burada bir grafiğin dönemini seçer. None işaret çizmez; seçili sekmeyi yalnızca rengi söyler.

var period by rememberSaveable { mutableIntStateOf(1) }
val caption = PantrixTheme.typography.caption
val quiet = PantrixTheme.colors.textSecondary
PantrixText(text = "Underline", style = caption, color = quiet)
PantrixTabs(tabs = PERIODS, selectedIndex = period, onSelect = { period = it }, tagKey = "underline")
PantrixText(text = "Top", style = caption, color = quiet)
PantrixTabs(
    tabs = PERIODS,
    selectedIndex = period,
    onSelect = { period = it },
    style = TabsStyle(indicator = TabIndicator.Top),
    tagKey = "top"
)
PantrixText(text = "Pill", style = caption, color = quiet)
PantrixTabs(
    tabs = PERIODS,
    selectedIndex = period,
    onSelect = { period = it },
    style = TabsStyle(indicator = TabIndicator.Pill),
    tagKey = "period"
)
PantrixText(text = "None", style = caption, color = quiet)
PantrixTabs(
    tabs = PERIODS,
    selectedIndex = period,
    onSelect = { period = it },
    style = TabsStyle(indicator = TabIndicator.None),
    tagKey = "none"
)

private val PERIODS = listOf(
    TabItem(label = "Gün", tagKey = "day"),
    TabItem(label = "Hafta", tagKey = "week"),
    TabItem(label = "Ay", tagKey = "month")
)

Yana kayan, ikonlu kategoriler

Satıra sığmayacak kadar çok kategori, her biri ikonuyla. scrollable = true ile her sekme etiketi kadar geniştir ve satır yana kayar. Seçilen sekme satırın ortasına gelir, böylece iki yanındaki sekmeler de görünür ve basılır.

"Gelen kutusu"ndaki sayı yazılan en büyük sayıyı aşar: "99+". Son kategori devre dışıdır: basılamaz ve ok tuşları onu atlar.

var category by rememberSaveable { mutableIntStateOf(0) }
PantrixTabs(
    tabs = CATEGORIES,
    selectedIndex = category,
    onSelect = { category = it },
    scrollable = true,
    tagKey = "categories"
)

private val CATEGORIES = listOf(
    TabItem(
        label = "Gelen kutusu",
        icon = PantrixIcons.Inbox,
        tagKey = "inbox",
        badge = TabBadge(contentDescription = "99'dan fazla okunmamış ileti", count = 128)
    ),
    TabItem(label = "Yıldızlı", icon = PantrixIcons.Star, tagKey = "starred"),
    TabItem(label = "Klasörler", icon = PantrixIcons.Folder, tagKey = "folders"),
    TabItem(label = "Kişiler", icon = PantrixIcons.Person, tagKey = "people"),
    TabItem(label = "Takvim", icon = PantrixIcons.Calendar, tagKey = "calendar"),
    TabItem(label = "Arama", icon = PantrixIcons.Search, tagKey = "search"),
    TabItem(label = "Arşiv", icon = PantrixIcons.Folder, enabled = false, tagKey = "archive")
)

Kaydırılan sayfalarla birlikte

Seçimi kullanıcı kadar uygulama da değiştirir. Burada seçili sekme bir pager'ın sayfasıdır: sayfayı yana kaydır, işaret yeni sekmeye kayar. Bir sekmeye basıldığında sekmeler yalnızca basılanı bildirir; sayfayı çeviren onSelect'teki koddur.

val pager = rememberPagerState { 3 }
val scope = rememberCoroutineScope()
PantrixTabs(
    tabs = listOf(
        TabItem(label = "Fotoğraflar", tagKey = "photos"),
        TabItem(label = "Videolar", tagKey = "videos"),
        TabItem(label = "Belgeler", tagKey = "documents")
    ),
    selectedIndex = pager.currentPage,
    onSelect = { scope.launch { pager.animateScrollToPage(it) } },
    tagKey = "library"
)
HorizontalPager(state = pager, modifier = Modifier.height(96.dp)) { page ->
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        PantrixText(
            text = when (page) {
                0 -> "248 fotoğraf"
                1 -> "12 video"
                else -> "37 belge"
            }
        )
    }
}

Seçili sekme olmadan

selectedIndex sekmelerin dışında bir sıra olduğunda hiçbir sekme seçili değildir ve işaret çizilmez: uygulama, sekmelerden hiçbirinin görünümü olmayan bir yerdedir. Düğmeye bas: seçim kalkar. Bir sekmeye bas: geri gelir.

var view by rememberSaveable { mutableIntStateOf(0) }
PantrixTabs(
    tabs = listOf(
        TabItem(label = "Akış", tagKey = "feed"),
        TabItem(label = "Keşfet", tagKey = "explore"),
        TabItem(label = "Kayıtlar", tagKey = "saved")
    ),
    selectedIndex = view,
    onSelect = { view = it },
    tagKey = "home"
)
PantrixButton(
    text = "Arama sonuçlarını aç",
    onClick = { view = -1 },
    variant = ButtonVariant.Outline,
    size = ButtonSize.Small,
    tagKey = "tabs_open_search"
)
PantrixText(
    text = if (view < 0) "Arama sonuçları açık: hiçbir sekme seçili değil" else "Bir sekmenin görünümü açık",
    color = PantrixTheme.colors.textSecondary
)

Kendi renkleriyle

colors satıra temanın değil, verilen renkleri verir. İlk satıra seçili sekmenin ve çizginin rengi verildi; seçili olmayanlar ve alttaki ince çizgi temanın renginde kalır. "Bekleyen" sekmesinin rozeti de tonunun değil, kendisine verilen rengin dolgusuyla çizilir.

İkinci satır bir hap satırı ve yalnızca hapın dolgusu verildi. O dolgu temanın bir rolünün rengi olduğu için seçili etiketin rengini tema eşleştirir. Hiçbir rolde olmayan bir dolguda selectedContent de verilir.

val own = ownColors()
var order by rememberSaveable { mutableIntStateOf(0) }
var period by rememberSaveable { mutableIntStateOf(0) }
PantrixTabs(
    tabs = listOf(
        TabItem(
            label = "Bekleyen",
            tagKey = "pending",
            badge = TabBadge(
                contentDescription = "2 bekleyen sipariş",
                count = 2,
                colors = BadgeColors(container = own.color, content = own.onColor)
            )
        ),
        TabItem(label = "Kargoda", tagKey = "shipped"),
        TabItem(label = "Teslim edildi", tagKey = "delivered")
    ),
    selectedIndex = order,
    onSelect = { order = it },
    colors = TabsColors(selectedContent = own.color, indicator = own.color),
    tagKey = "orders"
)
PantrixTabs(
    tabs = PERIODS,
    selectedIndex = period,
    onSelect = { period = it },
    style = TabsStyle(indicator = TabIndicator.Pill),
    colors = TabsColors(indicator = PantrixTheme.colors.success.container),
    tagKey = "success_pill"
)

private val PERIODS = listOf(
    TabItem(label = "Gün", tagKey = "day"),
    TabItem(label = "Hafta", tagKey = "week"),
    TabItem(label = "Ay", tagKey = "month")
)

API

tabs

Aynı içeriğin görünümleri arasında geçen bir sekme satırı: biri seçilidir ve bir işaret, bir sonraki seçilene kayar.

Parametre	Tür	Varsayılan	Ne olduğu
`tabs`	`List<TabItem>`		Sekmeler, sırayla.
`selectedIndex`	`Int`		Seçili sekmenin sırası. `tabs`'in dışında bir sıra verilirse hiçbir sekme seçili olmaz ve işaret çizilmez.
`onSelect`	`(index: Int) -> Unit`		Kullanıcının basarak ya da tuşlarla seçtiği sekmenin sırasıyla çağrılır, o sekme zaten seçili olsa da. Satır kendiliğinden bir şey seçmez: bir sekme, `selectedIndex` öyle dediğinde seçilidir.
`modifier`	`Modifier`	`Modifier`	Satırın modifier'ı. Satır kendisine verilen genişliği doldurur.
`scrollable`	`Boolean`	`false`	False iken sekmeler satırın genişliğini paylaşır. True iken her biri etiketi kadar, en az da stilin `minTabWidth`'i kadar geniştir: satır yana kayar ve seçili sekmeyi ortasında tutar.
`style`	`TabsStyle?`	`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`	`TabsColors?`	`null`	Bu satırın kendi renkleri: verdikleri kullanılır, gerisi temanınkidir. Devre dışı sekme temanın renginde kalır.
`tagKey`	`String?`	`null`	Satırın otomasyon anahtarı: satır `Tabs_<tagKey>` olur, sekmeleri de onun içinde adlandırılır, `Tabs_<tagKey>.Tab_<key>`. Böylece aynı sekmeleri taşıyan iki satır birbirinden ayrılır. Bir seçim `Tabs` olayı olarak bildirilir: olay sekmenin sırasını ve seçimin basışla mı tuşla mı yapıldığını taşır, etiketini hiçbir zaman taşımaz.

TabsStyle

PantrixTabs'in geometrisi ve seçili sekmeyi nasıl işaretlediği.

Parametre	Tür	Varsayılan	Ne olduğu
`height`	`Dp`	`Dp.Unspecified`	Bir sekmenin en az yüksekliği: Android'de 48dp, iOS'ta 44dp, masaüstünde ve web'de 40dp. Burada ne verilirse verilsin sekme hiçbir zaman platformun dokunma hedefinden alçak olmaz.
`horizontalPadding`	`Dp`	`Dp.Unspecified`	Sekmenin içinde, ikonundan ya da etiketinden önceki ve etiketinden sonraki boşluk.
`indicatorHeight`	`Dp`	`Dp.Unspecified`	Bir `TabIndicator.Underline` ya da `TabIndicator.Top` çizgisinin kalınlığı.
`minTabWidth`	`Dp`	`Dp.Unspecified`	Kayan bir sekmenin en az genişliği.
`edgePadding`	`Dp`	`Dp.Unspecified`	Kayan sekmelerin ilkinden önceki ve sonuncusundan sonraki boşluk.
`iconSize`	`Dp`	`Dp.Unspecified`	Bir sekmenin ikonunun boyutu.
`iconGap`	`Dp`	`Dp.Unspecified`	Bir sekmenin ikonu ile etiketi ve etiketi ile rozeti arasındaki aralık.
`indicator`	`TabIndicator?`	`null`	Seçili sekmeyi neyin işaretlediği.
`indicatorPadding`	`Dp`	`Dp.Unspecified`	Bir `TabIndicator.Pill` ile işaretlediği sekmenin kenarları arasındaki boşluk.

TabsColors

Temanın renklerini almayan bir satır için PantrixTabs'in neyle boyandığı: verilen renk kullanılır, verilmeyen temanın rolünde kalır.

Parametre	Tür	Varsayılan	Ne olduğu
`selectedContent`	`Color`	`Color.Unspecified`	Seçili sekmenin etiketi ve ikonu. Temanın `primary` rengidir. Bir hapın üstünde ise `primary` rolünün `onContainer`'ıdır: hapın dolgusuyla eşleşen renk. Hapa `indicator` olarak temanın kendi renklerinden biri verilirse temanın onunla eşleştirdiği renk kendiliğinden gelir. Hiçbir rolde olmayan bir renk verilirse bu da onunla birlikte verilir.
`unselectedContent`	`Color`	`Color.Unspecified`	Öteki sekmelerin etiketi ve ikonu. Temanın `textSecondary` rengidir.
`indicator`	`Color`	`Color.Unspecified`	Seçili sekmeyi işaretleyen şey: altındaki ya da üstündeki çizgi ya da arkasındaki hap. Temanın `primary` rengidir, hap için `primary` rolünün `container`'ıdır.
`divider`	`Color`	`Color.Unspecified`	Satırın altındaki ince çizgi. Hap satırı bu çizgiyi çizmez. Temanın kendi zeminlerinde temanın `divider` rengidir. Sekme satırının kendi dolgusu yoktur: bir dolgunun üstünde, o çizginin okunmayacağı yerde, orada yazılan rengin bir payıdır.

Erişilebilirlik

Klavye. Satır Tab tuşu için tek bir duraktır, seçili sekmenin üstünde. Ok tuşları sonraki ve önceki sekmeyi seçer, sağdan sola düzende ters yönde; Home ve End ilkini ve sonuncuyu. Bir sekme odaktayken odak seçimle birlikte gider.
Ekran okuyucu. Her sekme, seçili olup olmadığını söyleyen bir sekmedir ve hepsi tek bir gruptur. Rozetin açıklaması etiketten sonra, sekmenin parçası olarak okunur.