Filled Text Field

Etiketi kutusunun içinde duran metin alanı: etiket yazının geleceği yerde durur, alan odağı aldığında ya da bir metin tuttuğunda yazının üstündeki kendi satırına çıkar.

import com.pantrixui.components.inputs.filledtextfield.PantrixFilledTextField

• Kutunun içindeki etiket. label dinlenirken yazının yerinde ve yazının boyutundadır; odakta ya da bir metin varken küçülür ve kendi satırına çıkar. Etiketi olmayan alanda metin kutunun ortasında durur.
• Yer tutucu. placeholder etiket yerinden çıkmışken görünür: alan boş ve odaktayken. Etiketi olmayan alanda alan boş olduğu sürece görünür.
• Dolgu ve çerçeve. Kutu dinlenirken dolgulu ve çerçevesizdir. Odakta ve hatada dolgu yüzey rengine döner ve kutu çerçevelenir; fare üstündeyken de bir çerçeve alır. Devre dışı alanın dolgusu yoktur.
• Yardım metni ve hata. supportingText kutunun altında yazar. error çerçeveyi, yardım metnini ve imleci danger rolüne çevirir ve ekran okuyucuya bildirilir; etiket kendi renginde kalır.
• Birkaç satır. lineLimits = TextFieldLineLimits.MultiLine(...) ile kutu en az satır sayısı kadar boyludur, en çok satır sayısına kadar uzar ve oradan sonra metni içinde kaydırır: sonundaki çubuk ne kadar kaydığını gösterir.
• İkonlar, temizleme düğmesi, sayaç. leadingIcon etiketin ve metnin önünde, trailingIcon arkasında durur. showClearButton alanı boşaltan düğmeyi gösterir; maxLength uzunluğu sınırlar ve sayacı yazar.
• Üç biçim. state alan biçimde metin durumdan okunur. value ve onValueChange alan biçim metni çağıranda tutar; onda kaydırma çubuğu yoktur. field alan biçim değerini, hatasını ve adını formdaki alanından alır.
• Stil ve renkler. style (FilledTextFieldStyle) kutunun şeklini ve ölçülerini, colors (FilledTextFieldColors) renklerini değiştirir: yalnızca verilen alanlar. Devre dışı alan ne verilirse verilsin dolgusuzdur ve temanın devre dışı yazı rengindedir.
• Yazının boyu. Yazılan yazı, dinlenen etiket ve yer tutucu stilin textRole'üyle yazılır: Android'de ve iOS'ta body (16sp), masaüstünde ve web'de label (14sp).
• Otomasyon. tagKey ile alan FilledTextField_<tagKey>, temizleme düğmesi FilledTextFieldClear_<tagKey> adını alır. Alan odağı aldığını ve temizlendiğini bildirir, metnini asla.

Örnekler

En yalın hâli

En az yazılan: bir TextFieldState ve bir etiket. Etiket kutunun içindedir: alan boşken ve odakta değilken yazının yerinde durur. Alana bas: etiket yazının üstündeki kendi satırına çıkar ve yazıya yer açar. Alan boş bırakılıp çıkılırsa yerine döner.

Yazılan metin durumdan okunur: alttaki satır city.text'i yazıldıkça gösterir.

val city = rememberTextFieldState()
PantrixFilledTextField(
    state = city,
    modifier = Modifier.fillMaxWidth(),
    label = "Şehir",
    tagKey = "city"
)
PantrixText(
    text = if (city.text.isEmpty()) "Henüz bir şehir yazılmadı" else "Yazılan: ${city.text}",
    color = PantrixTheme.colors.textSecondary
)

Etiket ve yer tutucu

İlk alan boş: etiket yazının yerinde durur ve yer tutucu görünmez. Alana bas: etiket yukarı çıkar, yer tutucu onun bıraktığı yerde belirir. Yer tutucu bir etiket değildir; ne yazılacağına bir örnek verir.

İkinci alanda bir metin var, etiketi bu yüzden hep yukarıdadır. Üçüncünün etiketi yok: metin kutunun ortasında durur, yer tutucu alan boş olduğu sürece görünür ve alanın adını ekran okuyucuya contentDescription söyler.

PantrixFilledTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Web sitesi",
    placeholder = "https://ornek.com",
    tagKey = "website"
)
PantrixFilledTextField(
    state = rememberTextFieldState("Kadıköy"),
    modifier = Modifier.fillMaxWidth(),
    label = "İlçe",
    tagKey = "district"
)
PantrixFilledTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    placeholder = "Mahalle ara",
    contentDescription = "Mahalle ara",
    tagKey = "neighbourhood"
)

Yardım metni ve hata

supportingText kutunun altında durur. error = true kutuyu danger rengiyle çerçeveler; yardım metni ve imleç de o renge döner ve mesaj ekran okuyucuya hata olarak bildirilir. Etiket kendi renginde kalır: hatayı çerçeve ve mesaj söyler. Dolgu, odakta olduğu gibi, yüzey rengine döner.

Alan hatada başlar. Boşluğu sil: çerçeve hatanın renginden çıkar ve hata mesajının yerini yardım metni alır.

val username = rememberTextFieldState("ayşe yılmaz")
val hasSpace = username.text.contains(' ')
PantrixFilledTextField(
    state = username,
    modifier = Modifier.fillMaxWidth(),
    label = "Kullanıcı adı",
    supportingText = if (hasSpace) "Kullanıcı adında boşluk olamaz" else "Profilinizin adresinde görünür",
    error = hasSpace,
    showClearButton = true,
    tagKey = "username"
)

İkon, temizleme düğmesi ve eylem tuşu

leadingIcon etiketin ve metnin önünde durur. Yuva içine konanı boyutlandırmaz; ikon, dolgulu alanın stilindeki boyutu alır: PantrixTheme.style(FilledTextFieldStyle).iconSize. showClearButton alan boş değilken onu boşaltan düğmeyi gösterir: düğme imleci alanda bırakır ve Tab durağı değildir.

keyboardOptions klavyenin eylem tuşunu "Ara" yapar; onKeyboardAction o tuşa basılınca çağrılır. Bir şey yazıp klavyenin "Ara" tuşuna ya da Enter'a bas: uygulamanın snackbar'ı arananı söyler.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val query = rememberTextFieldState()
PantrixFilledTextField(
    state = query,
    modifier = Modifier.fillMaxWidth(),
    label = "Şube ara",
    leadingIcon = {
        PantrixIcon(
            imageVector = PantrixIcons.Search,
            contentDescription = null,
            size = PantrixTheme.style(FilledTextFieldStyle).iconSize
        )
    },
    showClearButton = true,
    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
    onKeyboardAction = { scope.launch { snackbars?.show(message = "Aranan şube: ${query.text}") } },
    tagKey = "branch"
)

Giriş ve çıkış dönüşümleri

inputTransformation rakam olmayan bir şey içeren değişikliği bütünüyle geri çevirir; maxLength = 4 onun geçirdiğine uygulanır. outputTransformation ay ile yılın arasına bir eğik çizgi çizer: çizgi metne girmez.

"1228" yaz: kutuda "12/28" görünür, alttaki satırın okuduğu expiry.text ise dört rakamdır.

val expiry = rememberTextFieldState()
PantrixFilledTextField(
    state = expiry,
    modifier = Modifier.fillMaxWidth(),
    label = "Son kullanma tarihi",
    placeholder = "AA/YY",
    maxLength = 4,
    showCharacterCount = false,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    inputTransformation = DigitsOnly,
    outputTransformation = MonthSlashYear,
    contentType = ContentType.CreditCardExpirationDate,
    tagKey = "expiry"
)
PantrixText(text = "Tutulan metin: \"${expiry.text}\"", color = PantrixTheme.colors.textSecondary)

private val DigitsOnly = InputTransformation {
    if (!asCharSequence().all(Char::isDigit)) revertAllChanges()
}

private val MonthSlashYear = OutputTransformation {
    if (length > 2) insert(2, "/")
}

Bir para gönderme formu

Bir para gönderme formu, üç biçim bir arada. İlk iki alan forma bağlıdır: değerini, hatasını ve adını formdaki alanından alır; boş bırakılıp çıkılırsa kuralın mesajı kutunun altında görünür ve kutu hata rengiyle çerçevelenir. Tutar alanı metnini bir String olarak tutar ve rakam olmayanı onValueChange içinde geri çevirir: geri çevrilen değişiklik ekranda görünmez. Sınırı yedi rakamdır; sayacı showCharacterCount = false ile gizlenmiştir.

