Dikey yerleşim düzeni

Çevrimiçi düzenle

Görünümleri dikey olarak birbiri üzerine yerleştirebileceğiniz bir kısım yaratır. Görünüm bir listeye bağlı olduğunda dikey kısım listedeki her öğe için yenilenir ve bir tabloya benzer bir biçimde sonuçlanır.

Düşey yerleşim düzeni ve Yatay yerleşim , kullanıcı arabirimi tasarlamak için en sık kullanılan görünümler arasındadır. Birlikte kullanılan Yatay yerleşim ve Dikey yerleşim görünümleri, karmaşık kullanıcı arabirimleri tasarlamak için kullanabileceğiniz akış düzeni yeteneklerinin çoğunu sağlar.

İpucu: Genellikle, UI araç takımındaki Yatay yerleşim düzeni ve Dikey yerleşim görünümleri, Daraltılabilir panoile birlikte kullanılır.

Yapılandırma özellikleri

Yapılandırma' ın altında görünüm, yanıt veren ve performans özelliklerini ayarlayın ya da değiştirin.

Ekran Boyutu: Özellik adının yanında Ekran Boyutları simgesi olan bir yapılandırma özelliği, her ekran boyutu için farklı değerlere sahip olabilir. Bir değer ayarlamazsanız, ekran boyutu sonraki daha büyük ekran boyutunun değerini varsayılan değeri olarak devralır.

Tema tanımlamaları: Tema tanımlamaları, bir görünümün renklerini ve biçemlerini belirler ve görünüşünü belirler. Tema düzenleyicisinde görünümlerin görünümünü önizleyebilirsiniz. Bkz. Temalar.

Düşey yerleşim düzenine ilişkin görünüm yapılandırma özellikleri aşağıdaki çizelgede gösterilir:

Tablo 1. Düşey yerleşim düzeni için görünüm yapılandırma özellikleri
Görünüş yapılandırma özelliği	Açıklama	Veri tipi
Düzen akışı	Görünümlerin yerleşim düzeni: Yatay Yatay İç Kaydırma Yatay Dar Yatay Otomatik Kaydırma Dikey Düşey Dar	`String`
Yatay hizalama	Yerleşim düzenindeki görünümlerin yatay hizası: Gerekçeli Sola Merkezi Sağa Not: Yaslanmış , Yatay İç Kaydırma ve Yatay Otomatik Kaydırma düzen akışı ile birlikte iyi çalışmaz. Bu birleşimi kullanırsanız, beklenmeyen sonuçlar görebilirsiniz.	`String`
Dikey hizalama	Yerleşim düzenindeki görünümlerin dikey hizalaması. Bu özellik yalnızca yatay yerleşim düzeni akışları için geçerlidir. Üst Ortala Alt	`String`
Genişlik	Görünümün genişliğini belirtir. Genişliği `px` (piksel), `%` (yüzde) ya da `em` birimlerinde belirtebilirsiniz. Örneğin, `50px`, `20%`ya da `0.4em`. Birim tipi belirtilmezse, `px` varsayılır.	`String`
Yükseklik	Görünümün yüksekliğini `px` (piksel) ya da `em` birimlerinde belirtir. Birim tipi belirtilmezse, `px` varsayılır.	`String`

Düşey düzene ilişkin duyarlı yapılandırma özellikleri aşağıdaki tabloda listelenmiştir:

Tablo 2. Düşey yerleşim düzeni için duyarlı yapılandırma özellikleri
Duyarlı yapılandırma özelliği	Açıklama	Veri tipi
Duyarlı algılayıcı	(İsteğe bağlı) Bu yerleşimi içeren duyarlı algılayıcı görünümünün tanıtıcısı. Atlanırsa, üst kapsayıcıdaki en yakın algılayıcı kullanılır.	`Boolean`
Davranış	Bölümün, duyarlı algılayıcıda tanımlanan kutu etmenlerine dayalı olarak nasıl davranması gerektiğini belirtir. Box factor name(Kutu katsayısı adı): Bu özniteliklerin uygulandığı duyarlı algılayıcı kutusu katsayısının adı. Alt öğe yerleşim düzeni: Belirtilen kutu etmeniyle kullanabileceğiniz yerleşim düzeni. Dikey Düşey Dar Yatay Yatay İç Kaydırma Yatay Dar Yatay Otomatik Kaydırma Alt öğe hizalama: Belirtilen kutu etmeniyle kullanabileceğiniz hizalama: Gerekçeli Sola Merkezi Sağa Alt öğe genişliği: Bu kutu etmeniyle kullanabileceğiniz alt görünümlerin genişlikleri. Örneğin, `60%`. Yerleşim düzeninde bulunan görünümler için daha fazla genişlik belirtebileceğinizi unutmayın. Örneğin, `80%`, `20%`. Görünürlük: Belirtilen kutu etmeniyle kullanabileceğiniz görünürlük ayarları. Görünür Yok Gizli Genişlik: Belirtilen kutu etmeniyle kullanabileceğiniz bölüm genişliği. Yükseklik: Belirtilen kutu etmeniyle kullanabileceğiniz bölüm yüksekliği. CSS stili: Belirtilen kutu faktörüne uygulayabileceğiniz CSS stilleri. CSS sınıfı: Belirtilen kutu etmenine ekleyebileceğiniz CSS sınıfları.	`ResponsiveBehavior[]`

