Segment Button

Bir segment düğmesi: tek bir kontrolde yan yana duran birkaç seçenek, biri seçili.

import com.pantrixui.components.elements.segmentbutton.PantrixSegmentButton

Kayan hap. Seçili segmentin altındaki hap oraya kayar ve etiketi primary renginde yazılır. Seçili segmente yeniden basmak bir şey yapmaz.
Genişlik. fullWidth (varsayılan) kontrolü verilen genişliğe yayar ve segmentlere eşit pay verir: etiketler başka bir dilde ne derse desin segmentler yerinde kalır. fullWidth = false her segmenti etiketi kadar yapar.
İkonlar. SegmentOption(icon = …) etiketin önüne, etiketin renginde bir ikon koyar; ekran okuyucu onu atlar.
Seçilemeyen segment. SegmentOption(enabled = false) tek bir segmenti kapatır: basılmaz ve ok tuşları onu atlar. Kontrolün enabled = false'u hepsini kapatır; hap yerinde kalır ve seçim okunmaya devam eder.
Hiçbiri seçili değilken. selected hiçbir seçeneğin değeri değilse, null da öyledir, hiçbir segment seçili değildir ve hap çizilmez.
Platform. Android'de 40dp yüksekliğinde tam yuvarlak bir haptır. iOS'ta 32dp, masaüstünde 30dp, web'de 34dp yüksekliğinde, orta yuvarlak köşeli bir dikdörtgendir.
Kendi renkleri ve stil. SegmentButtonColors izin, hapın ve seçili ile seçili olmayan etiketlerin rengini, SegmentButtonStyle izin şeklini, yüksekliğini ve iç boşluklarını verir. labelStyle etiketlerin yazısını değiştirir; renkleri segmentin durumundan gelir.
Yazı ölçeği. İz stilin dediği yüksekliktedir ve çevresinde platformun dokunma hedefi kadar yer ayrılır. Sistemin yazı boyutu büyütülünce izden uzun olan etiket izi de uzatır.

Örnekler

Genişliği eşit paylaşan segmentler

En yalın hâli: seçenekler, seçili değer ve onSelect. Kontrol verilen genişliğe yayılır ve üç segment onu eşit paylaşır (fullWidth, varsayılan). Seçim hemen uygulanır: altındaki satır seçilenle birlikte değişir.

Seçili segmentin altındaki hap oraya kayar ve etiketi primary renginde yazılır. Klavyede kontrol tek bir Tab durağıdır; ok tuşları seçimi bir sonrakine ya da bir öncekine taşır.

var sort by rememberSaveable { mutableStateOf("newest") }
PantrixSegmentButton(
    options = SORTS,
    selected = sort,
    onSelect = { sort = it },
    modifier = Modifier.widthIn(max = 480.dp),
    tagKey = "sort"
)
PantrixText(
    text = "Sıralama: ${SORTS.first { it.value == sort }.label}",
    style = PantrixTheme.typography.footnote,
    color = PantrixTheme.colors.textSecondary,
    tagKey = "sort_result"
)

private val SORTS = listOf(
    SegmentOption("newest", "En yeni", tagKey = "newest"),
    SegmentOption("cheapest", "En ucuz", tagKey = "cheapest"),
    SegmentOption("nearest", "En yakın", tagKey = "nearest")
)

Etiketleri kadar geniş

fullWidth = false her segmenti etiketi kadar geniş yapar: bir araç çubuğunda ya da bir başlığın yanında kontrol yalnızca gerektiği kadar yer tutar. Yer hepsine yetmezse kısa etiketler bütün kalır, uzun olanlar kalanı paylaşır.

İki kontrol de böyledir: dört seçenekli bir zaman aralığı ve üç seçenekli bir platform seçimi.

