Checkbox

Bir onay kutusu: işaretli ya da boş bir kutu ve o kutunun etiketi.

import com.pantrixui.components.elements.checkbox.PantrixCheckbox

• Tek hedef. Kutu, etiket ve yardım metni tek bir hedeftir: yazıya basmak da kutuyu değiştirir. Kutu ne kadar küçük olursa olsun satır, platformun dokunma hedefi kadar yer tutar.
• Etiket ve yardım metni. label kutunun yanında, supportingText onun altında daha küçük bir yazıyla durur. Kutu, yazı kaç satır sürerse sürsün, etiketin ilk satırındadır.
• Üç durum. PantrixTriStateCheckbox bir ToggleableState alır: işaretli, boş ya da belirsiz. Belirsiz kutu bir çizgi çizer ve ekran okuyucuya boş diye değil, belirsiz diye okunur. Basışın neye yol açacağını çağıran söyler.
• Hata. error kutuyu ve yardım metnini temanın danger rolüne çevirir; ekran okuyucuya girdinin geçersiz olduğu söylenir.
• Form. field alan PantrixCheckbox değerini, hatasını ve adını formun alanından alır. Kuralın mesajı ilk değişiklikten sonra ya da form gönderilmek istendiğinde görünür ve yardım metninin yerine geçer.
• Salt okunur ve devre dışı. onCheckedChange null ise kutu salt okunurdur: basış ve odak almaz, adını ve durumunu yine söyler. enabled = false kutuyu devre dışı renklerle çizer.
• Kendi renkleri. CheckboxColors dolguyu, işareti ve kenarı ayrı ayrı alır; verilmeyen temanın rolünde kalır. Devre dışı ve hatalı kutu, renk verilse de temanın renkleriyle çizilir.
• Stil. CheckboxStyle kutunun boyunu, köşelerini ve çizgi kalınlığını değiştirir. Kutu 18dp'dir, iOS'ta 22dp; köşeleri şekil ölçeğinin küçük adımıdır.
• Kutu sonda. controlPosition = ControlPosition.End kutuyu etiketin sonuna koyar: satıra bir genişlik verilince kutu onun sonunda durur.
• Hareket. İşaret çizilerek gelir ve gider, dolgu onunla birlikte belirir ve solar. Hareketin azaltıldığı temada ikisi de bir anda olur.

Örnekler

Etiket ve yardım metni

En yalın hâli: checked durumu okur, onCheckedChange istenen değeri bildirir. label kutunun yanında, supportingText altında durur ve üçü tek bir hedeftir. Yazıya bas: kutu yine değişir.

var newsletter by rememberSaveable { mutableStateOf(true) }
PantrixCheckbox(
    checked = newsletter,
    onCheckedChange = { newsletter = it },
    label = "Haftalık bülten",
    supportingText = "Haftada bir e-posta; istediğiniz zaman bırakabilirsiniz",
    tagKey = "newsletter"
)

Üç durum: tümünü seç

PantrixTriStateCheckbox üçüncü bir durumu çizer. Altındaki kutuların bir kısmı seçiliyken "Tüm bildirimler" ne işaretli ne boştur: bir çizgi gösterir ve ekran okuyucuya öyle okunur.

Durumu kutu değil, çağıran hesaplar: hepsi seçiliyse On, hiçbiri seçili değilse Off, arada Indeterminate. onClick yalnızca basıldığını bildirir; burada hepsini seçer, hepsi seçiliyken hepsini bırakır.

val notifications = listOf("Kargo durumu", "Kampanyalar", "Hesap güvenliği")
var chosen by remember { mutableStateOf(setOf(notifications.first())) }
val all = when (chosen.size) {
    0 -> ToggleableState.Off
    notifications.size -> ToggleableState.On
    else -> ToggleableState.Indeterminate
}
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.xs)) {
    PantrixTriStateCheckbox(
        state = all,
        onClick = { chosen = if (all == ToggleableState.On) emptySet() else notifications.toSet() },
        label = "Tüm bildirimler",
        tagKey = "all_notifications"
    )
    Column(modifier = Modifier.padding(start = PantrixTheme.spacing.xl)) {
        notifications.forEachIndexed { index, name ->
            PantrixCheckbox(
                checked = name in chosen,
                onCheckedChange = { on -> chosen = if (on) chosen + name else chosen - name },
                label = name,
                tagKey = "notification_$index"
            )
        }
    }
}

