Kuika'nın Text Input elementi, kullanıcıların uygulamalarda metin girişi yapmalarını sağlar. Doğrulama ve formatlama özellikleriyle girilen verilerin doğru biçimde kullanılmasını sağlar. Kullanıcılar, metin alanına bilgi girmediklerinde belirli bir yer tutucu metin görür ve sağ kenardaki Sil simgesiyle girişi hızlıca temizleyebilir. Bu kılavuzda, Text Input elementini nasıl kullanacağınızı ve özelliklerini nasıl yapılandıracağınızı öğreneceksiniz.

Text Input elementi hem web hem de mobil uygulamalarda kullanılabilir.

Bu eğitim içeriği aşağıdaki başlıklardan oluşur:

Text Input Elementi Ekleme
Text Input Elementi Özellikleri
Text Input Elementinde Maskeleme
Element ayarları ve özelleştirme

Text Input Elementi Ekleyin

Kuika platformuna giriş yapın.
Apps ekranından çalışacağınız projeyi açın.
UI Design modülüne gidin.

Sol kenardaki Elements panelinden Text Input kategorisini seçin.
Text Input elementini çalışma alanına sürükleyip bırakın.

Boş bir alana sürüklerseniz, Text Input elementi bir Row elementi ile birlikte eklenir.
Column içerisine sürüklerseniz yalnızca Text Input elementi eklenir.

Text Input Elementi Özellikleri

Properties panelinden aşağıdaki ayarları yapılandırabilirsiniz:

Value: Kullanıcı tarafından girilen veya başlangıçta atanmış metni temsil eder.
Placeholder: Kullanıcı metin girmediğinde görünen bilgilendirici metindir (örn. “Adınızı girin”).
Max Length: Kullanıcının girebileceği maksimum karakter sayısını sınırlar (örn. 30 karakter).
Allow Clear: Sağ kenarda bulunan Sil (X) simgesiyle metnin hızlıca temizlenmesini sağlar.
Mask: Kullanıcının belirli bir formatta metin girmesini sağlar (örn. tarih için ##/##/####).
Formatter: Girilen metni belirli bir biçime dönüştürür:
- Lowercase: Harflerin küçük harfe dönüştürülmesini sağlar.
- Uppercase: Harflerin büyük harfe dönüştürülmesini sağlar.
Input Mode: Klavye düzenini belirler (örn. all – tüm karakterler, char – harf ve semboller, number – yalnızca sayılar).
Allowed Chars: Girilebilecek karakterleri belirler (örn. yalnızca rakam ve "-", "(", ")" gibi karakterler).
Auto Complete: Kullanıcının yazdığı metne uygun öneriler sunar (örn. "İ" yazıldığında "İzmir", "İstanbul" gibi seçenekler çıkar).

Text Input Elementinde Maskeleme

Text Input elementi, belirli formatlara uygun veri girişini sağlamak için maskeleme işlemlerini destekler. Aşağıda bazı örnekler verilmiştir:

99/99/9999: Tarih biçimi (örn. 01/01/2023)
(999)-999-9999: Telefon numarası formatı (örn. (555) 555-1234)
$999,999.00: Para birimi formatı (örn. $123,456.00)

Uygulama Adımları

Elements panelinden Text Input elementini sürükleyip bırakın.
Sağ taraftaki Properties panelinden Mask bölümünü açın.
Mask → Fixed Value alanına manuel olarak veri girin veya veri tabanından veri çekin.

Örnek numara formatları: