Kuika’nın Tab elementi, uygulamalarda farklı içerik bölümlerini sekmeler (tabs) aracılığıyla düzenli ve erişilebilir bir şekilde sunmak için kullanılan bir UI elementidir. Kullanıcılar, sekmeler arasında geçiş yaparak aynı ekran içinde farklı içeriklere hızlıca ulaşabilir.
Tab elementi; form grupları, ayarlar, raporlar, kategori bazlı içerikler veya birbiriyle ilişkili bilgi bloklarını tek bir alanda toplamak için kullanılabilir. Bu sayede ekran karmaşası azaltılır ve kullanıcı deneyimi iyileştirilir.
Tab elementi, web ve mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Kategori bazlı içerik sunumu (ör. Ürün Bilgileri / Teknik Detaylar / Yorumlar)
Her sekme altında bağımsız UI elementleri barındırabilir.
Kullanıcılar sekmeler arasında hızlı geçiş yapabilir.
Aktif sekme görsel olarak vurgulanır.
Aynı ekran içinde çok sayıda içeriği düzenli şekilde sunar.
Form, Table, Chart, Button gibi tüm UI elementleriyle birlikte çalışır.
Ekran alanını verimli kullanarak karmaşıklığı azaltır.
Hem web hem mobil arayüzlerde tutarlı ve responsive yapı sağlar.
2.1. Tab Elementi Özellikleri
Properties panelinde aşağıdaki ayarlar yapılabilir:
Tab: Yeni sekmeler ekleyebilir, mevcut sekmeleri kaldırabilir veya sıralarını değiştirebilirsiniz. Bir sekmeyi kaldırdığınızda, içeriği de otomatik olarak silinir.
Type: Sekme başlıkları için ön tanımlı görünüm tiplerinden seçim yapabilirsiniz.
Tab Position: Sekmelerin Tab elementi çerçevesinin üst (Top), sağ (Right), alt (Bottom) veya sol (Left) kenarında yer almasını ayarlayabilirsiniz.
Selected Tab Color: Seçili sekmenin font ve çizgi renklerini özelleştirebilirsiniz.
TabItem - Label: Seçili sekme başlığında görünmesini istediğiniz metni bu alanda değiştirebilirsiniz. Tab elementi seçiliyken Properties panelinden başlığını düzenlemek istediğiniz sekmeyi seçip metnini güncelleyin.
Data Binding: Sekme başlıkları veya içeriklerinin dinamik verilerle bağlanmasını sağlar.
Styling ve Görsel Özelleştirme
Tab elementinde sekme başlıklarının alt çizgisi kaldırılabilir ve sekme stilleri Styling paneli üzerinden özelleştirilebilir. Font rengi, çizgi görünümü ve sekmelerin genel tasarımı uygulamanın arayüzüne uygun şekilde düzenlenebilir.
Bu kılavuzu takip ederek Tab elementini uygulamanızda etkili bir şekilde kullanabilirsiniz.
2.2. Tab Elementine Eklenebilen Aksiyonlar
Tab elementi, kullanıcı sekme değişikliklerini takip etmek için onChange tetikleyicisini destekler.
onChange: Kullanıcı aktif sekmeyi değiştirdiğinde tetiklenir.
Kullanım senaryoları:
Seçilen sekmeye göre veri yüklemek
Sekmeye özel aksiyon veya sorgu çalıştırmak
Grafik, tablo veya liste içeriklerini dinamik olarak güncellemek
3. Tab Elementi Nasıl Kullanılır?
Bu bölümde Tab elementinin uçtan uca kullanımını örnek senaryolar üzerinden ele alacağız.
Senaryo: Öneri Detay ve Yorum Görüntüleme
Bir uygulamada kullanıcıların paylaşılan önerileri detaylarıyla inceleyebilmesi ve yapılan yorumlara hızlıca erişebilmesi için Tab yapısı kullanılır. Bu senaryoda, bir öneriye ait görsel içerik, açıklama bilgileri ve kullanıcı yorumları tek bir ekran üzerinden sunulmaktadır.
Senaryoda:
Ekranın üst bölümünde öneriye ait görsel içerik görüntülenir.
Alt bölümde yer alan Tab yapısı ile öneri bilgileri ve yorumlar ayrı sekmeler altında düzenlenir.
Detail sekmesi aktif olduğunda, önerinin başlığı ve açıklama metni gösterilir.
Comments sekmesi seçildiğinde, öneriye ait kullanıcı yorumları listelenir.
Sekmeler arasında geçiş yapıldığında sayfa yenilenmeden içerik güncellenir.
Adım 1 - Gerekli Aksiyonun Tanımlanması
Arayüzde verileri göstermek için:
iki aksiyon tanımlamanız gerekir.
Datasources modülü içerisinde Actions > New SQL Action sekmesinden yeni aksiyon ekleyin.
Örnek Verileri Sağlayan Aksiyon (GetSuggestionDetail):
SELECT
'In office wall colouring can be done' AS Title,
'Grey and its shades are commonly used in office layouts. This observation led to the idea of adding more colour to workspaces. Adding colour can create a warmer atmosphere and improve motivation. Small changes in daily environments can make a noticeable difference. Consulting professional artists can help apply colour in a balanced and effective way. Bringing colour to office walls can also bring more energy into daily work life.' AS Description,
'https://images.pexels.com/photos/5674102/pexels-photo-5674102.jpeg' AS ImageUrl;
Örnek Verileri Sağlayan Aksiyon (GetComments):
SELECT
'Ayse Yilmaz' AS CommentUser,
'Small colour touches make the office environment more energetic and motivating. This approach can help improve daily focus.' AS CommentText,
'2026-01-10 09:15' AS CommentDate
UNION ALL
SELECT
'Mehmet Kaya' AS CommentUser,
'Adding colour to workspaces has a positive effect on creativity. Working with professionals helps achieve a more balanced result.' AS CommentText,
'2026-01-12 14:40' AS CommentDate
UNION ALL
SELECT
'Elif Demir' AS CommentUser,
'Making small but meaningful changes in daily work areas can strongly affect mood and motivation.' AS CommentText,
'2026-01-15 11:05' AS CommentDate;
Adım 2 - Initial Action Ekleme
Başlangıçta anasayfada:
Detay alanı içerisinde örnek verilerin gösterimi için Add Action > Initial Action > Custom > Managed DB > GetSuggestionDetail aksiyonunu ekleyin.
Yorumlar alanı içerisinde örnek verilerin gösterimi için Add Action > Initial Action > Custom > Managed DB > GetSuggestionDetail aksiyonunu ekleyin.
Adım 3 - Element Ekleme ve Stil Düzenleme
Başlangıçta anasayfada:
UI Design modülünü açın.
Sol yan panelden Elements > Display > Label elementini sayfaya sürükleyip bırakın.
Yazıyı Label > Properties > Value > “Suggestion Content” olarak güncelleyin.
Yazı stilini Label > Styling > Text > Style > Heading 2 olarak ayarlayın.
Sayfaya Elements > Display > Image elementini sürükleyip bırakın.
Görüntü alanını doldurmak için Image > Properties > ImageFit > Fill seçeneğini seçin.
Boyutlarını Image > Styling > Layout > Width ve Height alanlarını aşağıdaki gibi ayarlayın.
Image altına Elements > Interactive > Tab elementini sürükleyip bırakın.
Alan sayısını iki olacak şekilde güncellemek için Tab > Properties > Tab Item > Delete default gelen Tab Item’lerden birini silin.
İlk Tab Item’e tıklayın ve adını Tab Item > Label > “Detail” olarak güncelleyin.
Benzer şekilde ikinci Tab Item > Label > “Comments” olarak güncelleyin.
Tab elementine tekrar tıklayın ve seçili alan rengini Tab > Properties > SelectedTabColor > Hex > 5ABF1 olarak ayarlın.
Tab başlıklarını hizalamak için Tab > Properties > JustifiedTabTitles > Açık olarak ayarlayın.
Detail başlığına tıklayın ve içerisine Elements > Display > Label elementini sürükleyip bırakın.
Vertical Stack elementi içerisine iki tane Elements > Display > Label elementini ekleyin.
İlk label elementinin stilini Style > Heading 5 ve Weight > Bold olarak ayarlayın.
Comments başlığına tıklayın ve içerisine Elements > Container > Row elementini sürükleyin. Column sayısını bir olacak şekilde ayarlayın.
İçerisine iki yeni Elements > Container > Row elementini sürükleyin. İlk Column sayısını iki,ikinci Column sayısını bir olacak şekilde ayarlayın.
Soldaki Column alanını sola, sağdaki Column alanını sağa ve her ikisinide dikeyde ortalayın.
Soldaki ilk Column içerisine Elements > Display > Label elementini ekleyin.
Yazı stilini Label > Styling > Text > Style > Heading 4 olarak ayarlayın.
Sağdaki ikinci Column içerisine Elements > Date and Time Input > Date elementini ekleyin.
Boş kalan Column içerisine Elements > Display > Label elementini sürükleyip bırakın.
Label elementi altına Elements > Data > Gallery elementini sürükleyip bırakın.
Gallery içerisinde tüm tiplerde bir sütun gösterecek şekilde Properties phoneColumnsCount, tabletColumnsCount ve DesktopColumnsCount alanlarını 1 olarak ayarlayın.
Veri kaynağı için GalleryView > Properties > DataSource > GetComments aksiyonunu bağlayın.
Gallery View içerisine yorum element grubuna tıklayın. Açılan Row seçenekleriden sol kenardaki alandan tutup sürükleyip bırakın.
Adım 4 - Veri Bağlama
Tab içerisindeki Comments başlığına tıklayın içerisindeki ilk label elementine Label > Properties > Value > Field to display > CommentUser alanını tanımlayın.
İkinci label elementine tıklayın ve Label > Properties > Value > Field to display > CommentText alanını tanımlayın.
Date elementine tıklayın ve Date > Properties > Value > Field to display > CommentDate alanını tanımlayın.
Tab içerisindeki Detail başlığına tıklayın ve ilk label elementine tıklayın ve Label > Properties > Value > Action Result > GetSuggestionDetail > First > Titlealanını tanımlayın.
İkinci label elementine tıklayın ve Label > Properties > Value > Action Result > GetSuggestionDetail > First > Titlealanını tanımlayın.
Image elementine tıklayın ve Image > Properties > Value > Action Result > GetSuggestionDetail > First > ImageUrlalanını tanımlayın.
Preview
Uygulama test edildiğinde, Detail sekmesi aktif olduğunda öneriye ait başlık ve açıklama bilgileri detaylı bir içerik alanı içerisinde görüntülenir. Bu alanda, önerinin amacı ve kapsamı kullanıcı tarafından okunabilir ve düzenli bir şekilde sunulur.
Comments sekmesine geçildiğinde ise, öneriye ait kullanıcı yorumları ve yorumların yazıldığı tarih bilgileri aynı sayfa üzerinde listelenir. Her yorum, kullanıcı adı, yorum metni ve tarih alanı ile birlikte yapılandırılarak geri bildirimlerin kolayca takip edilmesi sağlanır.
4. Ortak Özellikler (Properties)
Tab 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:
