Text Area

Metin kutusu: birkaç satırlık metin için bir alan; bir yorum, bir mesaj ya da bir not. Yazıldıkça uzar, sonra kayar. Üstünde bir etiket, altında yardım metni ya da bir hatanın mesajı ve karakterlerinin sayacıyla birlikte gelir.

import com.pantrixui.components.inputs.textarea.PantrixTextArea

• Üç 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: Android'de başka bir eylem satır tuşunun yerini alırdı. Göndermek onSubmit'tir: donanım klavyesinde Ctrl+Enter ya da Cmd+Enter. Yazılım klavyesinde bu tuşlar yoktur; ekran bir gönder düğmesi de verir. 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 kenarlık hata rengine döner. Sığmayan bir yapıştırma bütünüyle alınır, kullanıcı dilediği yerden kısaltır. Forma bağlı alanda sınırı aşan metinle form gönderilmez. TextLimit.Block metin alanındaki gibi sınırı aşan değişikliği bütünüyle geri çevirir.
• İkonlar ve temizleme düğmesi. leadingIcon, trailingIcon ve showClearButton ilk satırın hizasında durur, kutunun ortasında değil.
• Boyutlandırma tutamacı. İşaretçiyle kullanılan platformlarda, masaüstünde ve web'de, kutunun alt köşesindeki tutamaç kutuyu sürükleyerek uzatır ve kısaltır. Sürüklenen kutu metniyle büyümez; en az satırından kısa olmaz. Telefonda tutamaç yoktur: kutunun üstündeki parmak metni kaydırır. resizable = false tutamacı kaldırır.
• Stil, renkler ve yön. style (TextFieldStyle) ve colors (TextFieldColors) metin alanınınkilerdir; tutamaç ikon rengini, çubuk scrollBar rengini alır. 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, yazıldıkça satır satır uzar ve sekiz satıra varınca metin kutunun içinde kayar. Kutunun sonundaki ince çubuk metnin ne kadar kaydığını gösterir. 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()
PantrixTextArea(
    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 = "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, etiketin ve 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.

PantrixTextArea(
    state = rememberTextFieldState(DELIVERY_NOTES),
    modifier = Modifier.fillMaxWidth().height(200.dp),
    label = "Teslimat talimatı",
    showClearButton = true,
    maxLength = 400,
    tagKey = "instructions"
)
PantrixTextArea(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth().heightIn(max = 320.dp),
    label = "Ek not",
    supportingText = "Tutamaçla en çok 320dp'ye kadar uzar",
    tagKey = "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 kenarlık 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.

PantrixTextArea(
    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 = "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("") }
PantrixTextArea(
    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 = "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 = "message_sent") }
        message.clearText()
    }
}
PantrixTextArea(
    state = message,
    modifier = Modifier.fillMaxWidth(),
    label = "Mesaj",
    placeholder = "Ctrl+Enter ya da Cmd+Enter ile gönderin",
    minLines = 2,
    maxLines = 6,
    onSubmit = send,
    tagKey = "message"
)
PantrixButton(text = "Gönder", onClick = send, tagKey = "send_message")

Forma bağlı alan

field alan PantrixTextArea değerini, hatasını ve adını formdaki alanından alır: tagKey verilmez, alanın id'si otomasyon anahtarıdır (TextArea_<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()
PantrixTextArea(
    field = form.field("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 = "bio_saved") } }
    },
    form = form,
    tagKey = "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.

PantrixTextArea(
    state = rememberTextFieldState("Siparişiniz kargoya verildi; not eklenemez."),
    modifier = Modifier.fillMaxWidth(),
    enabled = false,
    label = "Kargo notu",
    minLines = 2,
    tagKey = "shipping_note"
)
PantrixTextArea(
    state = rememberTextFieldState(RETURN_POLICY),
    modifier = Modifier.fillMaxWidth(),
    readOnly = true,
    label = "İade koşulları",
    maxLines = 4,
    tagKey = "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 metin alanınınkilerdir: TextFieldColors ve TextFieldStyle. Verilen renkler kullanılır, verilmeyenler temadaki rolünde kalır. İlk alanın kenarlığı, 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()
PantrixTextArea(
    state = rememberTextFieldState(DELIVERY_NOTES),
    modifier = Modifier.fillMaxWidth(),
    label = "Not",
    showClearButton = true,
    maxLines = 4,
    colors = TextFieldColors(
        focusedBorder = own.color,
        cursor = own.color,
        icon = own.color,
        scrollBar = own.color
    ),
    tagKey = "own_colors"
)
PantrixTextArea(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Açıklama",
    style = TextFieldStyle(shape = ShapeRole.Large, horizontalPadding = 20.dp, verticalPadding = 16.dp),
    tagKey = "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.

PantrixTextArea(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Toplantı notları",
    supportingText = "Alt köşedeki tutamaçla uzatın",
    tagKey = "meeting_notes"
)
PantrixTextArea(
    state = rememberTextFieldState(),
    modifier = Modifier.fillMaxWidth(),
    label = "Kısa not",
    minLines = 2,
    maxLines = 4,
    resizable = false,
    tagKey = "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) {
    PantrixTextArea(
        state = rememberTextFieldState(ARABIC_NOTE),
        modifier = Modifier.fillMaxWidth(),
        label = "ملاحظة",
        leadingIcon = {
            PantrixIcon(
                imageVector = PantrixIcons.Person,
                contentDescription = null,
                size = PantrixTheme.style(TextFieldStyle).iconSize
            )
        },
        showClearButton = true,
        maxLines = 3,
        maxLength = 200,
        tagKey = "arabic_note"
    )
}

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

Dışarı dokununca klavye kapanır

iOS'ta birkaç satırlık alanın klavyesinde onu kapatan tuş yoktur. Modifier.clearFocusOnTap() bu sütunun boş bir yerine dokunulunca odağı bırakır ve klavye kapanır. Alana ya da bir düğmeye dokunmak onlarındır: imleç yer değiştirir, düğme işini yapar. Kaydırmak dokunuş sayılmaz.

Uygulamanın kökü de aynısını yapar: bu katalogda sayfanın herhangi bir boş yerine dokunmak klavyeyi kapatır.

Column(
    modifier = Modifier.fillMaxWidth().clearFocusOnTap(),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
) {
    PantrixTextArea(
        state = rememberTextFieldState(),
        modifier = Modifier.fillMaxWidth(),
        label = "Geri bildirim",
        minLines = 2,
        tagKey = "feedback"
    )
    PantrixText(
        text = "Klavyeyi kapatmak için buraya dokunun",
        color = PantrixTheme.colors.textSecondary
    )
}

API

state

Metin kutusu: birkaç satırlık metin için bir alan; bir yorum, bir mesaj ya da bir not. Yazıldıkça uzar, sonra kayar. Üstünde bir etiket, 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.

TextFieldStyle

PantrixTextField'ın kutusu: şekli, en az yüksekliği ve genişliği, metninin çevresindeki boşluk, ikonları ve kenarlığı.

TextFieldColors

Temanın renklerini almayan bir alan için PantrixTextField'ı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

• Sayaç ve ekran okuyucu. Sayaç sınıra kadar "120/500" yazar. Ekran okuyucuya yazma durunca, sınırda ve sınırın ötesinde söylenir: her tuşta söylenseydi klavyenin kendi harf okumasının üstüne konuşurdu.
• Klavyeyi kapatmak. iOS'ta birkaç satırlık alanın klavyesinde onu kapatan tuş yoktur. Ekranın kökündeki Modifier.clearFocusOnTap() alanın dışına dokununca odağı bırakır ve klavye kapanır; bu katalog da böyle yapar.