var span by rememberSaveable { mutableStateOf("week") }
var platform by rememberSaveable { mutableStateOf("web") }
PantrixSegmentButton(
    options = SPANS,
    selected = span,
    onSelect = { span = it },
    fullWidth = false,
    tagKey = "span"
)
PantrixText(
    text = "Gösterilen: son ${SPANS.first { it.value == span }.label.lowercase()}",
    style = PantrixTheme.typography.footnote,
    color = PantrixTheme.colors.textSecondary,
    tagKey = "span_result"
)
PantrixSegmentButton(
    options = PLATFORMS,
    selected = platform,
    onSelect = { platform = it },
    fullWidth = false,
    tagKey = "platform"
)

private val SPANS = listOf(
    SegmentOption("day", "Gün", tagKey = "day"),
    SegmentOption("week", "Hafta", tagKey = "week"),
    SegmentOption("month", "Ay", tagKey = "month"),
    SegmentOption("year", "Yıl", tagKey = "year")
)

private val PLATFORMS = listOf(
    SegmentOption("android", "Android", tagKey = "android"),
    SegmentOption("ios", "iOS", tagKey = "ios"),
    SegmentOption("web", "Web", tagKey = "web")
)

İkonlar ve seçilemeyen bir segment

SegmentOption(icon = …) etiketin önüne bir ikon koyar: ikon etiketin rengindedir ve ekran okuyucu onu atlar.

"Klasörler" henüz açık değil (enabled = false): devre dışı renkle yazılır, basılmaz ve ok tuşları onu atlar.

var view by rememberSaveable { mutableStateOf("list") }
PantrixSegmentButton(
    options = listOf(
        SegmentOption("list", "Liste", icon = PantrixIcons.Menu, tagKey = "list"),
        SegmentOption("search", "Ara", icon = PantrixIcons.Search, tagKey = "search"),
        SegmentOption("folders", "Klasörler", icon = PantrixIcons.Folder, enabled = false, tagKey = "folders")
    ),
    selected = view,
    onSelect = { view = it },
    modifier = Modifier.widthIn(max = 480.dp),
    tagKey = "view"
)

Hiçbiri seçili değilken

selected hiçbir seçeneğin değeri değilse hiçbir segment seçili değildir ve hap çizilmez; null da böyle bir değerdir. Bir cevabın önceden seçilmemesi gereken yerde kullanılır.

Birine bas: hap orada belirir. Bundan sonra seçim iki segment arasında kayar; kontrol seçimi kendiliğinden kaldırmaz.

var helpful by rememberSaveable { mutableStateOf<String?>(null) }
PantrixText(text = if (helpful == null) "Bu sayfa işinize yaradı mı?" else "Cevabınız kaydedildi")
PantrixSegmentButton(
    options = listOf(
        SegmentOption("yes", "Evet", tagKey = "yes"),
        SegmentOption("no", "Hayır", tagKey = "no")
    ),
    selected = helpful,
    onSelect = { helpful = it },
    fullWidth = false,
    tagKey = "helpful"
)

Kendi renkleri

colors yalnızca verilen alanları değiştirir: burada hap uygulamanın kendi morundadır (pill), üstündeki etiket o morun üstünde okunan renktedir (selectedContent); iz ve seçili olmayan etiketler temanın renginde kalır.

Uygulamanın moru temanın hiçbir rolünde yok: böyle bir hapın üstünde okunan rengi de çağıran verir. Devre dışı bir kontrolün izi ve seçilemeyen bir segment, renk verilse de temanın renkleriyle çizilir.

val own = ownColors()
var span by rememberSaveable { mutableStateOf("week") }
PantrixSegmentButton(
    options = SPANS,
    selected = span,
    onSelect = { span = it },
    modifier = Modifier.widthIn(max = 480.dp),
    colors = SegmentButtonColors(pill = own.color, selectedContent = own.onColor),
    tagKey = "span_own"
)

private val SPANS = listOf(
    SegmentOption("day", "Gün", tagKey = "day"),
    SegmentOption("week", "Hafta", tagKey = "week"),
    SegmentOption("month", "Ay", tagKey = "month"),
    SegmentOption("year", "Yıl", tagKey = "year")
)