Duyarlı algılayıcı görünümünde dikey düzeninizi içiçe yerleştirerek de içeriğin yanıt verebilirliğini denetleyebilirsiniz.

Düşey yerleşim düzenine ilişkin başarım yapılanışı özellikleri aşağıdaki çizelgede listelenir:

Tablo 3. Düşey yerleşim düzeni için performans yapılandırması özellikleri
Performans yapılandırma özelliği	Açıklama	Veri tipi
Zamanuyumsuz yükleme	Bölüm yüklenmeye başladıktan sonra daha yavaş bir genel satır yükleme süresi pahasına büyük veri kümeleri için kullanıcı arabirimi deneyimini iyileştirir. Bu özellik yalnızca, bölüm bir listeye bağlandığında kullanılır.	`Boolean`
Zamanuyumsuz küme büyüklüğü	Zamanuyumsuz bir toplu işte zamanuyumlu olarak yüklenen satır sayısını belirtir. Zamanuyumlu ve zamanuyumsuz yükleme başarımını eniyilemek için bu özelliği kullanın. Bu özellik yalnızca, bölüm bir listeye bağlandığında kullanılır.	`Integer`

Kısıtlama: Görünüm görünürlüğünün Gösterolarak ayarlanmasına rağmen, Düşey düzen görünümüne ilişkin etiket görünmez. Dikey yerleşim düzeni görünümünüzü etiketleyebilmek için, bu görünümü bir pano görünümüyle birlikte kullanmak isteyebilirsiniz.

Örnek

Tasarımcıda, kapsayıcı görünümü olarak kullanacağınız sayfa düzeninize bir Düşey düzen görünümü ekleyin. Kapsayıcının içine, Work Categories, Claim Typeve Elementsadlarını verebileceğiniz üç Panel görünümü yerleştirin. Her görünüm için yapılandırma özelliklerini aşağıdaki gibi ayarlayın.

Düşey yerleşim düzeniiçin: Görünüşaltında, Düzen akışı öğesini Vertical, Yatay hizalama öğesini Justifiedolarak ve Dikey hizalama öğesini Topolarak ayarlayın. Genişlik ve Yükseklik seçeneğini boş bırakın.
Work Categoriesiçin: Görünüşaltında, Renk stili 'ni Warning, Genişlik ' yi 350pxolarak ayarlayın.
Claim Typeiçin: Görünüşaltında, Renk stili 'ni Success, Genişlik ' yi 350pxolarak ayarlayın.
Elementsiçin: Görünüşaltında, Renk stili 'ni Danger, Genişlik ' yi 350pxolarak ayarlayın.

Çalıştırma zamanında, sonuç aynı yükseklikte ve genişlikte üç panoyu gösterir, biri dikey bölümde üst üste yığılıdır: Work Categories Warningiçin sarı, Claim Type Successiçin yeşildir ve Elements Dangeriçin kırmızıdır.

<

Olaylar özelliklerinde görünüm için olay işleyicilerini ayarlayın ya da değiştirin. Olayları programlı olarak ya da kullanıcı görünümle etkileşimde bulunduğunda tetiklenecek şekilde ayarlayabilirsiniz. Olayları tanımlama ve kodlama hakkında bilgi için bkz. Kullanıcı tanımlı olaylar. Düşey yerleşim, aşağıdaki olay işleyici tiplerini içerir:

On load: Sayfa yüklendiğinde etkinleştirilmiştir. Örneğin:
```
me.setWidth("100%");
```
On responsive update: Bölüm, bir aygıtın ekran boyutuna göre yeniden boyutlandırıldığında etkinleştirilir.

yöntemler

Düşey yerleşim düzeni için kullanılabilecek yöntemler için Düşey yerleşim düzeni JavaScript API ' ye bakın.

Ek kaynaklar

Coach ya da sayfa yaratma hakkında bilgi için Coach oluşturmabaşlıklı konuya bakın.
Standart özelliklerle ilgili bilgi için (Genel, Yapılandırma, Konumlandırma, Görünürlükve HTML Öznitelikleri) bkz. Özelliklerin görüntülenmesi.