Thumbnail elementi, web sayfalarında veya uygulamalarda içeriğin küçük önizlemesini sunmak için kullanılan bir elementtir ve genellikle kullanıcı deneyimini iyileştirmek ve içeriğe hızlı erişim sağlamak amacıyla kullanılır.

Thumbnail, bir resmin küçük bir önizlemesini sunmak için kullanılan bir element iken, Image elementi, asıl resmin tam boyutlu versiyonunu web veya mobil uygulamalarda göstermek için kullanılır. Thumbnail, kullanıcıların hızlıca içeriği taramalarına yardımcı olurken, image elementi asıl resmi göstermek veya sunmak için kullanılır.

Thumbnail Elementi Ekleme

Thumbnail elementini uygulamanız içine eklemek oldukça basittir. Thumbnail elementini eklemek için aşağıdaki adımları izleyebilirsiniz:

UI Tasarım modülünde, sol taraftaki Elements panelini açın.
Elements paneli içinde Display kategorisinden Thumbnail elementini seçin.
Thumbnail elementini sürükleyin ve bırakın.
Thumbnail elementini Properties panelinden özelleştirebilirsiniz.

Thumbnail elementi sadece web uygulamaları desteklemektedir. Mobil uygulamaları desteklememektedir.

Thumbnail Elementi Özellikleri

Thumbnail elementine tıklayınca açılan paneldir. Properties paneli;

Value,
Placeholder Image,
Image Fit,
Position,
Class Name,
Authorization,
Visibiliy propertyleri ile birlikte gelmektedir.

Value: Value alanına statik bir değer ekleyebileceğiniz gibi Symbol Picker aracılığıyla bir durumu, Thumbnail element içeriğini veya bir aksiyon sonucuna ait bir değerin dinamik olarak gelmesini sağlayabilirsiniz.

Placeholder Image: Placeholder, Image değeri olmadığı durumlarda gösterilen görseldir.

Zoom On Click: Zoom On Click özelliği, küçük resimlere tıkladığınızda resmin daha büyük bir versiyonunun görüntülenip görüntülenmeyeceğini belirlemenizi sağlar. Switch’i aktif hale getirdiğinizde, küçük bir önizlemeden tam boyutlu bir görüntüye geçiş yapabilirsiniz.

Image Fit: Thumbnail elementi Styling > Layout üzerinden aldığı değere göre özel bir boyuta sahip olabilir. Ayrıca Image elementinin ebeveyn elementi aracılığıyla bulunduğu bir boyutta olabilir. Bu tür durumlarda gösterilecek görüntünün Image elementi çerçevesine nasıl sığdırılacağını belirleyebilirsiniz.

Position: Thumbnail elementinde görüntülenecek görsel pozisyonunun açılır pencere (bottom, center, right, left, top) içerisinden belirlendiği alandır.

Yetkilendirme (Authorization)

Uygulamanızın ekran ve elementlerinde, "Anonymous Access" ve "All Roles Access" yetkilendirme seçenekleri ile kullanıcı erişimini özelleştirebilirsiniz. "Anonymous Access" herhangi bir hesap bilgisi sorgulaması olmadan erişimi mümkün kılarken, "All Roles Access" ile kullanıcı hesap bilgileri doğrulanarak erişim sağlanır.

Element düzeyinde yetkilendirme için, ilgili elementi seçip Properties panelinden "Authorization" ayarlarını düzenleyerek, uygulamanızın güvenlik ve kullanıcı deneyimini yönetebilirsiniz.

Bu yöntemler, uygulamanızda kişiselleştirilmiş ve güvenli bir ortam yaratmanıza olanak tanır.

Actions (Aksiyonlar)

Kuika, Arithmetic, Authorization, Condition, Device, Export, Geolocation, Local Storage, Multi Language, Navigation , Notification, Payment Stripe, UI Control, Trigger , Process Automation, Process Administration ve String Operations gibi sistem aksiyonlarını barındırmaktadır.

Sistem aksiyonlarının yanı sıra kendi oluşturduğunuz SQL aksiyonları da kullanabilirsiniz.

Elementlere aksiyon eklemek için Properties panelde yer alan +Add Action butonunu kullanabilirsiniz.

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

Ekranların veya elementlerin görünürlüğünün ayarlandığı kısımdır. Elementler'de Visibility yani Görünürlük, belirli bir durum ve/veya koşula göre görünürlüğü düzenlemenizi sağlar. Her bir element için her zaman görünür olmasını, gizli olmasını veya bir koşula bağlı olarak görünüp gizlenmesini sağlayabilirsiniz.

Ekranınızın görünürlük yapısının ayarlandığı kısımdır. Kuika, uygulamanızdaki ekranların görünürlük kontrolünü yapabilmeniz için Always Visible, Hidden, Sometimes Visible seçeneklerini sunmaktadır.

