Pantrix UI

Pagination

Uzun bir listenin ya da bir tablonun sayfaları arasında gezdirir.

import com.pantrixui.components.data.pagination.PantrixPagination

Örnekler

Sayfalar arasında gezinme

En yalın hâli: ekrandaki sayfa (page), kaç sayfa olduğu (pageCount) ve bir sayfa istenince ne olacağı (onPageChange). Hangi sayfada olunduğu ekranın durumudur; satır onu tutmaz, istenen sayfanın numarasını bildirir ve page onu söylediğinde gösterir.

Bir numaraya ya da iki uçtaki oklara bas: istenen sayfa kartın "Son olay" satırına yazılır. Ekrandaki sayfa dolguludur ve düğme değildir: ona basınca bir şey bildirilmez. İlk sayfada önceki, son sayfada sonraki basılmaz.

On sayfa var: satır ilk ve son sayfayı, ekrandakini ve iki yanındakileri gösterir, aradakileri üç noktalı bir boşluğa katlar. Dik tutulan bir telefonda bu kadarı sığmaz. Satır orada, telefonun genişliğine göre, ya daha az numara gösterir ya da kısa hâlindedir: önceki, "Sayfa 1 / 10" ve sonraki.

val report = LocalExampleEvents.current
var page by rememberSaveable { mutableIntStateOf(1) }
PantrixPagination(
    page = page,
    pageCount = 10,
    onPageChange = { asked ->
        page = asked
        report("$asked. sayfa istendi")
    },
    tagKey = "plain"
)

Sayfa sayfa gösterilen bir liste

Kırk sekiz siparişlik bir liste, sayfada beş sipariş: on sayfa eder ve sonuncusunda üç sipariş kalır. Sayfa sayısı listenin kendisinden hesaplanır. Satır yalnızca hangi sayfanın istendiğini bildirir; o sayfanın siparişlerini göstermek ekranın işidir.

Sonrakine bas, numaraların sığdığı yerde bir numaraya da basabilirsin: liste o sayfanın siparişlerine geçer ve altındaki yazı kaçıncı siparişlerin göründüğünü söyler. Son sayfaya git: orada üç sipariş vardır ve sonraki basılmaz.

Liste her sayfada beş sipariş yüksekliğindedir: son sayfada siparişi olmayan iki satır boş durur. Liste kısalsaydı altındaki satır yukarı kayar, basan parmağın altından çıkardı.

var page by rememberSaveable { mutableIntStateOf(1) }
val first = (page - 1) * ORDERS_PER_PAGE + 1
val last = minOf(page * ORDERS_PER_PAGE, ORDER_COUNT)
OrderRows(first = first, last = last, rows = ORDERS_PER_PAGE, tagKey = "order")
PantrixText(
    text = "$ORDER_COUNT siparişten $first–$last arası",
    color = PantrixTheme.colors.textSecondary,
    tagKey = "orders_shown"
)
PantrixPagination(
    page = page,
    pageCount = (ORDER_COUNT + ORDERS_PER_PAGE - 1) / ORDERS_PER_PAGE,
    onPageChange = { page = it },
    tagKey = "orders"
)

@Composable
private fun OrderRows(
    first: Int,
    last: Int,
    rows: Int,
    tagKey: String
) {
    PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
        Column {
            for (order in first until first + rows) {
                val listed = order <= last
                // Boş satırın çizgisi de yerini tutar, ama çizilmez.
                val line = if (listed) Color.Unspecified else Color.Transparent
                if (order > first) PantrixHorizontalDivider(color = line)
                Row(
                    modifier = Modifier.fillMaxWidth().padding(PantrixTheme.spacing.md),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    if (listed) {
                        PantrixText(text = "Sipariş #${FIRST_ORDER + order}", tagKey = "${tagKey}_$order")
                        PantrixText(text = "${1 + order % 4} ürün", color = PantrixTheme.colors.textSecondary)
                    } else {
                        // Boş bir yazı da bir satır yüksekliğindedir; ekran okuyucuya söylenecek bir şeyi yoktur.
                        PantrixText(text = "", role = TextRole.Decorative)
                    }
                }
            }
        }
    }
}

private const val ORDER_COUNT = 48

private const val ORDERS_PER_PAGE = 5

private const val FIRST_ORDER = 4800

Ekrandaki sayfanın yanında ve uçlarda kaç sayfa

siblingCount ekrandaki sayfanın iki yanında, boundaryCount satırın iki ucunda kaç sayfanın gösterileceğini söyler; ikisi de verilmezse birdir. Yirmi sayfalık dört satır aynı sayfayı gösterir: birinde bir sayfaya basınca dördü de oraya gider.

İlk satıra ikisi de verilmedi. İkincisi ekrandaki sayfanın iki yanında ikişer, üçüncüsü iki uçta ikişer sayfa gösterir. Sonuncusunda ikisi de sıfırdır: ortada yalnızca ekrandaki sayfa kalır ve ötekilere oklarla gidilir.

Bir satırda, hangi sayfa ekranda olursa olsun, aynı sayıda öğe vardır. İlk satırda 1'e bas: bir uca gelince boşluklardan biri kalkar ve yerini o uçtaki sayfalar alır; son satırda ilk sayfanın yanında ikincisi de durur.

Satırlar yana kayan bir çerçevededir: orada genişliğin sonu yoktur ve satırlar dar bir ekranda da numaralarıyla durur.

var page by rememberSaveable { mutableIntStateOf(10) }
val secondary = PantrixTheme.colors.textSecondary
HorizontalScrollFrame(tagKey = "around") {
    Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
        PantrixText(text = "İkisi de verilmedi: yanlarda birer, uçlarda birer sayfa", color = secondary)
        PantrixPagination(page = page, pageCount = 20, onPageChange = { page = it }, tagKey = "around_usual")
        PantrixText(text = "siblingCount = 2", color = secondary)
        PantrixPagination(
            page = page,
            pageCount = 20,
            onPageChange = { page = it },
            siblingCount = 2,
            tagKey = "around_siblings"
        )
        PantrixText(text = "boundaryCount = 2", color = secondary)
        PantrixPagination(
            page = page,
            pageCount = 20,
            onPageChange = { page = it },
            boundaryCount = 2,
            tagKey = "around_boundaries"
        )
        PantrixText(text = "siblingCount = 0, boundaryCount = 0", color = secondary)
        PantrixPagination(
            page = page,
            pageCount = 20,
            onPageChange = { page = it },
            siblingCount = 0,
            boundaryCount = 0,
            tagKey = "around_none"
        )
    }
}

İlk ve son sayfaya giden düğmelerle

firstAndLast = true öncekinin ve sonrakinin dışına birer düğme daha koyar: biri ilk sayfaya, öteki son sayfaya gider. Sayfası çok olan bir listede, bir arşivde, bir ucundan ötekine tek basışla gitmek içindir.

Son sayfa düğmesine bas: satır kırkıncı sayfaya gider; orada sonraki de son sayfa düğmesi de basılmaz. İlk sayfa düğmesi birinci sayfaya götürür ve orada baştaki iki düğme basılmaz. İstenen sayfa kartın "Son olay" satırına yazılır.

Dört düğme numaralara kalan yeri azaltır: bu satır, aynı genişlikte, iki düğmeli olandan önce katlanır. Dik tutulan bir telefonda kısa hâlindedir: iki düğme, "Sayfa 12 / 40" ve iki düğme. Dört düğmenin yanında sözlere yer kalmayan en dar telefonlarda sözlerin sonu kesilir, düğmeler kesilmez.

val report = LocalExampleEvents.current
var page by rememberSaveable { mutableIntStateOf(12) }
PantrixPagination(
    page = page,
    pageCount = 40,
    onPageChange = { asked ->
        page = asked
        report("$asked. sayfa istendi")
    },
    firstAndLast = true,
    tagKey = "ends"
)

Numaralara dar gelen yerde

Aynı satır üç genişlikte: ilki örneğin genişliğinde, ikincisi 320dp'lik, üçüncüsü 240dp'lik bir çerçevede. Satır yerine adım adım uyar. İlk çerçeve on sayfanın yedi öğesine dar gelir: satır orada ekrandaki sayfanın yanlarındaki sayfalardan vazgeçer ve beş öğeyle durur. İkinci çerçeveye o da sığmaz: satır önceki, "Sayfa 3 / 10" ve sonraki olarak dizilir. Bunun için hiçbir şey verilmedi: satır pencereye değil, kendisine kalan genişliğe bakar.

Üçü aynı sayfayı gösterir: çerçevelerden birindeki sonrakine bas, üçü de o sayfaya gider. Bir satır her sayfada aynı katlanır: sayfa değiştikçe hiçbirinin düzeni değişmez. Pencereyi daralt: üstteki satır da önce daha az numara gösterir, sonra kısa hâline geçer.

