Switch Button

Bir anahtar: açık ya da kapalı olan ve hemen uygulanan bir ayar ile neyin anahtarı olduğunu söyleyen etiketi.

import com.pantrixui.components.elements.switchbutton.PantrixSwitchButton

• Tek hedef. İz, etiket ve yardım metni tek bir hedeftir: yazıya basmak da anahtarı çevirir. İz ne kadar küçük olursa olsun satır, platformun dokunma hedefi kadar yer tutar.
• Sürüklenen başparmak. Başparmak izin ortasını geçip bırakılırsa anahtar açılır, geçmeden bırakılırsa kapanır; başladığı yanda bırakılırsa yerine kayar ve hiçbir şey bildirilmez. Sürükleme okuma yönüyle gider: sağdan sola düzende açık uç soldadır.
• Platform. Android'de başparmak kapalıdan açığa büyür, tutulurken daha da büyür. iOS'ta, masaüstünde ve web'de tek boydadır; iOS'ta her zaman beyazdır, altında bir gölge vardır ve izin kenarı yoktur.
• Hata. error yalnızca yardım metnini temanın danger rolüne çevirir ve ekran okuyucuya söylenir. Anahtarın kendisi renklerini korur.
• Form. field alan PantrixSwitchButton 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 anahtar salt okunurdur: basış, sürükleme ve odak almaz, adını ve durumunu yine söyler. enabled = false anahtarı devre dışı renklerle çizer.
• Kendi renkleri. SwitchColors açık ve kapalı izin, açık ve kapalı başparmağın ve kenarın rengini ayrı ayrı alır; verilmeyen temanın rolünde kalır. Devre dışı anahtar, renk verilse de temanın renkleriyle çizilir.
• Stil. SwitchStyle izin enini ve boyunu, başparmağın kapalı, açık ve basılı hâldeki boyunu, kenarın kalınlığını ve başparmağın gölgesini verir. Etiketin yazısını labelStyle verir; iz o yazının ilk satırında durur.
• Anahtar sonda. controlPosition = ControlPosition.End izi etiketin sonuna koyar, bir ayarlar ekranındaki gibi: satıra bir genişlik verilince iz onun sonunda durur ve etiket kalan yerde sarar.
• Hareket. Başparmak kayar ve iz onunla birlikte primary rengine döner. 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. İz, etiket ve yardım metni tek bir hedeftir: yazıya basmak da anahtarı çevirir.

Başparmağı sürükle: izin ortasını geçip bırakılırsa anahtar döner. Ortayı geçmeden bırakılırsa yerine kayar ve hiçbir şey bildirilmez.

var notifications by rememberSaveable { mutableStateOf(true) }
PantrixSwitchButton(
    checked = notifications,
    onCheckedChange = { notifications = it },
    label = "Bildirimler",
    supportingText = "Sipariş güncellemeleri ve hatırlatmalar",
    tagKey = "notifications"
)

Etiketsiz: uygulamanın kendi satırında

Sözcükleri başta, anahtarı sonda olan bir satır uygulamanın kendi satırıdır: yazı ayrı bir PantrixText'tir, anahtar etiketsizdir. Anahtarın adını ekran okuyucuya contentDescription söyler.

Bu düzende yazı hedefin parçası değildir: basılan yer anahtar ve çevresinde ayrılan dokunma hedefidir.

var wifi by rememberSaveable { mutableStateOf(false) }
Row(modifier = Modifier.widthIn(max = 360.dp), verticalAlignment = Alignment.CenterVertically) {
    PantrixText(text = "Wi-Fi", modifier = Modifier.weight(1f))
    PantrixSwitchButton(
        checked = wifi,
        onCheckedChange = { wifi = it },
        contentDescription = "Wi-Fi",
        tagKey = "wifi"
    )
}

Hata

error yardım metnini temanın danger rolüne çevirir ve ekran okuyucuya girdinin geçersiz olduğu söylenir. Anahtarın kendisi renklerini korur: anahtar bir ayardır, yanlış olabilen bir cevap onay kutusunun işidir.

Burada hatayı örnek kendisi hesaplar: anahtar kapalıyken error true'dur. Anahtarı aç: metin eski rengine döner.

var location by rememberSaveable { mutableStateOf(false) }
PantrixSwitchButton(
    checked = location,
    onCheckedChange = { location = it },
    label = "Konum",
    supportingText = if (location) "Yakınınızdaki mağazalar gösterilir" else "Konum kapalıyken mağaza aranamaz",
    error = !location,
    tagKey = "location"
)

Bir forma bağlı ayar

field alan PantrixSwitchButton 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: test etiketi SwitchButton_two_step olur.

İki adımlı giriş kapalıyken "Kaydet"e bas: Rules.mustBeTrue kuralının mesajı yardım metninin yerine geçer ve odak anahtara gider. Anahtarı açıp yeniden dene: uygulamanın snackbar'ı ayarların kaydedildiğini söyler.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val form = rememberFormState()
PantrixSwitchButton(
    field = form.field("two_step", initial = false, Rules.mustBeTrue("Kuruluşunuz bunu şart koşuyor")),
    label = "İki adımlı giriş",
    supportingText = "Her girişte kısa mesajla bir kod gelir"
)
PantrixButton(
    text = "Kaydet",
    onClick = {
        scope.launch { form.submit { snackbars?.show(message = "Ayarlar kaydedildi", tagKey = "saved") } }
    },
    form = form,
    tagKey = "save_settings"
)