Hata

error kutuyu ve yardım metnini temanın danger rolüne çevirir ve ekran okuyucuya girdinin geçersiz olduğu söylenir. Hata sürerken yardım metni mesajın kendisidir: neyin düzeltileceğini o söyler.

Burada hatayı örnek kendisi hesaplar: kutu boşken error true'dur. Kutuyu işaretle: renk ve metin eski hâline döner.

var read by rememberSaveable { mutableStateOf(false) }
PantrixCheckbox(
    checked = read,
    onCheckedChange = { read = it },
    label = "Gizlilik bildirimini okudum",
    supportingText = if (read) "Teşekkürler" else "Devam etmek için bu kutuyu işaretleyin",
    error = !read,
    tagKey = "privacy"
)

Bir forma bağlı onay

field alan PantrixCheckbox bir formun alanına bağlıdır: değerini, hatasını ve adını alandan alır; checked ve onCheckedChange verilmez. Alanın kimliği otomasyon anahtarıdır: bu kutu Checkbox_terms'tir.

Kutuyu işaretlemeden "Gönder"e bas: Rules.mustBeTrue kuralının mesajı yardım metninin yerine geçer ve odak kutuya gider. Kutu işaretlenince mesaj kalkar; form gönderilince uygulamanın snackbar'ı haber verir.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val form = rememberFormState()
PantrixCheckbox(
    field = form.field("terms", initial = false, Rules.mustBeTrue("Devam etmek için koşulları kabul edin")),
    label = "Kullanım koşullarını kabul ediyorum",
    supportingText = "Göndermeden önce okuyabilirsiniz"
)
PantrixButton(
    text = "Gönder",
    onClick = {
        scope.launch { form.submit { snackbars?.show(message = "Form gönderildi", tagKey = "form_sent") } }
    },
    form = form,
    tagKey = "send"
)

Devre dışı ve salt okunur

enabled = false kutuyu devre dışı renklerle çizer: kutu basış almaz ve ekran okuyucuya devre dışı olduğu söylenir.

onCheckedChange = null ise kutu salt okunurdur: basış ve odak almaz, renkleri değişmez, adını ve durumunu yine söyler. Yalnızca neyin seçildiğini göstermek içindir.

PantrixCheckbox(checked = true, onCheckedChange = {}, enabled = false, label = "Devre dışı", tagKey = "off")
PantrixCheckbox(
    checked = true,
    onCheckedChange = null,
    label = "Salt okunur",
    supportingText = "Basılmaz; yalnızca durumunu gösterir",
    tagKey = "read_only"
)

Etiketsiz: bir listenin satırında

Etiketi olmayan kutu: bir tablonun ya da bir listenin satırında yazı zaten satırın içindedir. Kutunun adını ekran okuyucuya contentDescription söyler: "1042 numaralı siparişi seç".

Satırdaki yazı kutunun parçası değildir: basılan yer kutu ve çevresinde ayrılan dokunma hedefidir.

var selected by rememberSaveable { mutableStateOf(setOf("1042")) }
Column(modifier = Modifier.widthIn(max = 360.dp)) {
    listOf("1042", "1043", "1044").forEach { number ->
        Row(
            horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
            verticalAlignment = Alignment.CenterVertically
        ) {
            PantrixCheckbox(
                checked = number in selected,
                onCheckedChange = { on -> selected = if (on) selected + number else selected - number },
                contentDescription = "$number numaralı siparişi seç",
                tagKey = "order_$number"
            )
            PantrixText(text = "Sipariş $number", modifier = Modifier.weight(1f))
            PantrixText(text = "Hazırlanıyor", color = PantrixTheme.colors.textSecondary)
        }
    }
}
PantrixText(text = "${selected.size} sipariş seçili", color = PantrixTheme.colors.textSecondary)

Kendi renkleri