Çerçevelerin genişliği masaüstünün ve web'in 32dp'lik öğelerine göre seçildi. Telefonda öğeler daha büyüktür ve çevrelerinde dokunma hedefi kadar yer ayrılır: orada iki çerçeve de numaralara dar gelir ve ikisinde de kısa satır durur. Üstteki satır, telefonun genişliğine göre, ya daha az numara gösterir ya da o da kısadır.

var page by rememberSaveable { mutableIntStateOf(3) }
PantrixPagination(page = page, pageCount = 10, onPageChange = { page = it }, tagKey = "roomy")
PantrixSurface(modifier = Modifier.width(320.dp), border = PantrixTheme.colors.divider) {
    PantrixPagination(
        page = page,
        pageCount = 10,
        onPageChange = { page = it },
        modifier = Modifier.padding(horizontal = PantrixTheme.spacing.md),
        tagKey = "fewer"
    )
}
PantrixSurface(modifier = Modifier.width(240.dp), border = PantrixTheme.colors.divider) {
    PantrixPagination(
        page = page,
        pageCount = 10,
        onPageChange = { page = it },
        modifier = Modifier.padding(horizontal = PantrixTheme.spacing.md),
        tagKey = "narrow"
    )
}

Her genişlikte kısa satır

PaginationStyle(layout = PaginationLayout.Compact) kısa satırı her genişlikte ister: numaraların sığacağı yerde de satır önceki, sayfanın yeri ve sonrakidir. Bir numaraya atlanmayan, sayfadan sayfaya ilerlenen yerde, bir tablonun ayağında kullanılır.

Sonrakine bas: sözler "Sayfa 2 / 5" olur; ekran okuyucuya değişen sözler kendiliğinden söylenir. Beşinci sayfada sonraki, ilk sayfada önceki basılmaz.

var page by rememberSaveable { mutableIntStateOf(1) }
PantrixPagination(
    page = page,
    pageCount = 5,
    onPageChange = { page = it },
    style = PaginationStyle(layout = PaginationLayout.Compact),
    tagKey = "compact"
)

Liste yüklenirken basılmayan satır

enabled = false satırın tamamını kapatır: numaralar, önceki ve sonraki basılmaz ve satır temanın devre dışı renkleriyle çizilir. Bir sayfa yüklenirken ikinci bir sayfa istenmesin diye kullanılır: enabled = !loading.

Anahtar açıkken liste yükleniyor sayılır: sonrakine ya da, numaraların sığdığı yerde, bir numaraya bas; kartın "Son olay" satırı değişmez. Anahtarı kapat ve yeniden bas: istenen sayfa bildirilir. Ekrandaki sayfa basılmayan satırda da bellidir: numaralı satırda dolgusuyla, kısa satırda sözleriyle.

Klavyeyle bir numaranın ya da bir okun üstündeyken liste yüklenmeye başlarsa odak orada kalır: üstünde durulan basılmaz, ama liste gelince klavye kaldığı yerden devam eder.

val report = LocalExampleEvents.current
var loading by rememberSaveable { mutableStateOf(true) }
var page by rememberSaveable { mutableIntStateOf(4) }
PantrixSwitchButton(
    checked = loading,
    onCheckedChange = { loading = it },
    label = "Liste yükleniyor",
    tagKey = "list_loading"
)
PantrixPagination(
    page = page,
    pageCount = 10,
    onPageChange = { asked ->
        page = asked
        report("$asked. sayfa istendi")
    },
    enabled = !loading,
    tagKey = "while_loading"
)

Bir tablonun ayağında: sayfa boyu ve sayfaya git

Bir tablonun ayağı: PantrixPageSize bir sayfada kaç sipariş gösterileceğini seçtirir, PantrixPagination sayfalar arasında gezdirir, PantrixPageJump numarası yazılan sayfaya götürür. Üçü bir FlowRow'dadır: yeri olan yerde yan yana durur, dar yerde sığmayan alt satıra iner; dik tutulan bir telefonda üçü alt alta durur. Bir Row sığmayanı alt satıra indirmez: sonda duranı kalan yere sıkıştırır. Üçünün yüksekliği aynı olmayabilir: itemVerticalAlignment onları ortalarından hizalar.