Devre dışı ve salt okunur

enabled = false anahtarı devre dışı renklerle çizer: basış ve sürükleme almaz, ekran okuyucuya devre dışı olduğu söylenir. Açık mı kapalı mı olduğunu başparmağın yeri yine gösterir.

onCheckedChange = null ise anahtar salt okunurdur: basış, sürükleme ve odak almaz, renkleri değişmez, adını ve durumunu yine söyler.

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

Kendi renkleri

colors yalnızca verilen alanları değiştirir: burada açık izin ve açık başparmağın rengi verildi. Anahtarı kapat: iz, başparmak ve kenar temanın renklerindedir. Arada, başparmak kaydıkça iz ve başparmak bir renkten ötekine döner.

Uygulamanın moru temanın hiçbir rolünde yok; böyle bir izin üstündeki başparmağın rengini de çağıran verir. Devre dışı bir anahtar, renk verilse de temanın renkleriyle çizilir.

val own = ownColors()
var batterySaver by rememberSaveable { mutableStateOf(true) }
PantrixSwitchButton(
    checked = batterySaver,
    onCheckedChange = { batterySaver = it },
    label = "Pil tasarrufu",
    supportingText = "Açıkken izin ve başparmağın rengi dışarıdan verildi; kapalıyken temanınkiler",
    colors = SwitchColors(checkedTrack = own.color, checkedThumb = own.onColor),
    tagKey = "battery_saver"
)

Stil

style tek bir anahtarın geometrisini değiştirir. Yalnızca verilen alanlar değişir; gerisi temanın ve platformun stilinden gelir.

İlk anahtara iOS stilinin üç alanı verildi ve her platformda öyle çizilir: başparmak hep beyazdır (thumbAlwaysLight), altında bir gölge vardır (thumbShadow) ve kapalı izin kenarı yoktur (strokeWidth = 0.dp). İkincisi daha büyük bir izdir: izin eni ve boyu ile başparmağın üç hâldeki boyu birlikte verildi. Etiketi de labelStyle ile temanın callout'uyla, kalın yazıldı; iz o yazının ilk satırında durur.

var lightThumb by rememberSaveable { mutableStateOf(true) }
var largeTrack by rememberSaveable { mutableStateOf(false) }
PantrixSwitchButton(
    checked = lightThumb,
    onCheckedChange = { lightThumb = it },
    label = "Beyaz başparmak, gölgeli ve kenarsız",
    style = SwitchStyle(strokeWidth = 0.dp, thumbAlwaysLight = true, thumbShadow = 2.dp),
    tagKey = "light_thumb"
)
PantrixSwitchButton(
    checked = largeTrack,
    onCheckedChange = { largeTrack = it },
    label = "Büyük iz",
    style = SwitchStyle(
        trackWidth = 64.dp,
        trackHeight = 36.dp,
        thumbSizeOff = 28.dp,
        thumbSizeOn = 28.dp,
        thumbSizePressed = 28.dp
    ),
    tagKey = "large_track",
    labelStyle = PantrixTheme.typography.callout.copy(fontWeight = FontWeight.Bold)
)

Anahtar sonda

Bir ayarlar ekranı: iz etiketin sonunda (controlPosition = ControlPosition.End). Satırlar sütunun genişliğini alır (Modifier.fillMaxWidth()), izler alt alta, sütunun sonunda durur; uzun bir etiket kalan yerde sarar.

var wifi by rememberSaveable { mutableStateOf(true) }
var saver by rememberSaveable { mutableStateOf(false) }
Column(Modifier.widthIn(max = 360.dp)) {
    PantrixSwitchButton(
        checked = wifi,
        onCheckedChange = { wifi = it },
        modifier = Modifier.fillMaxWidth(),
        label = "Wi-Fi",
        tagKey = "wifi_end",
        controlPosition = ControlPosition.End
    )
    PantrixSwitchButton(
        checked = saver,
        onCheckedChange = { saver = it },
        modifier = Modifier.fillMaxWidth(),
        label = "Pil tasarrufu",
        supportingText = "Arka plandaki yenilemeleri ve bazı görsel etkileri kısar",
        tagKey = "saver_end",
        controlPosition = ControlPosition.End
    )
}

API

checked

Bir anahtar: açık ya da kapalı olan ve hemen uygulanan bir ayar ile neyin anahtarı olduğunu söyleyen etiketi.

field

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

SwitchStyle

PantrixSwitchButton'ın izi ve başparmağı: her birinin ne kadar büyük olduğu, izin kenarı ve başparmağın görünüşü.

SwitchColors

Temanın renklerini almayan bir anahtarda PantrixSwitchButton'ın boyandığı renkler: verilen renk kullanılır, verilmeyen temanın rolünde kalır.

Erişilebilirlik

• Ekran okuyucu. Tek bir anahtar okunur: adı etiketidir, açık mı kapalı mı olduğu temanın diliyle söylenir. Etiketi olmayan anahtarın adını contentDescription verir.