Always Visible: Uygulamanızdaki ekranların her zaman görünür olmasını sağlar. ‍
Visible: Uygulamanızdaki ekranların görünür olmasını sağlar. ‍
Hidden: Uygulamanızdaki ekranların gizlenmesini sağlar. ‍
Sometimes Visible: Uygulamanızdaki ekranların koşula bağlı görünür olmasını sağlar.

Elementlerde veya Ekranlarda Visibility İşlemleri

Elementlerde veya ekranınızda Visibility ayarlarını yapmak için aşağıdaki adımları izleyebilirsiniz:

Ekrandaki elemente veya ekrana tıklayarak seçili hale getirin.
Properties panelini açın.
Visibility alanına tıklayarak uygulamanızın ihtiyacına göre aşağıdaki seçimlerden birini yapın.
- Selectbox içerisinden Always visible ile her zaman görünür olmasını sağlarsınız. ‍
- Hidden ile elementi gizleyebilirsiniz.
- ‍Sometimes visible ile ekleyeceğiniz koşullar doğrultusunda görüntülenmesini sağlayabilirsiniz.

Yapmış olduğunuz seçim doğrultusunda elementin görünürlüğü ayarlanmış olacaktır.

Style panel ile arayüz tasarımını özelleştirin

Elementlerinizi Styling Paneli ile özelleştirerek, web ve mobil uygulamalarınızda benzersiz ve etkileyici kullanıcı arayüzleri oluşturabilirsiniz. Bu genel kılavuz, çeşitli elementlerin (örneğin, Collapse) nasıl özelleştirileceğini açıklar ve ortak özelliklerle ilgili detaylı bilgiler sunar.

Altta tanımlanan bölümler element özelinde değişkenlik gösterir. Her bir özelleştirme seçeneği hakkında daha fazla bilgi edinmek için, lütfen ilgili bağlantılara tıklayınız.

Layout (Düzen)‍

Elementlerin boyutlandırılması, hizalanması ve çevresel iç boşlukların (padding) ayarlanması gibi görsel düzenlemeleri buradan yapabilirsiniz. Bu ayarlar, elementin içerisinde bulunan diğer elementlerin düzenini de etkiler. Özellikler arasında Size, Min Size ve Align bulunur; ancak, bazı elementler Display özelliğini desteklemeyebilir.

Text (Metin)‍

Elementin metin özellikleri, yazı tipi ailesi, stil, renk, boyut, aralık ve diğer seçenekler aracılığıyla buradan düzenlenebilir. Bu bölüm, Text ile ilgili tüm ayarlamaları destekler.

Fill (Dolgu)‍

Elementin arka planını renk veya görseller ile kişiselleştirmek için Fill ayarını kullanabilirsiniz. Bu, elementin görsel çekiciliğini artırır.

Border (Kenarlık)‍

Elementlerinize kenarlık ekleyerek ve köşe yarıçaplarını ayarlayarak daha estetik bir görünüm kazandırabilirsiniz.

Shadow (Gölge)‍

Web uygulamalarında kullanılan elementlere gölge efekti ekleyerek derinlik hissi verebilirsiniz. Ancak, bazı elementler mobil uygulamalar için uygun olmadığından gölge özelliği desteklenmeyebilir.

Thumbnail Elementi Kullanımı

Örnek Thumbnail Elementi Kullanımı:

Thumbnail elementine dosya eklemek için, Add File Butonuna tıklayın. Element içerisinde +Add Action ile Dosya yüklenmesi işlevinde olan Upload File aksiyonu eklenmelidir.

Upload File aksiyonunu eklemek için OnClick→ Device→ Upload File’a tıklayın.

Ardından SetValueOf aksiyonunu ekleyin. Set Value Of sistem aksiyonunu eklemek için Onclick → UI Control→ Set Value Of’u seçin.

SetValueOf aksiyonunu oluşturduktan sonra aksiyon içerisinde yer alan açılır pencere içerisinden Thumbnail elementini seçin.

Thumbnail elementini seçtikten sonra value parametresi ile birlikte gelmektedir. Value parametresini doldurmak için Symbol Picker’a tıklayın.

Action Results → Upload File →Data seçin.

Ardından Run butonuna tıklayarak uygulamayı ön izlemesini alın. Butona tıklandığında cihazınızdan dosya yüklenmesi için bir ekran açılacaktır. Oradan ister PDF isterseniz de resim dosyası seçebilirsiniz. PDF olarak seçtiğiniz dosya PDF ikonu ile görüntülenirken, eklenilen resim dosyası ön izlemesi de görüntülenir durumda olacaktır.