Filled Text Area

Dolgulu metin kutusu: birkaç satırlık metin için bir alan; bir yorum, bir mesaj ya da bir not. Dolgulu kutusu yazıldıkça uzar, sonra kayar. Etiketi kutunun içindedir; altında yardım metni ya da bir hatanın mesajı ve karakterlerinin sayacıyla birlikte gelir.

import com.pantrixui.components.inputs.filledtextarea.PantrixFilledTextArea

• Üç biçim. state alan biçim metni bir TextFieldState'te tutar. value ve onValueChange alan biçim metni çağıranda tutar; altındaki metin alanı ne kadar kaydığını söylemediği için onun kutusunda çubuk yoktur. field alan biçim değerini, hatasını ve adını formdaki alanından alır.
• Satırlar. minLines (varsayılan 3) kutunun en az, maxLines (varsayılan 8) en çok kaç satır olduğunu söyler. Alana Modifier.height verilirse satırların yerine o yükseklik geçer ve metin kutunun içinde kayar.
• Enter yeni satırdır. Klavyenin eylem tuşu her zaman yeni satırdır. Göndermek onSubmit'tir: donanım klavyesinde Ctrl+Enter ya da Cmd+Enter. Tab odağı sonraki alana taşır, sekme yazmaz.
• Yumuşak sınır. maxLength aşılabilir (TextLimit.Allow): sayaç sınırı geçince ne kadar geçtiğini sözle yazar ("12 karakter fazla"), sayaç ve çerçeve hata rengine döner. Forma bağlı alanda sınırı aşan metinle form gönderilmez. TextLimit.Block sınırı aşan değişikliği bütünüyle geri çevirir. Ekran okuyucuya sayaç yazma durunca, sınırda ve sınırın ötesinde söylenir.
• İkonlar ve temizleme düğmesi. leadingIcon, trailingIcon ve showClearButton ilk satırın hizasında durur.
• Boyutlandırma tutamacı. Masaüstünde ve web'de kutunun alt köşesindeki tutamaç kutuyu sürükleyerek uzatır ve kısaltır; telefonda tutamaç yoktur. resizable = false tutamacı kaldırır.
• Stil, renkler ve yön. style (FilledTextFieldStyle) ve colors (FilledTextFieldColors) dolgulu metin alanınınkilerdir. Sağdan sola bir düzende tutamaç alt köşenin solundadır.

Örnekler

Büyüyen bir yorum

Bir yorum alanı: boşken üç satırdır ve etiketi ilk satırın yerinde durur; alana basınca etiket metnin üstüne çıkar ve yer tutucu görünür. Yazıldıkça kutu satır satır uzar, sekiz satıra varınca metin kutunun içinde kayar. Cümle büyük harfle başlar: klavye öyle açılır.

maxLength = 500 sayacı kutunun altına yazar. Alttaki satır comment.text'i yazıldıkça okur.

val comment = rememberTextFieldState()
PantrixFilledTextArea(
    state = comment,
    modifier = Modifier.fillMaxWidth(),
    label = "Yorum",
    placeholder = "Ürün hakkında ne düşündünüz?",
    supportingText = "Yorumunuz herkese açık olur",
    maxLength = 500,
    tagKey = "filled_comment"
)
PantrixText(
    text = "Satır sayısı: ${comment.text.lines().size}",
    color = PantrixTheme.colors.textSecondary
)

Yüksekliği verilen alan

Alana verilen yükseklik alanın bütününündür: Modifier.height(200.dp). Kutu, sayacın bıraktığı yüksekliği doldurur; satırlar yerine o yükseklik geçer ve sığmayan metin kutunun içinde kayar.

İkinci alana heightIn verildi: tutamaç kutuyu yalnızca verilen aralıkta sürükler. Sabit bir yükseklikte tutamacın oynatacağı yer yoktur.

PantrixFilledTextArea(
    state = rememberTextFieldState(DELIVERY_NOTES),
    modifier = Modifier.fillMaxWidth().height(200.dp),
    label = "Teslimat talimatı",
    showClearButton = true,
    maxLength = 400,
    tagKey = "filled_instructions"
)
PantrixFilledTextArea(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth().heightIn(max = 320.dp),
    label = "Ek not",
    supportingText = "Tutamaçla en çok 320dp'ye kadar uzar",
    tagKey = "filled_extra_note"
)

private const val DELIVERY_NOTES =
    "Apartmanın arka kapısını kullanın; ön kapının zili çalışmıyor. Asansör cuma günleri bakımda olur, merdivenden " +
        "üçüncü kata çıkın. Evde yoksam paketi kapıcıya bırakabilirsiniz, adı Hasan Bey. Teşekkürler!"

Yumuşak sınır ve sayaç