colors yalnızca verilen alanları değiştirir: "Hediye paketi" kutusunun dolgusu uygulamanın kendi morundadır, işareti o morun üstünde okunan renktedir; kenarı temanın renginde kalır. Kutuyu boşalt: kenarı öteki kutularınkiyle aynıdır.

Bu renkler basılabilen ve hatasız bir kutunundur. İkinci kutuya da aynı renkler verildi, ama devre dışıdır: temanın devre dışı renkleriyle çizilir. Hatalı bir kutu da temanın danger rolünde kalır.

val own = ownColors()
var giftWrap by rememberSaveable { mutableStateOf(true) }
PantrixCheckbox(
    checked = giftWrap,
    onCheckedChange = { giftWrap = it },
    label = "Hediye paketi",
    supportingText = "Kutunun dolgusu ve işareti dışarıdan verildi",
    colors = CheckboxColors(checked = own.color, checkmark = own.onColor),
    tagKey = "gift_wrap"
)
PantrixCheckbox(
    checked = true,
    onCheckedChange = {},
    enabled = false,
    label = "Hediye notu",
    supportingText = "Aynı renkler verildi; devre dışı kutu temanın renginde kalır",
    colors = CheckboxColors(checked = own.color, checkmark = own.onColor),
    tagKey = "gift_note"
)

Stil

style tek bir kutunun geometrisini değiştirir: size kutunun boyu, shape köşeleri, strokeWidth kenarın ve işaretin çizgi kalınlığıdır. Yalnızca verilen alanlar değişir; gerisi temanın ve platformun stilinden gelir.

İlk kutu 24dp'dir ve çizgisi 3dp; ikincinin köşeleri yuvarlatılmamıştır. Kutunun rengi stilin parçası değildir: o durumdan ve colors'tan gelir.

var large by rememberSaveable { mutableStateOf(true) }
var square by rememberSaveable { mutableStateOf(true) }
PantrixCheckbox(
    checked = large,
    onCheckedChange = { large = it },
    label = "Büyük kutu, kalın çizgi",
    style = CheckboxStyle(size = 24.dp, strokeWidth = 3.dp),
    tagKey = "large"
)
PantrixCheckbox(
    checked = square,
    onCheckedChange = { square = it },
    label = "Köşeli kutu",
    style = CheckboxStyle(shape = ShapeSpec.Fixed(RectangleShape)),
    tagKey = "square"
)

Kutu sonda

Kutu etiketin sonunda (controlPosition = ControlPosition.End): bir listenin seçenekleri, kutular sütunun sonunda alt alta. Satırlar sütunun genişliğini alır (Modifier.fillMaxWidth()).

var photos by rememberSaveable { mutableStateOf(true) }
var contacts by rememberSaveable { mutableStateOf(false) }
Column(Modifier.widthIn(max = 360.dp)) {
    PantrixCheckbox(
        checked = photos,
        onCheckedChange = { photos = it },
        modifier = Modifier.fillMaxWidth(),
        label = "Fotoğrafları yedekle",
        tagKey = "photos_end",
        controlPosition = ControlPosition.End
    )
    PantrixCheckbox(
        checked = contacts,
        onCheckedChange = { contacts = it },
        modifier = Modifier.fillMaxWidth(),
        label = "Kişileri yedekle",
        tagKey = "contacts_end",
        controlPosition = ControlPosition.End
    )
}

API

checked

Bir onay kutusu: işaretli ya da boş bir kutu ve o kutunun etiketi.

field

Bir formun alanına bağlı onay kutusu: değeri, hatası ve adı field'dan gelir.

CheckboxStyle

PantrixCheckbox'un kutusu: boyu, köşeleri ve kenarı.

CheckboxColors

Temanın renklerini almayan bir onay kutusu için PantrixCheckbox'un boyandığı renkler: verilen renk kullanılır, verilmeyen temanın rolünde kalır. Bir ürün yalnızca değiştirdiği renkleri verir:

Erişilebilirlik

• Ekran okuyucu. Tek bir onay kutusu okunur: adı etiketidir, durumu temanın diliyle söylenir. Etiketi olmayan kutunun adını contentDescription verir.