Collapse

Collapse elementinin işlevine göz atın.

Collapse, yatay bloklara sahip içeriklerin daraltılıp genişletilebilir bir alanda gösterilmesini sağlayan elementtir. Çoğunlukla başlıkları görüntülenen bölümlerin, genişletildiğinde içinde bulunan diğer içerikler görüntülenir. Örneğin; birden çok açıklama başlığına sahip içeriklerde ve sıkça sorulan sorular gibi tasarımlarda kullanılır. Collapse elementi, kullanıcının belirli bir içeriği gizleyebilmesine ve açabilmesine olanak tanır. Genellikle Daha Fazla Göster veya Daha Az Göster düğmesi ile etkileşimli olarak kullanılır.

Çoğunlukla Collapse elementi, kullanıcıların içeriği daha düzenli bir şekilde yönetmelerine, fazla bilgiyi gizlemelerine ve ihtiyaç duyduklarında erişimlerine yardımcı olan önemli bir kullanıcı arayüzü elementidir. Uygulama geliştirme sürecinde kullanılırken, kullanıcı deneyimini ve kullanılabilirliği artırmak için dikkatli bir şekilde tasarlanmalıdır.

Collapse Ekleme

Collapse elementini uygulamanız içerisine eklemeniz oldukça kolay. Collapse elementini eklemek için aşağıdaki adımları izlemeniz gerekmektedir.

  1. UI Design görünümünde, sol taraftaki Elements panelini açın.

  2. Elements paneli içerisinde Container kategorisi içerisinden Collapse seçin.

  3. Collapse elementini ekrana sürükleyin ve bırakın.

  4. Collapse elementini Properties paneli içerisinden özelleştirebilirsiniz.

Collapse, sadece Web uygulamaları desteklemektedir. Mobil uygulamaları desteklememektedir.

Collapse elementinin başlıklardan birine tıklandığında detay paneli açılır. Buraya direkt bir element ekleyebileceğiniz gibi Row ekleyerek daha kompleks bölümler de oluşturabilirsiniz.

Collapse elementi diğer elementler gibi mutlaka bir Container element içine eklenirler. Genel olarak Row içine eklenerek ekran tasarımını yapıyor olsak da diğer Container tipindeki elementler içine de eklenebilirler.

Collapse paneli içine Header ve Footer elementleri haricindeki diğer elementleri sürükle bırak ile ekleyebilirsiniz.

Collapse elementi seçildiğinde, Properties panelinde Collapse, Destroy Inactive Panel, Accordion, Collapse Panel, Authorization (Yetkilendirme), Visibility (Görünürlük) ve Actions parametreleri görüntülenir. Bu parametre alanları Collapse elementi ile ilgili özelleştirme ve özel yetkilendirme ayarlarını ve görünürlük tercihlerini düzenlemenizi sağlar.

Elemente role bağlı yetkilendirmeler verebileceğiniz gibi görünürlüğünü de göster/gizle/koşullu seçenekleriyle ayarlayabilirsiniz.

Collapse elementi içine metin ve ikonlar ekleyebilirsiniz. Elemente rol tabanlı yetkiler verebilirsiniz.

Collapse

Properties paneli aracılığıyla Collapse bölümünü açın. Buradan yeni Collapse panel ekleyebilir, silebilir, sıralamasını değiştirebilir ve var olan Collapse panelleri seçebilirsiniz.

Destory Inactive Panel

Collapse içinde bulunan panellerden açık olan paneli açık tutup diğer panelleri kapatır.

Accordion

Collapse içinde bulunan panellerden biri açıldığında açık olan diğerlerini daraltabilirsiniz.

Collapse Panel

Collapse içine eklediğiniz panelleri seçerek yönetebilirsiniz. Panellerden birini seçtiğinizde Header, Key ve Show Arrow özelliklerini değiştirebilirsiniz. Ayrıca seçili Collapse paneli üzerinde stil ayarlarını da yapabilirsiniz.

Collapse elementi için yetkilendirme seçeneklerini kullanabilirsiniz.

Elementlerde Authorization ekleme işlemlerini detaylı incelemek için tıklayın.

Kullanıcı rollerine göre veya ekran rollerine göre Authorization işlemlerini detaylı incelemek için tıklayın.

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.

Collapse elementi 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 visibility seçeneklerini kullanabilirsiniz.

Elementlerde Visibility ekleme ile ilgili detaylı bilgi edinmek için tıklayın.

Seçimler doğrultusunda Collapse görünürlüğü ayarlanmış olacaktır.

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.

Collapse elementine ekleyebileceğiniz aksiyonları +Add Action ile ekleyebilirsiniz.

Collapse elementini Styling paneli ile özelleştirebilirsiniz.

Collapse elementine Layout (Düzen),Text (Metin), Fill (Dolgu), Border (Kenarlık) veya Shadow (Gölge) ekleyerek ek düzenlemeler yapabilirsiniz.

Çevresel iç boşluklar (Padding) ve boyutlandırma (Size) gibi görsel düzenlemeleri yapabilirsiniz. Collapse boyutuna bağlı olarak içerisinde bulunan elementlerin hizalamasını yapabilirsiniz.

Collapse elementi Size, Min size ve Align alanlarını desteklemektedir. Display alanını desteklememektedir.

Elementlerde Layout ekleme ile ilgili detaylı bilgi edinmek için tıklayın.

Collapse yazısı ve ikonuna ait yazı ailesi (family), stil (style), renk/boyut (size/color), aralık (spacing) ve options (seçenekler) gibi özellikleri Text bölümü ile ayarlayabilirsiniz. Collapse elementi Text’in bütün özelliklerini desteklemektedir.

Elementlerde Text ayarları ekleme ile ilgili detaylı bilgi edinmek için tıklayın.

Collapse elementinin arka planına (Background) renk veya görseli Fill (Dolgu) ile ekleyebilirsiniz.

Elementlere Fill (Dolgu) ekleme ile ilgili detaylı bilgi edinmek için tıklayın.

Collapse dış kenarlarına kenarlık (Border) ekleyebilir, köşe eğimleri (Radius) verebilirsiniz.

Elementlere Border (Kenarlık) ekleme ile ilgili detaylı bilgi edinmek için tıklayın.

Web uygulamalar içerisinde Collapse element kullanımında Shadow ile gölge efekti ekleyebilirsiniz. Collapse elementi mobil uygulamalarda olmadığından dolayı Shadow özelliği de yoktur.

Elementlere Shadow (Gölge) ekleme ile ilgili detaylı bilgi edinmek için tıklayın.

Last updated