Devre dışı

enabled = false her segmenti kapatır: iz ve etiketler devre dışı renklerle çizilir, kontrol basış ve odak almaz. Hap yerinde kalır: hangi seçeneğin seçili olduğu yine okunur.

Bu kontrolün seçenekleri ilk örnektekilerle aynıdır. Segmentler kontrolün test etiketi içinde adlandırıldığı için çakışmazlar: oradaki SegmentButton_sort.Segment_newest, buradaki SegmentButton_locked.Segment_newest'tir.

PantrixSegmentButton(
    options = SORTS,
    selected = "newest",
    onSelect = {},
    modifier = Modifier.widthIn(max = 480.dp),
    enabled = false,
    tagKey = "locked"
)

private val SORTS = listOf(
    SegmentOption("newest", "En yeni", tagKey = "newest"),
    SegmentOption("cheapest", "En ucuz", tagKey = "cheapest"),
    SegmentOption("nearest", "En yakın", tagKey = "nearest")
)

Stil

style tek bir kontrolün geometrisini değiştirir: izin şekli (shape) ve yüksekliği (height), izin kenarıyla hap arasındaki boşluk (trackPadding), etiketin iki yanındaki boşluk (segmentPadding). Yalnızca verilen alanlar değişir; gerisi temanın ve platformun stilinden gelir.

Hapın kendi şekli yoktur: izin şeklidir, her köşesi trackPadding kadar küçültülmüş. Böylece ikisinin köşeleri aynı merkezin çevresinde döner.

var size by rememberSaveable { mutableStateOf("m") }
PantrixSegmentButton(
    options = listOf(
        SegmentOption("s", "Küçük", tagKey = "s"),
        SegmentOption("m", "Orta", tagKey = "m"),
        SegmentOption("l", "Büyük", tagKey = "l")
    ),
    selected = size,
    onSelect = { size = it },
    fullWidth = false,
    style = SegmentButtonStyle(
        shape = ShapeRole.Small,
        height = 48.dp,
        trackPadding = 6.dp,
        segmentPadding = 20.dp
    ),
    tagKey = "size"
)

Kendi yazısıyla

Dar bir sütunda kendi yazısıyla: üç seçenek temanın footnote yazısıyla (labelStyle) sığar. Yazının rengi segmentindir: seçili olanınki ana renk, ötekilerinki sessiz.

var mode by rememberSaveable { mutableStateOf("auto") }
PantrixSegmentButton(
    options = listOf(
        SegmentOption("light", "Açık", tagKey = "light"),
        SegmentOption("dark", "Koyu", tagKey = "dark"),
        SegmentOption("auto", "Sistem", tagKey = "auto")
    ),
    selected = mode,
    onSelect = { mode = it },
    modifier = Modifier.widthIn(max = 220.dp),
    tagKey = "mode",
    labelStyle = PantrixTheme.typography.footnote
)

API

options

Bir segment düğmesi: tek bir kontrolde yan yana duran birkaç seçenek, biri seçili.

Parametre	Tür	Varsayılan	Ne olduğu
`options`	`List<SegmentOption<T>>`		Seçenekler, sırasıyla. Boş bir liste hiçbir şey çizmez.
`selected`	`T?`		Seçili segmentin değeri. Her seçeneğin değeriyle `==` ile karşılaştırılır. Hiçbir seçeneğin taşımadığı bir değer, null da böyledir, hiçbirini seçmez: hiçbir segment seçili olmaz ve hap çizilmez.
`onSelect`	`(T) -> Unit`		Kullanıcının bir basışla ya da bir tuşla seçtiği segmentin değeriyle çağrılır, o segment zaten seçili değilse. Kontrol kendiliğinden bir şey seçmez: `selected` hangi değeri söylüyorsa o segment seçilidir.
`modifier`	`Modifier`	`Modifier`	Kontrolün modifier'ı. Kontrolün ayırdığı dokunma hedefinin dışına uygulanır.
`enabled`	`Boolean`	`true`	False verilirse her segment devre dışı kalır. Hap yerinde kalır ki seçim yine okunsun.
`fullWidth`	`Boolean`	`true`	True verilirse kontrol kendisine verilen genişliğe yayılır ve her segment eşit pay alır: böylece etiketler başka bir dilde ne derse desin segmentler yerinde kalır. False her segmenti etiketi kadar geniş yapar. Buna yetmeyecek kadar dar bir yerde kısa etiketler bütün kalır, uzun olanlar kalanı paylaşır.
`style`	`SegmentButtonStyle?`	`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`	`SegmentButtonColors?`	`null`	Bu kontrolün kendi renkleri: verdiği renkler kullanılır, gerisi temanınkilerdir. Devre dışı bir kontrolün izi ve seçilemeyen bir segment temanın renklerinde kalır.
`tagKey`	`String?`	`null`	Kontrolün otomasyon anahtarı: kontrol `SegmentButton_<tagKey>`'dir ve segmentleri onun içinde adlandırılır, `SegmentButton_<tagKey>.Segment_<key>`. Böylece seçenekleri aynı olan iki kontrol birbirinden ayırt edilir. Bir seçim `SegmentButton` olayı olarak bildirilir: `select`. Olay segmentin anahtarını, anahtarı yoksa sırasını taşır, etiketini hiçbir zaman taşımaz.
`labelStyle`	`TextStyle`	`PantrixTheme.typography.label`	etiketlerin yazı stili: verilmezse temanın `label` stili. İzden büyük yazılan bir etiket, büyük bir yazı ölçeğinin yaptığı gibi izi uzatır.

SegmentButtonStyle

PantrixSegmentButton'ın geometrisi: iz, içinde kayan hap ve her segmentin etiketine ayırdığı yer.

Parametre	Tür	Varsayılan	Ne olduğu
`shape`	`ShapeSpec`	`ShapeSpec.Unspecified`	İzin şekli: markanın şekil ölçeğinin bir adımı ya da sabit bir şekil.
`height`	`Dp`	`Dp.Unspecified`	İzin yüksekliği. Büyük bir yazı ölçeğinde bu yüksekliğe sığmayan etiket izi yükseltir.
`trackPadding`	`Dp`	`Dp.Unspecified`	İzin kenarıyla hap arasındaki boşluk.
`segmentPadding`	`Dp`	`Dp.Unspecified`	Bir segmentin etiketinin iki yanındaki boşluk.
`iconGap`	`Dp`	`Dp.Unspecified`	Bir segmentin ikonuyla etiketi arasındaki aralık.
`iconSize`	`Dp`	`Dp.Unspecified`	Bir segmentin ikonunun genişliği ve yüksekliği.

SegmentButtonColors

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

Parametre	Tür	Varsayılan	Ne olduğu
`track`	`Color`	`Color.Unspecified`	Segmentlerin üstünde durduğu iz. Neutral rolünün `container`'ı.
`pill`	`Color`	`Color.Unspecified`	Seçili segmentin altındaki hap. Temanın `surface` rengi.
`selectedContent`	`Color`	`Color.Unspecified`	Seçili segmentin etiketi ve ikonu: `pill`'in üstünde okunan renk. Temanın `primary` rengi.
`unselectedContent`	`Color`	`Color.Unspecified`	Öteki segmentlerin etiketi ve ikonu: `track`'in üstünde okunan renk. Temanın `textSecondary` rengi.

Erişilebilirlik

Klavye. Kontrol Tab için tek duraktır, seçili segmentte. Ok tuşları sonraki ya da önceki segmenti seçer, sondan başa döner ve seçilemeyeni atlar; sağdan sola düzende yönler değişir.
Ekran okuyucu. Bir radyo düğmeleri grubu okunur: her segment etiketiyle adlandırılır, biri seçilidir.