Açıklama üç satır yüksekliğindedir: sığmayan metin kutunun içinde kayar ve sonundaki çubuk ne kadar kaydığını gösterir. Metni rememberTextFieldState ile kurulan durumdadır ve gönderilirken oradan okunur: bildirim onu note.text ile alır.

İlk üç alanda klavyenin "İleri" tuşu odağı sonraki alana taşır. Alanları boş bırakıp "Gönder"e bas: form gönderilmez, hatalı ilk alan odağı alır.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val form = rememberFormState()
var amount by rememberSaveable { mutableStateOf("") }
val note = rememberTextFieldState()
PantrixFilledTextField(
    field = form.field("recipient", initial = "", Rules.notBlank("Alıcının adını yazın")),
    modifier = Modifier.fillMaxWidth(),
    form = form,
    label = "Alıcı adı soyadı",
    keyboardOptions = KeyboardOptions(capitalization = KeyboardCapitalization.Words, imeAction = ImeAction.Next)
)
PantrixFilledTextField(
    field = form.field("iban", initial = "", Rules.notBlank("IBAN'ı yazın")),
    modifier = Modifier.fillMaxWidth(),
    form = form,
    label = "IBAN",
    placeholder = "TR00 0000 0000 0000 0000 0000 00",
    showClearButton = true,
    keyboardOptions = KeyboardOptions(
        capitalization = KeyboardCapitalization.Characters,
        imeAction = ImeAction.Next
    )
)
PantrixFilledTextField(
    value = amount,
    onValueChange = { if (it.all(Char::isDigit)) amount = it },
    modifier = Modifier.fillMaxWidth(),
    label = "Tutar",
    placeholder = "0",
    supportingText = "Yalnızca rakam",
    trailingIcon = { PantrixText(text = "TL") },
    maxLength = 7,
    showCharacterCount = false,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number, imeAction = ImeAction.Next),
    tagKey = "amount"
)
PantrixFilledTextField(
    state = note,
    modifier = Modifier.fillMaxWidth(),
    label = "Açıklama",
    placeholder = "Kira, aidat, borç…",
    maxLength = 140,
    lineLimits = TextFieldLineLimits.MultiLine(minHeightInLines = 3, maxHeightInLines = 3),
    tagKey = "transfer_note"
)
PantrixButton(
    text = "Gönder",
    onClick = {
        scope.launch {
            form.submit {
                // Açıklama, kullanılacağı anda durumdan okunur.
                val sent = if (note.text.isBlank()) "Para gönderildi" else "Para gönderildi: ${note.text}"
                snackbars?.show(message = sent, tagKey = "transfer_sent")
            }
        }
    },
    form = form,
    tagKey = "send_transfer"
)

Yüksekliği verilen alan

Alana verilen yükseklik alanın bütününündür: Modifier.height(140.dp). Kutu, altındaki yardım metninin bıraktığı yüksekliği alır; etiket ve metin kutunun içinde kalır, sığmayan metin orada kayar ve sonundaki çubuk ne kadar kaydığını gösterir.

PantrixFilledTextField(
    state = rememberTextFieldState(COMPLAINT),
    modifier = Modifier.fillMaxWidth().height(140.dp),
    label = "Şikâyetiniz",
    supportingText = "Alanın yüksekliği sabit: metin kutunun içinde kayar",
    lineLimits = TextFieldLineLimits.MultiLine(),
    tagKey = "complaint"
)

private const val COMPLAINT = "Kartımdan aynı ödeme iki kez çekildi.\n" +
    "İlki ayın üçünde, ikincisi dördünde.\n" +
    "İkisi de aynı tutarda ve aynı işyerinden.\n" +
    "Dekontların ikisi de elimde.\n" +
    "Birinin iade edilmesini istiyorum."

Devre dışı ve salt okunur

enabled = false alanın dolgusunu kaldırır: devre dışı alan, üstünde durduğu zeminde temanın devre dışı yazı rengiyle çizilir, odak almaz ve ekran okuyucuya devre dışı olduğu söylenir. colors ne verirse versin böyledir: devre dışı bir alan uygulamanın her yerinde aynı görünür.

readOnly = true alanın dolgusu ve renkleri yerindedir: alan odaklanır, metni seçilir ve kopyalanır, yalnızca değiştirilemez.

PantrixFilledTextField(
    state = rememberTextFieldState("Vadesiz TL - 1042"),
    modifier = Modifier.fillMaxWidth(),
    enabled = false,
    label = "Gönderen hesap",
    supportingText = "Bu işlemde değiştirilemez",
    tagKey = "account"
)
PantrixFilledTextField(
    state = rememberTextFieldState("TR33 0006 1005 1978 6457 8413 26"),
    modifier = Modifier.fillMaxWidth(),
    readOnly = true,
    label = "IBAN'ınız",
    supportingText = "Salt okunur: seçilip kopyalanabilir",
    tagKey = "own_iban"
)

Kendi renkleri

colors ile verilen renkler kullanılır, verilmeyenler temadaki rolünde kalır. İlk alanın renkleri temanın info rolünden alınır. Dinlenirken dolgu rolün yumuşak tonudur; etiket, yazı ve ikon o tonun üstünde okunan renktedir. Odakta ve fare üstündeyken çerçeve rolün kendi rengidir. Odaktaki dolgu, yer tutucu, yardım metni ve hata rengi verilmemiştir: temadaki hâlleriyle kalır.

İkinci alan aynısını uygulamanın kendi moruyla yapar: temanın hiçbir rolünde olmayan bir renk. Alana bas: çerçeve ve imleç mordur, dolgu odakta temanın yüzey rengine döner.

val info = PantrixTheme.colors.info
PantrixFilledTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Referans kodu",
    placeholder = "PX-0000",
    supportingText = "Varsa, sizi davet eden kişinin kodu",
    showClearButton = true,
    colors = FilledTextFieldColors(
        container = info.container,
        hoveredOutline = info.color,
        focusedOutline = info.color,
        text = info.onContainer,
        label = info.onContainer,
        icon = info.onContainer,
        cursor = info.color
    ),
    tagKey = "reference"
)
val own = ownColors()
PantrixFilledTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Kampanya kodu",
    colors = FilledTextFieldColors(
        container = own.container,
        hoveredOutline = own.color,
        focusedOutline = own.color,
        text = own.onContainer,
        label = own.onContainer,
        cursor = own.color
    ),
    tagKey = "own_colors"
)

Kendi stili

style bu çağrının kendi stilidir: yalnızca verdiği alanlar değişir, gerisi temanın ve platformun stilinden gelir.

İlk alanın kutusu tam yuvarlaktır: FilledTextFieldStyle(shape = ShapeRole.Full). İkincinin köşeleri küçüktür ve borderWidth = 2.dp ile çerçevesi kalındır. Çerçeve odakta, hatada ve fare üstündeyken görünür; dinlenirken kutunun çerçevesi yoktur.

PantrixFilledTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Tam yuvarlak kutu",
    style = FilledTextFieldStyle(shape = ShapeRole.Full),
    tagKey = "pill"
)
PantrixFilledTextField(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Küçük köşeler, kalın çerçeve",
    style = FilledTextFieldStyle(shape = ShapeRole.Small, borderWidth = 2.dp),
    tagKey = "small_corners"
)

API

state

Etiketi kutusunun içinde duran metin alanı: etiket yazının geleceği yerde durur, alan odağı aldığında ya da bir metin tuttuğunda yazının üstündeki kendi satırına çıkar.

value

Metni, çağıranın tuttuğu bir String olan dolgulu metin alanı: alan value'yu gösterir ve kullanıcının her değişikliğini onValueChange'e sorar.

field

Bir formun alanına bağlı dolgulu metin alanı: metni, hatası ve adı field'dan gelir.

FilledTextFieldStyle

PantrixFilledTextField'ın kutusu: şekli, en az yüksekliği ve genişliği, içindekilerin çevresindeki boşluk, ikonları ve çerçevesi.

FilledTextFieldColors

Temanın renklerini almayan bir alan için PantrixFilledTextField'ın boyandığı renkler: verilen renk kullanılır, verilmeyen temadaki rolünde kalır. Bir ürün yalnızca değiştirdiği renkleri verir, başkasını vermez:

Erişilebilirlik

• Klavye ve dönüşümler. keyboardOptions, onKeyboardAction, inputTransformation, outputTransformation ve contentType metin alanınınkilerle aynıdır.