Button elementi, kullanıcıların uygulama içinde bir işlem başlatmasını sağlayan temel etkileşim elementidir. Bir aksiyonu tetiklemek, veri göndermek, sayfa yönlendirmesi yapmak veya bir süreci başlatmak gibi pek çok senaryoda kullanılır. Görsel olarak dikkat çekici yapısı sayesinde kullanıcıyı harekete geçirmeyi amaçlar.
Button elementi yalnızca web uygulamalarında desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Form gönderme (Submit, Save, Update işlemleri)
Sayfalar arası yönlendirme (Navigate)
Modal / Pop-up açma ve kapatma
Veri kaynağı aksiyonlarını tetikleme (Get, Save, Delete vb.)
Filtreleme veya liste yenileme işlemleri
Süreç başlatma (workflow, automation tetikleme)
2. Temel Özellikler
Metin, ikon veya her ikisini birlikte gösterebilme
Aktif, pasif (disabled) ve loading durumları
Dinamik görünürlük ve yetkilendirme desteği
Web ve mobil uyumlu kullanım
Diğer UI elementleri ve aksiyonlarla tam uyumlu çalışma
2.1. Button Elementi Özellikleri
Button elementini seçtiğinizde, sağ tarafta bulunan Properties paneli üzerinden ayarları yapılandırabilirsiniz.
Aşağıdaki tüm ayarlar madde madde açıklanmıştır:
Label: Button üzerindeki metni belirler. Kullanıcıların butonun işlevini hızlıca anlamalarını sağlar.
Icon: Button'a eklenen görsel simgeyi ifade eder. Butonun estetik ve işlevselliğini artırır.
Icon Position: İkonun buton üzerindeki konumunu ayarlayabilirsiniz. İkon, metnin solunda veya sağında yer alabilir.
Bu kılavuzu takip ederek Button elementini uygulamanızda etkili bir şekilde kullanabilirsiniz.
2.2. Elemente Eklenebilen Aksiyonlar
Button elementi, kullanıcı etkileşimine dayalı bir element olduğu için onClick tetikleyicisini destekler. Button’a tıklandığında aşağıdaki senaryolar gerçekleştirilebilir:
Bir Managed DB veya REST API aksiyonunu çalıştırma
Başka bir sayfaya veya ekrana yönlendirme
Set Value Of ile başka bir elementin değerini değiştirme
Modal, Drawer veya Pop-up açma
Süreç (Process Automation) başlatma
Koşullu aksiyonlar ile farklı akışlar oluşturma
3. Button Elementi Nasıl Kullanılır?
Bu bölümde Button elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Detay Sayfası Görüntüleme
Bir uygulamada kullanıcıların mevcut sayfadan ayrılmadan detay bilgilere hızlıca erişebilmesi için Drawer yapısı tercih edilir. Bu senaryoda Button elementi, detay içeriklerini sayfa geçişi olmadan drawer içerisinde göstermek amacıyla kullanılır.
Senaryoda:
Kullanıcı, liste veya ana ekran üzerinde yer alan Detaylar butonunu görüntüler.
Kullanıcı Detaylar butonuna tıkladığında, tanımlı aksiyon tetiklenir ve ekranın yanından Drawer paneli açılır.
Açılan drawer içerisinde Detaylar Sayfası başlığı ve ilgili açıklama içeriği görüntülenir.
Kullanıcı, drawer içeriğini inceleyebilir ve ana sayfadaki bağlamı kaybetmeden işlemlerine devam edebilir.
Drawer kapatıldığında kullanıcı, aynı sayfa üzerinde kalmaya devam eder.
Elementin Eklenmesi ve Aksiyonun Bağlanması
Sayfaya Elements > Navigation > Button elementini sürükleyip bırakın.
Button elementi yanındaki boşluğa tıklayın Col > Styling > Layout > Align > Dikeyde ve Yatayda ortala olarak ayarlayın.
Navigate aksiyonu içerisinde aşağıdaki iki gerekli tanımlamayı yapın.
Preview
Uygulama test edildiğinde, ilgili içerik alanında yer alan Detaylar butonuna tıklanır. Butona tıklanmasıyla birlikte mevcut sayfa karartılarak pasif hâle gelir ve ekranın ön planında Detaylar Sayfası açılır. Açılan bu yapı, kullanıcıyı mevcut sayfadan ayırmadan detay bilgilerin görüntülenmesini sağlar.
Kullanıcı detay içeriğini inceledikten sonra sayfayı kapattığında, arka plandaki ekran aynı durumda korunur. Bu kullanım sayesinde kullanıcı, sayfa geçişi yaşamadan detay bilgilere odaklanabilir ve uygulama içerisindeki akış kesintiye uğramaz.
4. Ortak Özellikler (Properties)
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:
