Radio Group

Bir radyo düğmeleri grubu: options arasından birinin seçimi. Üstünde bir etiket, altında yardım metni ya da bir hatanın mesajı durur.

import com.pantrixui.components.elements.radiobutton.PantrixRadioGroup

Seçenekler. Bir seçenek bir RadioOption'dır: değeri, etiketi, etiketin altında ne olduğunu söyleyen metni, seçilebilir olup olmadığı ve otomasyon anahtarı.
Alt alta ya da yan yana. orientation seçenekleri alt alta (Orientation.Vertical, varsayılan) ya da yan yana dizer (Orientation.Horizontal): satıra sığdığı kadarı yan yana durur, kalanı alt satıra geçer.
Tek hedef. Halka, etiket ve altındaki metin tek bir hedeftir: yazıya basmak da seçer. Halka ne kadar küçük olursa olsun satır, platformun dokunma hedefi kadar yer tutar.
Hata. error halkaları ve grubun altındaki metni temanın danger rolüne çevirir; hatayı ekran okuyucuya grup, bir kez söyler.
Form. field alan PantrixRadioGroup seçimini, hatasını ve adını formun alanından alır. Yapılması zorunlu bir seçim, null ile başlayan bir alan ve Rules.required ile kurulur.
Devre dışı ve salt okunur. RadioOption(enabled = false) tek bir seçeneği, grubun enabled = false'u hepsini kapatır. onClick'i null olan PantrixRadioButton salt okunurdur: basış ve odak almaz, seçili olduğunu söyler.
Kendi renkleri ve stil. RadioColors seçili ve seçili olmayan halkanın rengini, RadioStyle halkanın ve içindeki noktanın boyunu ve çizgi kalınlığını verir. Halka 20dp, noktası 10dp'dir; iOS'ta 22dp ve 12dp.
Halka sonda. controlPosition = ControlPosition.End halkayı etiketin sonuna koyar; alt alta bir grupta seçenekler grubun genişliğini alır ve halkalar bir sütunda durur.
Hareket. Seçilen halkanın noktası büyür ve halka onunla birlikte primary rengine döner. Hareketin azaltıldığı temada ikisi de bir anda olur.

Örnekler

Bir grup ve seçenekleri

PantrixRadioGroup seçenekleri label'ın altında alt alta dizer, en altına supportingText'i yazar. Her seçenek bir RadioOption'dır; burada her birinin altında ne anlama geldiği yazar. "Mağazadan teslim" seçilemez (enabled = false): basılmaz ve ok tuşları onu atlar.

Klavyeyle dene: Tab gruba bir kez girer ve seçili seçenekte durur. Aşağı ve yukarı ok seçimi ve odağı birlikte taşır, sondan başa döner.

var delivery by rememberSaveable { mutableStateOf("standard") }
PantrixRadioGroup(
    options = DELIVERIES,
    selected = delivery,
    onSelect = { delivery = it },
    label = "Teslimat",
    supportingText = "Sipariş kargoya verilene kadar değiştirebilirsiniz",
    tagKey = "delivery"
)

private val DELIVERIES = listOf(
    RadioOption("standard", "Standart", supportingText = "Üç ila beş iş günü", tagKey = "standard"),
    RadioOption("express", "Hızlı", supportingText = "Ertesi iş günü", tagKey = "express"),
    RadioOption(
        value = "pickup",
        label = "Mağazadan teslim",
        supportingText = "Şehrinizde henüz yok",
        enabled = false,
        tagKey = "pickup"
    )
)

Yan yana

orientation = Orientation.Horizontal seçenekleri yan yana dizer: satıra sığdığı kadarı yan yana durur, kalanı alt satıra geçer. Halkalar, altlarında bir metin olsun olmasın, etiketlerinin ilk satırında hizalanır.

Sol ve sağ ok da seçimi taşır; sağdan sola düzende yönleri değişir. Aşağı ve yukarı ok iki dizilişte de sonraki ve önceki seçenektir.

var digest by rememberSaveable { mutableStateOf("weekly") }
PantrixRadioGroup(
    options = listOf(
        RadioOption("daily", "Her gün", tagKey = "daily"),
        RadioOption("weekly", "Haftada bir", tagKey = "weekly"),
        RadioOption("monthly", "Ayda bir", tagKey = "monthly"),
        RadioOption("never", "Hiç", tagKey = "never")
    ),
    selected = digest,
    onSelect = { digest = it },
    orientation = Orientation.Horizontal,
    label = "Özet e-postası",
    tagKey = "digest"
)

