Kullanıcı Kılavuzu

Auto Complete

30/6/25
Auto Complete

Kuika'nın Auto Complete elementi, kullanıcıların metin girişi sırasında hızlı bir şekilde öneriler almasını sağlar. Kullanıcılar metin yazmaya başladıklarında, önceden tanımlanmış veri listesinden otomatik olarak uygun öneriler sunulur. Bu kılavuzda, Auto Complete elementini nasıl kullanacağınızı ve öneri listesini nasıl yapılandıracağınızı öğreneceksiniz.

Auto Complete elementi hem web hem de mobil uygulamalarda kullanılabilir.

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

  • Auto Complete Elementi Ekleme
  • Auto Complete Elementi Özellikleri
  • Auto Complete Elementine Fixed Options Özelliği ile Veri Bağlama
  • Element ayarları ve özelleştirme

Auto Complete Elementi Ekleyin

  1. Kuika platformuna giriş yapın.
  2. Apps ekranından çalışacağınız projeyi açın.
  3. UI Design modülüne gidin.
  1. Sol kenardaki Elements panelinden Select Input kategorisini seçin.
  2. Auto Complete elementini çalışma alanına sürükleyip bırakın.
  • Boş bir alana sürüklerseniz, Auto Complete elementi bir Row elementi ile birlikte eklenir.
  • Column içerisine sürüklerseniz yalnızca Auto Complete elementi eklenir.

Auto Complete Elementi Özellikleri

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

  • Options: Liste içinde gösterilecek verinin bağlantısını yapabilirsiniz. Statik bir liste de oluşturabilirsiniz.
  • Fixed Options List: Veri tabanına bağlı olmadan manuel olarak tanımlanan sabit verileri listeler.
  • Fixed Data: Listeyi oluşturan her bir verinin görünen ismini (Text) ve uygulama içinde kullanılacak değerini (Key) belirler.
  • Placeholder: Kullanıcının veri girmediğinde görüntülenen yer tutucu metindir.
  • Allow Clear: Sağ kenarda bir Sil (X) simgesi ekleyerek girilen verinin tek tıklamayla silinmesini sağlar.
  • Value: Statik bir değer ekleyebilir veya Symbol Picker aracılığıyla başka bir elementin içeriğini ya da aksiyon sonucunu dinamik olarak gösterebilirsiniz.

Auto Complete Elementine Fixed Options Özelliği ile Veri Bağlama

  1. Sağ kenardaki Properties panelini açın.
  2. Options açılır menüsünden Actions altında yer alan Please Select butonuna tıklayın.
  1. Açılan menüden Fixed Options List seçeneğini belirleyin.
  2. Fixed Options List altında bulunan Fixed Data butonuna tıklayın.
  3. Açılan ekranda manuel olarak Key ve Text alanlarını doldurun.
  4. UPDATE butonuna tıklayarak verileri bağlayın.

Bu kılavuzu takip ederek Auto Complete elementini uygulamanızda etkili bir şekilde kullanabilirsiniz.

Element Ayarları ve Özelleştirme

Authorization (Yetkilendirme)

Element düzeyindeki erişim kontrolünü yönetmek için, Properties panelindeki Authorization bölümünü kullanabilirsiniz.

Erişim Tipleri

Anonymous

Elementin tüm kullanıcılar tarafından, giriş yapmadan görüntülenmesine izin verir.

Restricted

Erişimin yalnızca doğrulanmış kullanıcılara veya belirli rollere göre sınırlandırılmasını sağlar.

  • Everyone: Aktif edildiğinde, giriş yapmış tüm kullanıcılar elemente erişebilir.
  • Roles: Elemente erişmesine izin verilen roller buradan seçilir. Rol listesini düzenlemek için Roles alanının yanındaki dişli (⚙️) ikonuna tıklayarak Role Management penceresini açabilirsiniz. Bu pencereden yeni rol ekleyebilir, klasör oluşturabilir veya mevcut rolleri yönetebilirsiniz.

Unauthorized Behavior (Hide / Disable)

Kullanıcı gerekli role sahip değilse, elementin nasıl davranacağını Choose alanından belirleyebilirsiniz:

  • Hide: Kullanıcı yetkili değilse element tamamen gizlenir ve ekranda görünmez.
  • Disable: Element görünür kalır ancak tıklanamaz / kullanılamaz hâle gelir.

Bu ayar, yetkisiz kullanıcıların elementle nasıl karşılaşacağını yönetmeniz için kullanılır.

Visibility (Görünürlük)

  • Always Visible: Element her zaman görünür.
  • Hidden: Element gizlenir.
  • Sometimes Visible: Element, belirli bir koşula bağlı olarak görünür.

Ayarı yapılandırmak için:

  1. Ekrandaki elementi seçin.
  2. Sağ kenardaki Properties panelini açın.
  3. Visibility alanında ihtiyacınıza göre bir seçenek belirleyin.

Editability (Düzenlenebilirlik)

  • Enabled: Element düzenlenebilir.
  • Disabled: Element düzenlenemez.
  • Sometimes Enabled: Element, belirli koşullara göre düzenlenebilir veya düzenlenemez.

Style Panel ile Arayüz Tasarımı

Elementlerinizi Styling Panel ile özelleştirerek, web ve mobil uygulamalarınız için etkileyici arayüzler oluşturabilirsiniz. Bu bölümde, aşağıdaki ayarları yapılandırabilirsiniz:

  • Layout (Düzen): Boyutlandırma, hizalama ve iç boşluk (padding) ayarları. Ayarlar arasında Size, Min Size ve Align bulunur.
  • Text (Metin): Yazı tipi, stil, renk, boyut ve aralık ayarları.
  • Fill (Dolgu): Arka planı renk veya görsellerle özelleştirme.
  • Border (Kenarlık): Kenarlık ekleme ve köşe yarıçapı ayarları.
  • Shadow (Gölge): Elementlere derinlik katmak için gölge efekti ekleme.

İlişkili diğer içerikler

No items found.

Sözlük

No items found.

Alt Başlıklar