Düzen öğeleri, diğer öğeleri bir araya getirir ve ekrandaki yerleşimlerini kontrol eder.

Flow Builder dört tür düzen öğesi içerir:

• Containers: çocuk öğeleri bir eksen boyunca düzenler — dikey veya yatay
• Carousel: aynı anda bir slayt gösteren kaydırılabilir bir container
• Bottom Sheet: ekranın altından yukarı kayan ve altta kalan içeriğin üzerinde görüntülenen bir panel
• Dividers: satırları veya sütunları ayıran ince çizgiler

Konteynerler

Konteynerler, elementleri dikey veya yatay olarak gruplar. Vertical Container elementleri satırlar halinde; Horizontal Container ise sütunlar halinde düzenler.

Konteyner yönünü değiştirme

Bir konteynerin yönü sabit değildir. Sağ panelin Layout bölümünden istediğiniz zaman Vertical, Horizontal ve Free arasında geçiş yapabilirsiniz — konteyneri silip yeniden oluşturmanıza gerek yoktur.

Aralık, hizalama ve dağılım ayarlarını da aynı Layout bölümünden yapılandırabilirsiniz. Alt öğeler Layers panelinde göründükleri sıraya göre render edilir — yeniden sıralamak için sürükleyip bırakın.

Sarmalama ve sarmalamayı kaldırma

Mevcut bir öğeyi konteynere dönüştürmek için öğeyi seçin ve Wrap katman eylemini kullanın. Ek öğeleri Layers panelinden yeni konteynere sürükleyin. Bir stack’i kaldırıp alt öğelerini bir üst seviyeye taşımak için Unwrap seçeneğini kullanın.

Carousel

Carousel, bir seferde tek bir slayt gösteren, kaydırılabilir bir kapsayıcıdır. Kullanıcı bir sonraki slayta geçmek için yatay olarak kaydırabilir ya da carousel belirli bir süre sonra otomatik olarak ilerler.

Carousel, bir dizi Slide katmanı içerir. Slayt etkin olduğunda, o katmandaki öğeler ekranda görünür. Sekmelerin aksine, carousel’in aktif slaytı seçilebilir grup olarak sunulmaz — slaytlar koşullarda veya dinamik metinlerde referans alınamaz. Kullanıcı tarafından yönlendirilen dallanmalar için değil, görsel döngü için Carousel kullanın.

Aktif slaytı değiştirme

Karuseli seçtiğinizde, builder’da bir Slide açılır menüsü ve + Add Slide düğmesi içeren açılır kontrol çubuğu görünür.

• Yeni boş bir slayt eklemek için + Add Slide düğmesine tıklayın.
• Tuvalde hangi slaytın aktif olacağını değiştirmek için Slide açılır menüsünü kullanın ya da Layers panelindeki ilgili Slide katmanına tıklayın.

Slaytları yeniden sıralamak için Layers panelindeki Carousel içinde sürükleyip bırakın.

Özellikler

Otomatik kaydırma

Otomatik kaydırma, slaytları otomatik olarak geçirir — kullanıcının tüm içeriği görmek için kaydırması gerekmez.

İki zamanlama kontrolü davranışını belirler:

• Delay — her slaytın ekranda ne kadar süre kaldığı (ms).
• Duration — slaytlar arasındaki geçişin ne kadar sürdüğü (ms).

Carousel boyutlandırma

Özel kontroller, carousel’in boyutunu ve bitişik slaytlar arasındaki boşluğu belirler. Kullanıcı farklı içerik uzunluklarına sahip slaytlar arasında geçiş yaparken düzenin kaymaması için Height değerini Fixed olarak ayarlayın.

Slayt boyutlandırma

Slayt başına Width ve Height. Varsayılan olarak Fill şeklindedir; böylece her slayt carousel’in boyutlarını takip eder. Bitişik slaytların kısmen görünür olduğu bir peek efekti oluşturmak için sabit bir genişlik belirleyin.

Noktalar

Karuselın altındaki sayfa göstergesi. Kullanıcıya kaç slayt olduğunu ve hangisinin aktif olduğunu bildirir.

Slayt göstergesini gizlemek için Show dots geçişini kapatın. Noktalar görünür durumdayken aşağıdaki özellikler görünümlerini denetler:

• Color — etkin olmayan bir noktanın dolgu rengi.
• Active Color — şu anda görünen slaytın noktasının dolgu rengi.
• Size — her noktanın çapı, piksel cinsinden.
• Gap — bitişik noktalar arasındaki boşluk.
• Padding — nokta satırı ile üzerindeki carousel içeriği arasındaki boşluk.

Bottom Sheet

Bottom Sheet, ekranın alt kısmından yukarı doğru kayan ve mevcut içeriğin üzerinde görünen bir düzen panelidir.

Sheet, arkasındaki her şeyi her zaman bulanıklaştırır; bu bulanıklık kapatılamaz. Ekran yüklendiğinde değil, bir dokunuşla tetiklenecek şekilde kullanın — örneğin bir Show all plans bağlantısının arkasına yerleştirin.

Yapı

Bir Bottom Sheet iki üst düzey katmanla gelir:

• Heading — sayfanın üstündeki bir kapsayıcıdır; önceden doldurulmuş bir Title metin katmanı ve bir Close button içerir. Gerektiğinde düzenleyebilir veya kaldırabilirsiniz.
• Content — ana kapsayıcıdır. İçine ürünler, düğmeler, bağlantılar veya başka öğeler ekleyebilirsiniz.

Başlangıç görünürlüğü

Varsayılan olarak, bir alt sayfa ekran render edildiği anda görünür. Bunun yerine isteğe bağlı açmak için:

1. Önce sayfanın içeriğini oluşturun — gizli katmanlar düzenlenemez, bu nedenle doldurma işlemi bitene kadar sayfa görünür kalmalıdır.
2. Layers panelinde alt sayfayı seçin.
3. Visibility ayarını Hide olarak ayarlayın.

Sayfa, katman ağacında kalır ancak ekranda render edilmez.

Alt sayfayı tetikleme

Gizli bir alt sayfayı açmak için başka bir öğeye Show eylemi ekleyin:

1. Tetikleyici öğeyi seçin (örneğin, bir düğme veya metin bağlantısı).
2. Sağ panelde Interactions sekmesini açın.
3. Add trigger > On tap seçeneğine tıklayın, ardından Add action deyin.
4. Action alanını Show olarak ayarlayın ve açılır menüden alt sayfayı seçin.

Bölücüler

Horizontal Divider ve Vertical Divider, içerikleri birbirinden ayıran ince çizgilerdir. Satırları ayırmak için Horizontal Divider’ı, yatay bir kapsayıcı içindeki sütunları ayırmak için ise Vertical Divider’ı kullanın. Kalınlığı, rengi ve uzunluğu sağ panelden ayarlayabilirsiniz.