Bir forma bağlı beden seçimi

field alan PantrixRadioGroup bir formun alanına bağlıdır: seçimini, hatasını ve adını alandan alır. Yapılması zorunlu bir seçim böyle kurulur: alan null ile başlar ve Rules.required taşır. Alanın kimliği otomasyon anahtarıdır: grup RadioGroup_size'dır, seçenekleri onun içinde adlandırılır.

Beden seçmeden "Sepete ekle"ye bas: kuralın mesajı yardım metninin yerine geçer, halkalar hata rengine döner ve odak gruba gider. Bedenler yan yana dizildi; tükenen "XL" seçilemez.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val form = rememberFormState()
PantrixRadioGroup(
    field = form.field<String?>("size", initial = null, Rules.required("Devam etmek için bir beden seçin")),
    options = SIZES,
    orientation = Orientation.Horizontal,
    label = "Beden",
    supportingText = "Kalıbı dardır; arada kaldıysanız bir büyüğünü seçin"
)
PantrixButton(
    text = "Sepete ekle",
    onClick = {
        scope.launch { form.submit { snackbars?.show(message = "Sepete eklendi", tagKey = "added_to_cart") } }
    },
    form = form,
    tagKey = "add_to_cart"
)

private val SIZES = listOf("XS", "S", "M", "L", "XL", "XXL").map { size ->
    RadioOption(value = size.lowercase(), label = size, enabled = size != "XL", tagKey = size.lowercase())
}

Hata

error halkaları ve grubun altındaki metni temanın danger rolüne çevirir; ekran okuyucuya girdinin geçersiz olduğunu grup, bir kez söyler. Seçeneklerin altındaki metinler rengini korur: onlar seçeneğin ne olduğunu söyler, neyin yanlış olduğunu değil.

Burada hatayı örnek kendisi hesaplar: hiçbiri seçili değilken error true'dur. Birini seç: halkalar ve alttaki metin eski hâline döner.

var invoice by rememberSaveable { mutableStateOf<String?>(null) }
PantrixRadioGroup(
    options = listOf(
        RadioOption("personal", "Bireysel", supportingText = "Fatura adınıza kesilir", tagKey = "personal"),
        RadioOption("company", "Kurumsal", supportingText = "Vergi numarası istenir", tagKey = "company")
    ),
    selected = invoice,
    onSelect = { invoice = it },
    label = "Fatura türü",
    supportingText = if (invoice == null) "Devam etmek için bir tür seçin" else "Sonradan değiştirebilirsiniz",
    error = invoice == null,
    tagKey = "invoice"
)

Devre dışı ve salt okunur

Grubun enabled = false'u her seçeneği kapatır; etiket ve yardım metni de devre dışı yazı rengiyle yazılır. Hangi seçeneğin seçili olduğu yine görünür.

onClick = null verilen PantrixRadioButton salt okunurdur: basış ve odak almaz, renkleri değişmez, adını ve seçili olduğunu yine söyler.

PantrixRadioGroup(
    options = listOf(
        RadioOption("card", "Kart", tagKey = "card"),
        RadioOption("transfer", "Havale", tagKey = "transfer")
    ),
    selected = "card",
    onSelect = {},
    orientation = Orientation.Horizontal,
    enabled = false,
    label = "Ödeme",
    supportingText = "Devre dışı: kayıtlı kartınızla ödenecek",
    tagKey = "payment"
)
PantrixRadioButton(
    selected = true,
    onClick = null,
    label = "Salt okunur",
    supportingText = "Basılmaz; yalnızca neyin seçildiğini gösterir",
    tagKey = "read_only"
)

Kendi renkleri

colors grubun her seçeneğini boyar. Burada yalnızca seçili halkanın rengi verildi (RadioColors(selected = …)): seçili halka ve noktası uygulamanın kendi morundadır, ötekiler temanın renginde kalır.

Bu renkler seçilebilen ve hatasız bir halkanındır. Devre dışı bir seçenek ve hatalı bir grup, renk verilse de temanın renkleriyle çizilir.

var wrapping by rememberSaveable { mutableStateOf("gift") }
PantrixRadioGroup(
    options = listOf(
        RadioOption("plain", "Sade", tagKey = "plain"),
        RadioOption("gift", "Hediye paketi", tagKey = "gift")
    ),
    selected = wrapping,
    onSelect = { wrapping = it },
    orientation = Orientation.Horizontal,
    label = "Paket",
    supportingText = "Seçili halkanın rengi dışarıdan verildi; ötekiler temanın renginde",
    colors = RadioColors(selected = ownColors().color),
    tagKey = "wrapping"
)