Üçü de ekranın durumunu okur ve birbirini bilmez. Sayfa boyunu değiştir: kırk sekiz sipariş üçer üçer on altı, onar onar beş sayfa eder; satırın numaraları ve alanın aldığı hane sayısı yeni sayfa sayısına uyar. Boy değişirken görünen ilk sipariş ekranda kalır: açılan sayfa, o siparişin yeni boyda düştüğü sayfadır. Dördüncü sayfada, 16–20 arası görünürken 10'u seç: ikinci sayfa, 11–20 arası gelir. Kırk sekiz sipariş için boylar küçük: hazır boyların (DefaultPageSizes) ilkinden, 10'dan önce 3 ve 5.

Alana bir numara yaz ve Enter'a bas: o sayfa açılır, alan boşalır ve odak alanda kalır. Son sayfadan büyük bir numara son sayfayı açar; alan rakamdan başkasını almaz. İstenen sayfa, neyle istenirse istensin, kartın "Son olay" satırına yazılır.

val report = LocalExampleEvents.current
var pageSize by rememberSaveable { mutableIntStateOf(ORDERS_PER_PAGE) }
var page by rememberSaveable { mutableIntStateOf(1) }
val pageCount = (ORDER_COUNT + pageSize - 1) / pageSize
val first = (page - 1) * pageSize + 1
val last = minOf(page * pageSize, ORDER_COUNT)
val open: (Int) -> Unit = { asked ->
    page = asked
    report("$asked. sayfa istendi")
}
OrderRows(first = first, last = last, rows = pageSize, tagKey = "row")
PantrixText(
    text = "$ORDER_COUNT siparişten $first–$last arası",
    color = PantrixTheme.colors.textSecondary,
    tagKey = "foot_shown"
)
FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    itemVerticalAlignment = Alignment.CenterVertically
) {
    PantrixPageSize(
        pageSize = pageSize,
        onPageSizeChange = { size ->
            // Görünen ilk sipariş yeni boyda hangi sayfaya düşüyorsa o sayfa açılır: sipariş ekranda kalır.
            val kept = (first - 1) / size + 1
            pageSize = size
            page = kept
            report("Sayfada $size sipariş: $kept. sayfa açıldı")
        },
        pageSizes = listOf(3, 5) + DefaultPageSizes.first(),
        tagKey = "foot"
    )
    PantrixPagination(page = page, pageCount = pageCount, onPageChange = open, tagKey = "foot")
    PantrixPageJump(pageCount = pageCount, onPageChange = open, tagKey = "foot")
}

@Composable
private fun OrderRows(
    first: Int,
    last: Int,
    rows: Int,
    tagKey: String
) {
    PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
        Column {
            for (order in first until first + rows) {
                val listed = order <= last
                // Boş satırın çizgisi de yerini tutar, ama çizilmez.
                val line = if (listed) Color.Unspecified else Color.Transparent
                if (order > first) PantrixHorizontalDivider(color = line)
                Row(
                    modifier = Modifier.fillMaxWidth().padding(PantrixTheme.spacing.md),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    if (listed) {
                        PantrixText(text = "Sipariş #${FIRST_ORDER + order}", tagKey = "${tagKey}_$order")
                        PantrixText(text = "${1 + order % 4} ürün", color = PantrixTheme.colors.textSecondary)
                    } else {
                        // Boş bir yazı da bir satır yüksekliğindedir; ekran okuyucuya söylenecek bir şeyi yoktur.
                        PantrixText(text = "", role = TextRole.Decorative)
                    }
                }
            }
        }
    }
}

private const val ORDER_COUNT = 48

private const val ORDERS_PER_PAGE = 5

private const val FIRST_ORDER = 4800

Arapçada: sağdan başlayan satır ve Arap rakamları

Arapça bir bölümde aynı satır: içteki temaya yalnızca locale verildi, PantrixLocale.Arabic. Satır sağdan başlar: önceki sağdadır, oklar döner ve numaralar sola doğru büyür. Numaralar Arap rakamlarıyla yazılır: dilin paketi rakamlarını da taşır (PantrixStrings.digits). Alttaki, kısa satırdır: sözleri Arapçadır ve sayıları aynı rakamlarla yazılır.

Bir sayfaya bas: kartın "Son olay" satırı istenen sayfayı uygulamanın dilinde yazar. Rakamlar yalnızca yazılışı değiştirir: onPageChange her dilde aynı sayıyı bildirir. Ekran okuyucuya söylenen adlar da Arapçadır ve aynı rakamlarla yazılır.

