Thumbnail
Thumbnail elementinin işlevine göz atın.
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 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 görünümü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 Properties Paneli
Thumbnail elementine tıklayınca açılan paneldir. Properties paneli, Value, PlaceholderImage, ImageFit, Position, ClassName, Authorization, Visibiliy propertyleri ile birlikte gelmektedir.
Value
Componentin değerini set ettiğimiz yerdir.
PlaceholderImage
Placeholder Image value'su yokken çıkan görsel değeridir.
ImageFit
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.
ClassName
ClassName, o elemente bir veya daha fazla sınıf adını atamak için kullanılan parametredir.
Authorization
Thumbnail elementi için yetkilendirme seçeneklerini kullanabilirsiniz.
Visibility
Elementler de visibility yani görünürlük, belirli bir durumda görünürlük veya erişilebilirliğini düzenlemenizi sağlar. Elementin görünür olduğunu kontrol etmek için kullanılan bir özelliktir. Bu özellik genellikle uygulama tasarımında veya işlevselliğinde kullanılır.
Her bir element için Her zaman görünür, gizlenir veya bir koşula bağlı olarak görünüp gizlenmesini sağlayabilirsiniz.
Styling (Stil)
Thumbnail elementine Styling paneli içerisinden Border (Kenarlık), Fill (Dolgu rengi) veya Shadow (Gölge) ekleyerek ek düzenlemeler yapabilirsiniz. Bu özellikler doğrultusunda Thumbnail elementini özelleştirebilirsiniz.
Layout (Düzen)
Thumbnail elementinde Layout ile çevresel iç boşluklar ve boyutlandırma gibi görsel düzenlemeleri yapabilirsiniz. Thumbnail'ın iç boşluklarını ve boyutlandırma ayarlarını yapmak için şu adımları izleyin:
Canvas üzerindeki Thumbnail'a tıklayarak seçili hale getirin.
Styling panelini açın.
Layout alanından iç boşluklandırma ayarları yapmak için Padding (İç Boşluk) alanına değerler verin.
Layout alanından boyutlandırma ayarları yapmak için Size (Boyut) alanına değerler verin.
Thumbnail elementinde Align seçeneği desteklenmemektedir.
Border (Kenarlık)
Thumbnail'ın dış kenarlarına çizgi ekleyebilir ve köşe eğimleri verebilirsiniz.
Canvas üzerindeki Thumbnail'a tıklayarak seçili hale getirin.
Styling panelini açın.
Border (Kenarlık) seçeneğine gidin.
Color (Renk) bölümünden istediğiniz rengi seçerek Thumbnail'ın Border rengini belirleyebilirsiniz.
Radius (Köşe eğimleri) bölümünden oluşturacağınız border yapısının kenarlarını belirlemek için değerler ekleyebilirsiniz.
Shadow (Gölge)
Web uygulamalar içerisinde Thumbnail element kullanımında Shadow ile gölge efekti ekleyebilirsiniz. Mobil uygulamalar içerisinde Shadow görüntülenmemektedir.
Ö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→ UIControl→SetValueOf’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ı önizlemesini 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ı önizlemesi de görüntülenir durumda olacaktır.
Last updated