Stil

style grubun her seçeneğinin halkasını değiştirir: size halkanın, dotSize içindeki noktanın boyudur, strokeWidth halkanın çizgi kalınlığı. Yalnızca verilen alanlar değişir; gerisi temanın ve platformun stilinden gelir.

Buradaki halka 28dp, noktası 14dp, çizgisi 3dp'dir. Halkanın rengi stilin parçası değildir: o durumdan ve colors'tan gelir.

var seat by rememberSaveable { mutableStateOf("window") }
PantrixRadioGroup(
    options = listOf(
        RadioOption("window", "Cam kenarı", tagKey = "window"),
        RadioOption("aisle", "Koridor", tagKey = "aisle")
    ),
    selected = seat,
    onSelect = { seat = it },
    orientation = Orientation.Horizontal,
    label = "Koltuk",
    style = RadioStyle(size = 28.dp, dotSize = 14.dp, strokeWidth = 3.dp),
    tagKey = "seat"
)

Halkalar sonda

Halkalar seçeneklerin sonunda (controlPosition = ControlPosition.End): alt alta seçenekler grubun genişliğini alır ve halkalar grubun sonunda bir sütunda durur.

var delivery by rememberSaveable { mutableStateOf("standard") }
PantrixRadioGroup(
    options = DELIVERIES,
    selected = delivery,
    onSelect = { delivery = it },
    modifier = Modifier.widthIn(max = 360.dp),
    label = "Teslimat",
    tagKey = "delivery_end",
    controlPosition = ControlPosition.End
)

private val DELIVERIES = listOf(
    RadioOption("standard", "Standart", supportingText = "Üç ila beş iş günü", tagKey = "standard"),
    RadioOption("express", "Hızlı", supportingText = "Ertesi iş günü", tagKey = "express"),
    RadioOption(
        value = "pickup",
        label = "Mağazadan teslim",
        supportingText = "Şehrinizde henüz yok",
        enabled = false,
        tagKey = "pickup"
    )
)

API

options

Bir radyo düğmeleri grubu: options arasından birinin seçimi. Üstünde bir etiket, altında yardım metni ya da bir hatanın mesajı durur.

Parametre	Tür	Varsayılan	Ne olduğu
`options`	`List<RadioOption<T>>`		Seçenekler, sırasıyla.
`selected`	`T?`		Seçili seçeneğin değeri. Null ya da hiçbir seçeneğin taşımadığı bir değer hiçbirini seçmez.
`onSelect`	`(T) -> Unit`		Kullanıcının bir basışla ya da tuşlarla seçtiği seçeneğin değeriyle çağrılır. Grup kendiliğinden bir şey seçmez: `selected` hangi değeri söylüyorsa o seçenek seçilidir. Seçili olan seçeneğe basmak onu yeniden ister, bir ok tuşu ise yalnızca başka bir seçeneği ister.
`modifier`	`Modifier`	`Modifier`	Grubun modifier'ı.
`orientation`	`Orientation`	`Orientation.Vertical`	Alt alta seçenekler için `Orientation.Vertical`, yan yana seçenekler için `Orientation.Horizontal`.
`enabled`	`Boolean`	`true`	False verilirse her seçenek devre dışı kalır, etiket ve yardım metni de devre dışı yazı rengiyle yazılır.
`label`	`String?`	`null`	Seçimin ne olduğunu söyler ve seçeneklerin üstüne yazılır: ekran okuyucu için grubun adıdır.
`supportingText`	`String?`	`null`	Seçeneklerin altında, daha küçük bir yazıyla duran yardım metni: `error` true iken mesajın kendisidir.
`error`	`Boolean`	`false`	Seçimin yanlış ya da eksik olup olmadığı: halkalar ve yardım metni danger rolüne döner, ekran okuyucuya girdinin geçersiz olduğu söylenir.
`style`	`RadioStyle?`	`null`	Bu çağrının kendi stili, her seçeneğin çizildiği stil: çevresindeki bütün stilleri ezer, yoğunluk ona da uygulanır. Yalnızca verdiği alanlar değişir, her platformda.
`colors`	`RadioColors?`	`null`	Temanın renkleri kullanılmayacaksa her seçeneğin çizildiği renkler: burada verilenler kullanılır, gerisi temanınkilerdir. Devre dışı bir seçenek ve hatalı bir grup temanın renklerinde kalır.
`tagKey`	`String?`	`null`	Grubun otomasyon anahtarı: grup `RadioGroup_<tagKey>`'dir ve seçenekleri onun içinde adlandırılır, `RadioGroup_<tagKey>.RadioButton_<key>`. Böylece seçenekleri aynı olan iki grup birbirinden ayırt edilir. Bir seçim bir kez, bir `RadioGroup` olayı olarak bildirilir: olay seçeneğin sırasını taşır, değerini ya da etiketini hiçbir zaman taşımaz.
`controlPosition`	`ControlPosition`	`ControlPosition.Start`	her seçeneğin halkasının durduğu yer: etiketinin önü ya da arkası. Arkasındaysa, alt alta seçeneklerin her biri grubu boydan boya kaplar ve halkalar grubun sonunda hizalanır; yan yana seçeneklerde her halka etiketinin ardından gelir.