Dik tutulan bir telefonda üstteki satır da, telefonun genişliğine göre, daha az numara gösterir ya da kısadır.

val report = LocalExampleEvents.current
var page by rememberSaveable { mutableIntStateOf(3) }
val open: (Int) -> Unit = { asked ->
    page = asked
    report("$asked. sayfa istendi")
}
PantrixTheme(locale = PantrixLocale.Arabic) {
    Column(
        modifier = Modifier.fillMaxWidth(),
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md)
    ) {
        PantrixPagination(page = page, pageCount = 10, onPageChange = open, tagKey = "arabic")
        PantrixPagination(
            page = page,
            pageCount = 10,
            onPageChange = open,
            style = PaginationStyle(layout = PaginationLayout.Compact),
            tagKey = "arabic_short"
        )
    }
}

Kendi renkleriyle ve bir dolgunun üstünde

colors numaraların ve kısa satırın sözlerinin (content), önceki, sonraki ve boşluk işaretlerinin (control), ekrandaki sayfanın dolgusunun ve numarasının (selectedContainer, selectedContent) rengini ayrı ayrı alır; verilmeyen temanınki kalır. İlk satırda oklar ve ekrandaki sayfanın dolgusu temanın hiçbir rolünde olmayan, uygulamanın kendi morundadır. Tema tanımadığı bir dolgunun üstünde neyin okunduğunu bilemez: numarasının rengi de verildi. Öteki numaralar verilmedi ve temanın yazı renginde kaldı.

İkinci satır temanın zemini olmayan bir dolgunun üstündedir ve hiçbir renk verilmedi: dolgu, üstüne ne renkle yazıldığını söyler ve satırın tamamı o renkle yazılır. Ekrandaki sayfa, aynı rengin bir payı olan dolgusuyla ayrılır.

val own = ownColors()
var page by rememberSaveable { mutableIntStateOf(2) }
PantrixPagination(
    page = page,
    pageCount = 3,
    onPageChange = { page = it },
    colors = PaginationColors(control = own.color, selectedContainer = own.color, selectedContent = own.onColor),
    tagKey = "own"
)
PantrixSurface(
    modifier = Modifier.fillMaxWidth(),
    color = PantrixTheme.colors.primary.color,
    shape = PantrixTheme.shapes.md
) {
    PantrixPagination(
        page = page,
        pageCount = 3,
        onPageChange = { page = it },
        modifier = Modifier.padding(horizontal = PantrixTheme.spacing.md),
        tagKey = "filled"
    )
}

Ölçüler ve şekil

style satırın ölçülerini verir; yalnızca verilen alanlar değişir. itemSize bir numaranın, öncekinin ve sonrakinin boyu, itemShape köşeleri, itemGap iki komşunun arasıdır. Okların ikonu öğeyle birlikte büyür ve küçülür: öğenin yarısından 4dp büyüktür.

Ortadaki satır hiçbir şey verilmemiş hâlidir. Üstteki 24dp'lik, tam yuvarlak öğelerle ve aralarına boşluk konmadan kuruldu; alttaki 48dp'lik öğelerle, orta köşelerle ve 8dp aralıkla. Küçük öğelerin çevresinde de platformun dokunma hedefi kadar yer ayrılır: öğeler küçülür ama birbirine o hedeften fazla yaklaşmaz.

Öğe büyüyünce yazı kendiliğinden büyümez: alttaki satıra textStyle ile temanın title stili de verildi.

var page by rememberSaveable { mutableIntStateOf(2) }
PantrixPagination(
    page = page,
    pageCount = 3,
    onPageChange = { page = it },
    style = PaginationStyle(itemSize = 24.dp, itemShape = ShapeRole.Full, itemGap = 0.dp),
    tagKey = "small"
)
PantrixPagination(page = page, pageCount = 3, onPageChange = { page = it }, tagKey = "usual")
PantrixPagination(
    page = page,
    pageCount = 3,
    onPageChange = { page = it },
    textStyle = PantrixTheme.typography.title,
    style = PaginationStyle(itemSize = 48.dp, itemShape = ShapeRole.Medium, itemGap = 8.dp),
    tagKey = "large"
)

API

page

Uzun bir listenin ya da bir tablonun sayfaları arasında gezdirir.

ParametreTürVarsayılanNe olduğu
pageIntEkrandaki sayfa, satırda yazıldığı gibi birden sayılır: bir sayfalayıcının ya da bir carousel'in sırası sıfırdan sayılır ve bunun bir eksiğidir. Sayfaların dışında kalan bir sayı en yakın sayfa sayılır.
pageCountIntKaç sayfa olduğu. İçinde hiçbir şey olmayan listenin tek, boş bir sayfası vardır: birin altındaki sayı bir sayılır.
onPageChange(page: Int) -> Unitİstenen sayfayla çağrılır: sayfa numarasıyla ya da bir düğmeyle istenmiş olabilir. Satır onu, page öyle söylediğinde gösterir.
modifierModifierModifierSatıra uygulanır.
siblingCountInt1Numaralı bir satırda, yeri olduğunda ekrandaki sayfanın her iki yanında kaç sayfanın gösterildiği: sıfır ya da daha çok. Sayfa sayısından büyükse sayfaların hepsi gösterilir.
boundaryCountInt1Numaralı bir satırda, yeri olduğunda iki uçta her zaman kaç sayfanın gösterildiği: sıfır ya da daha çok.
firstAndLastBooleanfalseSatırda, önceki ile sonrakinin dışında, ilk sayfaya ve son sayfaya giden iki düğmenin olup olmadığı.
enabledBooleantrueSatırın basılıp basılamadığı: basılamayan satır temanın devre dışı renkleriyle çizilir.
textStyleTextStylePantrixTheme.typography.labelNumaraların ve sözlerin yazı stili: verilmezse temanın label stili. Stilin büyüttüğü bir öğe kendiliğinden daha büyük yazılmaz.
stylePaginationStyle?nullBu ç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.
colorsPaginationColors?nullBu çağrının kendi renkleri. Yalnızca verdikleri değişir, gerisi temanınki kalır.
tagKeyString?nullOtomasyon için dilden bağımsız bir anahtar. Satırın test etiketi Pagination_<tagKey> olur ve parçaları onun içinde adlandırılır: Pagination_<tagKey>.Page_<number>, Pagination_<tagKey>.Step_previous, Pagination_<tagKey>.Step_next, Pagination_<tagKey>.Step_first, Pagination_<tagKey>.Step_last ve numarasız bir satırın sözleri için Pagination_<tagKey>.Text_position.

PaginationStyle

PantrixPagination'ın dizilişi ve geometrisi.

ParametreTürVarsayılanNe olduğu
layoutPaginationLayout?nullSayfaların nasıl dizildiği: her platformda, yeri olan bir satırda numaralarıyla.
itemSizeDpDp.UnspecifiedBir sayfanın numarası, önceki ve sonraki: Android'de 40dp, iOS'ta 36dp, masaüstünde ve web'de 32dp. Ona sığmayan uzun bir numara öğesini genişletir. Önceki ve sonrakinin ikonları bunun yarısından 4dp büyüktür.
itemShapeShapeSpecShapeSpec.UnspecifiedBir öğenin, ekrandaki sayfa olduğunda dolgusunun ve odak halkasının köşeleri: Android'de ve iOS'ta yuvarlak, masaüstünde ve web'de küçük.
itemGapDpDp.UnspecifiedSatırdaki iki komşunun arası.

PaginationColors

Temanın renklerini almayan bir satır için PantrixPagination'ın renkleri: verilen renk kullanılır, verilmeyen temanınki kalır.

ParametreTürVarsayılanNe olduğu
contentColorColor.UnspecifiedEkranda olmayan sayfaların numaraları ve numaralara yeri olmayan bir satırın sözleri. Temanın textPrimary rengi.
controlColorColor.UnspecifiedÖnceki ve sonraki, bir de katlanan sayfaların yerinde duran işaretler. Temanın textSecondary rengi.
selectedContainerColorColor.UnspecifiedEkrandaki sayfanın dolgusu. primary rolünün container'ı.
selectedContentColorColor.UnspecifiedEkrandaki sayfanın numarası: temanın selectedContainer ile eşlediği renk. Satırın kendiliğinden aldığı dolgunun üstünde bu, primary rolünün onContainer'ıdır. Temanın hiçbir rolünde olmayan bir dolgunun eşi yoktur ve tema onun üstüne satırın kendi dolgusundaki gibi yazar: böyle bir dolguya numarasının rengini de verin.

Erişilebilirlik