FloatButton, Kuika platformunda yalnızca web uygulamalarında desteklenen, ekranın sabit köşelerinde konumlanabilen bir aksiyon butonudur. Sayfa kaydırılsa bile konumunu koruyarak kullanıcıya her an erişilebilir bir işlem noktası sunar.
Genellikle navigasyon işlemleri, kayıt ekleme, hızlı aksiyonlar veya FloatPanel açma gibi senaryolarda tercih edilir. Minimal yapısı sayesinde arayüzü kalabalıklaştırmadan önemli işlemlerin öne çıkarılmasını sağlar.
FloatButton elementi yalnızca web uygulamalarında desteklenmektedir.
1.1. Sık Kullanım Senaryoları
FloatPanel açma: Detay, filtre veya hızlı işlem panellerini ekranın herhangi bir yerinden erişilebilir hale getirir.
Hızlı navigasyon: Kullanıcıyı belirli bir sayfaya veya forma tek tıklamayla yönlendirmek için kullanılır.
Aksiyon kısayolu: Sık kullanılan işlemleri (kaydet, gönder, başlat vb.) her zaman görünür bir noktada sunar.
Scroll bağımsız işlem: Uzun sayfalarda, kullanıcı sayfanın neresinde olursa olsun aksiyona erişmesini sağlar.
Minimal CTA (Call to Action): Arayüzü kalabalıklaştırmadan önemli bir işlemi vurgulamak için kullanılır.
2. Temel Özellikler
Sabit konumlu yapı: FloatButton, ekranın belirlenen köşesine sabitlenir ve sayfa kaydırılsa bile yerini korur.
Tek aksiyon odaklı kullanım: Genellikle tek ve net bir işlemi tetiklemek için kullanılır (kayıt ekleme, panel açma, yönlendirme vb.).
offsetX: Butonun yatayda (sağdan veya soldan) ne kadar boşluk bırakacağını belirtir (px cinsinden).
offsetY: Butonun dikeyde (alttan veya üstten) ne kadar boşluk bırakacağını belirtir (px cinsinden).
offsetX ve offsetY değerleri, seçilen pozisyona göre kenardan olan mesafeyi ayarlamak için kullanılır. Örneğin:
bottom right seçildiğinde:
offsetX: sağ kenardan boşluk
offsetY: alt kenardan boşluk
top left seçildiğinde:
offsetX: sol kenardan boşluk
offsetY: üst kenardan boşluk
2.1.1. FloatButton ile FloatPanel Kullanımı
FloatButton, genellikle FloatPanel tetiklemek için kullanılır.
FloatPanel, Navigate aksiyonuyla açılır; bu aksiyon şu şekilde tanımlanır:
+ADD ACTION →onClick→Navigate aksiyonu atanır.
Hedef panel tipi olarak FloatPanel seçilir.
FloatPanel, Drawer ve Modal bileşenlerine alternatif olarak kullanılır.
Kullanım Senaryoları
Yeni kayıt eklemek için “+” butonu
Yardım veya destek paneli açmak
Geri bildirim veya yorum formu çağırmak
Ek ayarlar veya işlemleri açmak
2.2. Elemente Eklenebilen Aksiyonlar
FloatButton elementi, kullanıcı etkileşimini doğrudan aksiyonlar üzerinden yöneten bir UI elementidir. Element seçildiğinde Properties panelindeki +ADD ACTION alanı aktif hale gelir ve aşağıdaki tetikleyici kullanılabilir:
onClick
Kullanıcı FloatButton’a tıkladığında tetiklenir. FloatButton’ın temel kullanım amacı bu tetikleyici üzerinden aksiyon çalıştırmaktır.
Kullanım senaryoları:
Yeni kayıt ekleme (Create / Add Record)
Başka bir sayfaya yönlendirme (Navigate)
FloatPanel açma veya kapatma
Modal / Popup tetikleme
Form resetleme veya submit işlemi
API veya SQL aksiyonu çalıştırma
Sayfa içi hızlı işlem (kısayol) oluşturma
FloatButton, tek ve net bir kullanıcı aksiyonunu tetiklemek üzere tasarlandığı için onClick dışında başka bir tetikleyici desteklemez. Tüm etkileşim senaryoları bu tetikleyici üzerinden yönetilir.
3. Float Button Elementi Nasıl Kullanılır?
Bu bölümde Float Button elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Floating Button ile Yeni Müşteri Ekleme (Float Panel Üzerinde Form Açma)
Bir uygulamada kullanıcıların yeni kayıt ekleme işlemlerini sayfadan ayrılmadan hızlıca yapabilmesi için Floating Button ve Float Panel birlikte kullanılır. Bu senaryoda, müşteri listesinin bulunduğu ekranda sağ alt köşedeki “+” Floating Button’a tıklanarak Yeni Müşteri Ekle formu, sayfa üzerinde açılan bir Float Panel içinde gösterilmektedir.
Senaryoda:
Uygulamanın Müşteriler sayfasında mevcut müşteri kayıtları bir tablo/liste üzerinde görüntülenir.
Sayfanın sağ alt köşesinde, her zaman erişilebilir olacak şekilde bir Floating Button (+) konumlandırılır.
Kullanıcı Floating Button’a tıkladığında, ekrandan ayrılmadan Float Panel açılır ve “Yeni Müşteri Ekle” formu panel içinde görüntülenir.
Float Panel içerisinde kullanıcıdan Name ve Email alanlarını doldurması istenir (Id sistem tarafından otomatik oluşturulur).
Kullanıcı Kaydet butonuna bastığında yeni müşteri kaydı oluşturulur; işlem başarılı olursa panel kapanır ve müşteri listesi güncellenerek yeni kayıt ekranda gösterilir.
Kullanıcı işlemden vazgeçerse İptal / Kapat ile Float Panel’i kapatabilir; böylece sayfa akışı bozulmadan aynı ekranda kalır.
Adım 1 - Veri Kaynağı Oluşturma
DataSources modülünde tablo oluşturma:
Datasources modülüne gidin.
Ardından Tables sekmesine gidin.
“Customers” adında yeni tablo oluşturun.
Kurulması gereken tablo yapısı aşağıdaki gibidir:
Önemli Alan adları:
Email: Müşterinin e-posta adresini tutar.
Name: Müşterinin görünen adını (ad–soyad veya firma adı) ifade eder.
Adım 2 - Float Panel Sayfasını Ekleme
Başlangıçta anasayfada:
Sol yan panelde yer alan Screens alanından yeni ekranoluştur'a tıklayın.
Açılan ekrandan CRUD Wizard alanını seçin ve aşağıdaki şekilde tanımlamaları yaparak kullanıcı oluşturma ekranını hazır şekilde oluşturun.
Yeni oluşan sayfa Screens altında yer alacaktır. Oluşturulan sayfaya tıklayın ve açın. Sayfa içerisinde yer alan sağ kenardaki sütunu silin.
Beklenen sayfa düzeni aşağıdaki gibi olmalıdır.
Adım 3 - Float Button Elementini Ekleme ve Stil Düzenleme
Başlangıçta anasayfada:
UI Design modülünü açın.
Sol yan panelden Elements > Navigation > FloatButton elementini sayfaya sürükleyip bırakın.
Eklenen Navigate aksiyonun alanlarını To Screen > Customers Form, Screen Inputs > Id > Default > New Guid, Open As > Float Panel, Weigth > 480 px ve Height > 380 px olacak şekilde aşağıdaki gibi tanımlayın.
Preview
Kullanıcı, sayfanın sağ alt köşesinde yer alan Floating Button (+) üzerine geldiğinde (hover), buton görsel olarak vurgulanır ve yeni kayıt ekleme aksiyonunun her an erişilebilir olduğunu net şekilde ifade eder. Kullanıcı butona tıkladığında, mevcut sayfadan ayrılmadan Customers Form başlıklı bir Float Panel ekranda açılır.
Float Panel açıldığında aktif çalışma alanı öne çıkarılarak kullanıcının odağı forma yönlendirilir. Panel içerisinde Email ve Name alanları sade ve düzenli bir yerleşimle sunulur; kullanıcı bilgilerini hızlıca girebilir. Sağ üstte yer alan kapatma (X) ikonu ile panel istenildiği anda kapatılabilir.
Kullanıcı Save butonuna bastığında, girilen bilgiler kaydedilir ve işlem başarıyla tamamlanır. Bu yapı sayesinde, sayfa akışı bozulmadan hızlı veri girişi sağlanır ve floating button + float panel kombinasyonu ile etkileşimli, modern ve kullanıcı dostu bir deneyim sunulur.
4. Ortak Özellikler (Properties)
Float Button elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
FloatButton’ı tek ve net bir aksiyon için kullanın. Aynı buton üzerinden birden fazla karmaşık işlem tetiklemek kullanıcı deneyimini olumsuz etkileyebilir.
Ekranda her zaman görünür olduğu için en sık kullanılan veya en kritik işlemler için tercih edin (ör. “Yeni Kayıt Ekle”, “Hızlı Aksiyon”, “Yardım”).
FloatPanel veya Modal açmak için kullanıldığında, kapatma akışının da kullanıcı için kolay ve görünür olduğundan emin olun.
6. Kısıtlamalar
Veri gösterimi için uygun değildir. FloatButton yalnızca aksiyon tetiklemek amacıyla tasarlanmıştır.
Responsive yapılarda, küçük ekran çözünürlüklerinde bazı içeriklerin üzerine binebilir; bu nedenle tasarım önizlemesi mutlaka kontrol edilmelidir.