field

Bir formun alanına bağlı radyo grubu: seçimi, hatası ve adı field'den gelir.

Parametre	Tür	Varsayılan	Ne olduğu
`field`	`FormField<T>`		Grubun gösterdiği ve değiştirdiği alan.
`options`	`List<RadioOption<T>>`		Seçenekler, sırasıyla.
`modifier`	`Modifier`	`Modifier`	Grubun modifier'ı.
`orientation`	`Orientation`	`Orientation.Vertical`	Alt alta seçenekler için `Orientation.Vertical`, yan yana seçenekler için `Orientation.Horizontal`.
`enabled`	`Boolean`	`true`	False verilirse her seçenek devre dışı kalır.
`label`	`String?`	`null`	Seçimin ne olduğunu söyler ve seçeneklerin üstüne yazılır: ekran okuyucu için grubun adıdır.
`supportingText`	`String?`	`null`	Seçeneklerin altındaki yardım metni. Alanın orada gösterilecek bir hatası yokken görünür.
`style`	`RadioStyle?`	`null`	Bu çağrının kendi stili, her seçeneğin çizildiği stil: çevresindeki bütün stilleri ezer, yoğunluk ona da uygulanır. Yalnızca verdiği alanlar değişir, her platformda.
`colors`	`RadioColors?`	`null`	Temanın renkleri kullanılmayacaksa her seçeneğin çizildiği renkler: burada verilenler kullanılır, gerisi temanınkilerdir. Devre dışı bir seçenek ve hatalı bir grup temanın renklerinde kalır.
`controlPosition`	`ControlPosition`	`ControlPosition.Start`	her seçeneğin halkasının durduğu yer: etiketinin önü ya da arkası. Arkasındaysa, alt alta seçeneklerin her biri grubu boydan boya kaplar ve halkalar grubun sonunda hizalanır; yan yana seçeneklerde her halka etiketinin ardından gelir.

RadioStyle

PantrixRadioButton'ın halkası ve içindeki nokta: her birinin boyu ve halkanın kalınlığı.

Parametre	Tür	Varsayılan	Ne olduğu
`size`	`Dp`	`Dp.Unspecified`	Halkanın genişliği ve yüksekliği, çizgisiyle birlikte.
`dotSize`	`Dp`	`Dp.Unspecified`	Seçili bir halkanın içindeki noktanın genişliği ve yüksekliği.
`strokeWidth`	`Dp`	`Dp.Unspecified`	Halkanın çizgisinin kalınlığı.

RadioColors

Temanın renklerini almayanlar için PantrixRadioButton'ın ve PantrixRadioGroup seçeneklerinin boyandığı renkler: verilen renk kullanılır, verilmeyen temanın rolünde kalır.

Parametre	Tür	Varsayılan	Ne olduğu
`selected`	`Color`	`Color.Unspecified`	Seçilen seçeneğin halkası ve noktası. Temanın `primary` rengi.
`unselected`	`Color`	`Color.Unspecified`	Seçili olmayan bir seçeneğin halkası. Temanın `borderStrong` rengi: boş bir halka çizgisinden ibarettir.

Erişilebilirlik

Klavye. Grup Tab için tek duraktır: odak seçili seçeneğe, hiçbiri seçili değilken seçilebilen ilk seçeneğe gelir. Ok tuşları sonraki ve önceki seçeneği seçer, sondan başa döner ve seçilemeyeni atlar; sağdan sola düzende sol ve sağ yer değiştirir.
Ekran okuyucu. Her seçenek, seçili olup olmadığını söyleyen bir radyo düğmesidir; grubun adı label'dır. Tek başına kullanılan düğmeler Modifier.selectableGroup() içine alınır ki tek bir seçim olarak duyulsun.