Sınır yumuşaktır: metin 140 karakteri geçebilir. Geçince sayaç ne kadar geçtiğini sözle yazar ("6 karakter fazla"), sayaç ve çerçeve hata rengine döner ve alan ekran okuyucuya "Çok uzun" hatasıyla söylenir. Uzun bir metni yapıştır: bütünüyle alınır, istediğin yerden kısaltabilirsin.

Ekran okuyucu açıkken yaz ve dur: sayaç, yazma durduktan sonra bir kez söylenir.

PantrixFilledTextArea(
    state = rememberTextFieldState(ALMOST_A_POST),
    modifier = Modifier.fillMaxWidth(),
    label = "Gönderi",
    supportingText = "En çok 140 karakter",
    minLines = 2,
    maxLength = 140,
    // Varsayılan: metin sınırı geçebilir.
    overLimit = TextLimit.Allow,
    tagKey = "filled_post"
)

private const val ALMOST_A_POST =
    "Yeni sürüm yayında! Karanlık tema, daha hızlı arama ve çevrimdışı mod geldi. Görüşlerinizi bekliyoruz; " +
        "yorumlarınız yol gösterir."

Aşılamayan sınır, metni String olan alan

overLimit = TextLimit.Block sınırı aşacak değişikliği bütünüyle geri çevirir: yazı sınırda durur, sığmayan bir yapıştırma hiç alınmaz.

Bu alan metnini String olarak tutar: value ve onValueChange. Sınırı aşan değişiklik onValueChange'e hiç sorulmaz. Altındaki metin alanı ne kadar kaydığını söylemediği için bu biçimin kutusunda çubuk yoktur.

var reason by remember { mutableStateOf("") }
PantrixFilledTextArea(
    value = reason,
    onValueChange = { reason = it },
    modifier = Modifier.fillMaxWidth(),
    label = "İade nedeni",
    placeholder = "Kısaca yazın",
    minLines = 2,
    maxLines = 4,
    maxLength = 80,
    overLimit = TextLimit.Block,
    tagKey = "filled_return_reason"
)

Ctrl/Cmd+Enter ile göndermek

onSubmit donanım klavyesinde Ctrl+Enter ya da Cmd+Enter ile çağrılır; Enter tek başına yeni satır açar. Yazılım klavyesinde bu tuşlar olmadığı için yanında bir "Gönder" düğmesi de var. Bir mesaj yaz ve Ctrl+Enter'a bas: uygulamanın snackbar'ı mesajın gönderildiğini söyler ve alan boşalır.

Gönderme olay olarak bildirilir (submit); yazılan metin hiç bildirilmez.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val message = rememberTextFieldState()
val send = {
    if (message.text.isNotBlank()) {
        scope.launch { snackbars?.show(message = "Mesaj gönderildi", tagKey = "filled_message_sent") }
        message.clearText()
    }
}
PantrixFilledTextArea(
    state = message,
    modifier = Modifier.fillMaxWidth(),
    label = "Mesaj",
    placeholder = "Ctrl+Enter ya da Cmd+Enter ile gönderin",
    minLines = 2,
    maxLines = 6,
    onSubmit = send,
    tagKey = "filled_message"
)
PantrixButton(text = "Gönder", onClick = send, tagKey = "filled_send_message")

Forma bağlı alan

field alan PantrixFilledTextArea değerini, hatasını ve adını formdaki alanından alır: tagKey verilmez, alanın id'si otomasyon anahtarıdır (FilledTextArea_<id>). form verilince Ctrl+Enter ya da Cmd+Enter formu "Kaydet" düğmesi üzerinden gönderir.

Sınır yumuşaktır, ama form sınırı aşan metinle gönderilmez: alan "Çok uzun" hatasına düşer, sayaç ne kadar fazla olduğunu söyler ve odak alana gider. Alanı boş bırakıp ya da 160 karakteri geçip "Kaydet"e bas.

val snackbars = LocalPantrixSnackbars.current
val scope = rememberCoroutineScope()
val form = rememberFormState()
PantrixFilledTextArea(
    field = form.field("filled_bio", initial = "", Rules.notBlank("Kendinizi birkaç cümleyle anlatın")),
    modifier = Modifier.fillMaxWidth(),
    form = form,
    label = "Hakkımda",
    supportingText = "Profilinizde görünür",
    maxLength = 160
)
PantrixButton(
    text = "Kaydet",
    onClick = {
        scope.launch { form.submit { snackbars?.show(message = "Profil kaydedildi", tagKey = "filled_bio_saved") } }
    },
    form = form,
    tagKey = "filled_save_bio"
)

Devre dışı ve salt okunur

enabled = false alanı temanın devre dışı renkleriyle çizer: alan odak almaz, yazılamaz, tutamacı yoktur ve ekran okuyucuya devre dışı olduğu söylenir.

readOnly = true yalnızca değiştirmeyi kapatır: alan odaklanır, metni seçilir, kopyalanır ve kaydırılır; tutamaçla uzatılıp okunabilir.

PantrixFilledTextArea(
    state = rememberTextFieldState("Siparişiniz kargoya verildi; not eklenemez."),
    modifier = Modifier.fillMaxWidth(),
    enabled = false,
    label = "Kargo notu",
    minLines = 2,
    tagKey = "filled_shipping_note"
)
PantrixFilledTextArea(
    state = rememberTextFieldState(RETURN_POLICY),
    modifier = Modifier.fillMaxWidth(),
    readOnly = true,
    label = "İade koşulları",
    maxLines = 4,
    tagKey = "filled_return_policy"
)

private const val RETURN_POLICY =
    "Ürünü teslim aldığınız günden itibaren 14 gün içinde iade edebilirsiniz. Ürün kullanılmamış, etiketleri " +
        "sökülmemiş ve orijinal ambalajında olmalıdır. İade kargo ücreti tarafımızca karşılanır. Ücretiniz, ürün " +
        "depomuza ulaştıktan sonra 3 iş günü içinde ödeme yaptığınız karta geri yatırılır."

Kendi renkleri ve stili

colors ve style dolgulu metin alanınınkilerdir: FilledTextFieldColors ve FilledTextFieldStyle. Verilen renkler kullanılır, verilmeyenler temadaki rolünde kalır. İlk alanın odaktaki çerçevesi, imleci ve kaydırma çubuğu uygulamanın kendi morudur; tutamaç ve temizleme düğmesi ikon rengini alır.

İkinci alanın stili kutuyu ShapeRole.Large ile daha yuvarlak çizer ve iç boşluğunu büyütür.

val own = ownColors()
PantrixFilledTextArea(
    state = rememberTextFieldState(DELIVERY_NOTES),
    modifier = Modifier.fillMaxWidth(),
    label = "Not",
    showClearButton = true,
    maxLines = 4,
    colors = FilledTextFieldColors(
        focusedOutline = own.color,
        cursor = own.color,
        icon = own.color,
        scrollBar = own.color
    ),
    tagKey = "filled_own_colors"
)
PantrixFilledTextArea(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Açıklama",
    style = FilledTextFieldStyle(shape = ShapeRole.Large, horizontalPadding = 20.dp, verticalPadding = 16.dp),
    tagKey = "filled_own_style"
)

private const val DELIVERY_NOTES =
    "Apartmanın arka kapısını kullanın; ön kapının zili çalışmıyor. Asansör cuma günleri bakımda olur, merdivenden " +
        "üçüncü kata çıkın. Evde yoksam paketi kapıcıya bırakabilirsiniz, adı Hasan Bey. Teşekkürler!"

Boyutlandırma tutamacı

Masaüstünde ve web'de kutunun alt köşesindeki tutamacı sürükle: kutu uzar ya da kısalır, işaretçi yukarı-aşağı boyutlandırma okuna döner. Sürüklenen kutu o yükseklikte kalır, metniyle büyümez; en az satırından da kısa olmaz. Telefonda tutamaç yoktur.

İkinci alanda resizable = false: tutamaç yok, kutu yalnızca metniyle büyür.

PantrixFilledTextArea(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Toplantı notları",
    supportingText = "Alt köşedeki tutamaçla uzatın",
    tagKey = "filled_meeting_notes"
)
PantrixFilledTextArea(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Kısa not",
    minLines = 2,
    maxLines = 4,
    resizable = false,
    tagKey = "filled_short_note"
)

Sağdan sola

Sağdan sola bir düzende ikon ve temizleme düğmesi yer değiştirir, tutamaç alt köşenin soluna geçer ve kaydırma çubuğu kutunun solunda durur: satırın sonu oradadır. Her paragraf yönünü kendi ilk harfinden alır.

CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
    PantrixFilledTextArea(
        state = rememberTextFieldState(ARABIC_NOTE),
        modifier = Modifier.fillMaxWidth(),
        label = "ملاحظة",
        leadingIcon = {
            PantrixIcon(
                imageVector = PantrixIcons.Person,
                contentDescription = null,
                size = PantrixTheme.style(FilledTextFieldStyle).iconSize
            )
        },
        showClearButton = true,
        maxLines = 3,
        maxLength = 200,
        tagKey = "filled_arabic_note"
    )
}

private const val ARABIC_NOTE = "يرجى ترك الطرد عند البواب إذا لم أكن في المنزل. شكراً لكم!"

API

state

Dolgulu metin kutusu: birkaç satırlık metin için bir alan; bir yorum, bir mesaj ya da bir not. Dolgulu kutusu yazıldıkça uzar, sonra kayar. Etiketi kutunun içindedir; altında yardım metni ya da bir hatanın mesajı ve karakterlerinin sayacıyla birlikte gelir.

value

Metni, çağıranın tuttuğu bir String olan metin kutusu: gösterdiği value'dur ve kullanıcının her değişikliği onValueChange'e sorulur.

field

Bir formun alanına bağlı metin kutusu: 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: