Układ pionowy

Edycja w trybie z połączeniem

Służy do tworzenia sekcji, w której można układać widoki w pionie (jeden na drugim). Jeśli widok jest powiązany z listą, pionowa sekcja jest powtarzana dla każdej pozycji listy, co powoduje utworzenie struktury podobnej do tabeli.

Układ pionowy i Układ poziomy należą do widoków, które są najczęściej używane do projektowania interfejsu użytkownika. Widoki Układ poziomy i Układ pionowy używane razem udostępniają większość możliwości układu przepływu, które są potrzebne podczas projektowania złożonego interfejsu użytkownika.

Wskazówka: Zwykle układ Poziomy i widoki układu pionowego w bibliotece narzędziowej interfejsu użytkownika są używane w połączeniu z panelem zwijalnym.

Właściwości konfiguracyjne

W obszarze Konfiguracja można ustawić lub zmodyfikować właściwości wyglądu, reaktywności i wydajności widoku.

Wielkość ekranu: Właściwość konfiguracyjna, na której znajduje się ikona Rozmiarów ekranu obok nazwy właściwości, może mieć różne wartości dla każdej wielkości ekranu. Jeśli nie zostanie ustawiona wartość, wielkość ekranu dziedziczy wartość następnej większej wielkości ekranu jako swoją wartość domyślną.

Definicje kompozycji: Definicje kompozycji służą do podawania kolorów i stylów widoku oraz do określania jego wyglądu. W edytorze kompozycji można wyświetlić podgląd wyglądu i zachowania widoku. Patrz Kompozycje.

Właściwości konfiguracyjne wyglądu elementu Układ pionowy znajdują się w poniższej tabeli:

Tabela 1. Właściwości konfiguracyjne wyglądu elementu Układ pionowy
Właściwość konfiguracyjna wyglądu	Opis	Typ danych
Przepływ układu	Układ widoków: Poziomy Poziomy z przewijaniem wstawianym Poziomy ciasny Poziomy z opływaniem automatycznym Pionowy Pionowy ciasny	`String`
Wyrównanie w poziomie	Wyrównanie w poziomie widoków w układzie: Wyrównaj Strona lewa: Środek Strona prawa: Uwaga: Opcja Wyrównaj nie działa dobrze w połączeniu z przepływami układu Poziomy z przewijaniem wstawianym i Poziomy z opływaniem automatycznym. Jeśli użyjesz tej kombinacji, mogą zostać uzyskane nieoczekiwane wyniki.	`String`
Wyrównanie pionowe	Wyrównanie w pionie widoków w układzie. Ta właściwość ma zastosowanie tylko do przepływów w układzie poziomym. Góra Wyśrodkowanie w pionie Dół	`String`
Szerokość	Służy do podawania szerokości widoku. Szerokość jest wyrażana w pikselach (`px`), jako wartość procentowa (`%`) lub w firetach (`em`). Na przykład: `50px`, `20%`lub `0.4em`. Jeśli nie jest podany typ jednostki, domyślnie używana jest jednostka `px` (piksele).	`String`
Wysokość	Służy do podawania wysokości widoku, która jest wyrażana w pikselach (`px`) lub w firetach (`em`). Jeśli nie jest podany typ jednostki, domyślnie używana jest jednostka `px` (piksele).	`String`

Właściwości konfiguracyjne reaktywności elementu Układ pionowy znajdują się w poniższej tabeli:

Tabela 2. Właściwości konfiguracyjne reaktywności elementu Układ pionowy
Właściwość konfiguracyjna reaktywności	Opis	Typ danych
Czujnik reaktywny	(Opcjonalna) Identyfikator widoku Czujnik reaktywny, który zawiera ten układ. Jeśli ta właściwość zostanie pominięta, będzie używany najbliższy czujnik w kontenerze nadrzędnym.	`Boolean`
zachowanie;	Służy do określenia zachowania sekcji na podstawie czynników pola zdefiniowanych w czujniku reaktywnym. Nazwa czynnika pola: nazwa czynnika pola czujnika reaktywnego, do którego te atrybuty mają zastosowanie. Układ podrzędny: układ, którego można użyć w przypadku podanego czynnika pola. Pionowy Pionowy ciasny Poziomy Poziomy z przewijaniem wstawianym Poziomy ciasny Poziomy z opływaniem automatycznym Wyrównanie podrzędne: wyrównanie, którego można użyć w przypadku podanego czynnika pola: Wyrównaj Strona lewa: Środek Strona prawa: Szerokość podrzędna: szerokości podrzędnych widoków, których można używać z tym czynnikiem pola. Na przykład: `60%`. Należy pamiętać, że można podać więcej szerokości dla widoków, które są uwzględnione w układzie. Na przykład: `80%`, `20%`. Widoczność: ustawienia widoczności, których można użyć z podanym czynnikiem pola. Widoczna Brak Ukryte Szerokość: szerokość sekcji, której można użyć z podanym czynnikiem pola. Wysokość: wysokość sekcji, której można użyć z podanym czynnikiem pola. Styl CSS: style CSS, które można zastosować do podanego czynnika pola. Klasa CSS: klasy CSS, które można dodać do podanego czynnika pola.	`ResponsiveBehavior[]`

Można również sterować odpowiedzialnością treści, zagnieżdżając układ pionowy w widoku Czujnik responsywny .

Właściwości konfiguracyjne wydajności elementu Układ pionowy znajdują się w poniższej tabeli:

Tabela 3. Właściwości konfiguracyjne wydajności elementu Układ pionowy
Właściwość konfiguracyjna wydajności	Opis	Typ danych
Ładowanie asynchroniczne	Zwiększa możliwości interfejsu użytkownika w przypadku dużych zestawów danych kosztem wydłużenia ogólnego czasu ładowania wierszy po rozpoczęciu ładowania sekcji. Ta właściwość jest używana tylko wtedy, gdy sekcja jest powiązana z listą.	`Boolean`
Wielkość partii asynchronicznej	Służy do podawania liczby wierszy ładowanych synchronicznie w partii asynchronicznej. Można użyć tej właściwości, aby zoptymalizować wydajność ładowania synchronicznego i asynchronicznego. Ta właściwość jest używana tylko wtedy, gdy sekcja jest powiązana z listą.	`Integer`

Ograniczenie: Etykieta dla widoku układu pionowego nie jest wyświetlana, mimo że widoczność widoku jest ustawiona na Pokaż. Aby móc oznaczyć widok Układ pionowy, można go użyć w połączeniu z widokiem panelu.

Przykład

W projektancie dodaj widok układu pionowego do układu strony, który będzie używany jako widok kontenera. W kontenerze umieść trzy widoki panelu, które można nazwać Work Categories, Claim Typei Elements. W przypadku każdego widoku należy ustawić właściwości konfiguracyjne, tak jak to pokazano poniżej.

W przypadku opcji Układ pionowy: w obszarze Wyglądustaw opcję Przepływ układu na Vertical, Wyrównanie w poziomie do Justifiedi Wyrównanie w pionie do Top. Pozostaw puste pola Szerokość i Wysokość .
W przypadku produktu Work Categories: w sekcji Wyglądustaw wartość Styl kolorów na wartość Warning, a wartość Szerokość na 350px.
W przypadku produktu Claim Type: w sekcji Wyglądustaw wartość Styl kolorów na wartość Success, a wartość Szerokość na 350px.
W przypadku produktu Elements: w sekcji Wyglądustaw wartość Styl kolorów na wartość Danger, a wartość Szerokość na 350px.

W czasie wykonywania wynik przedstawia trzy panele o tej samej wysokości i szerokości, skumulowane jeden na drugim w pionie sekcji: Work Categories jest żółty dla Warning, Claim Type jest zielony dla Success, a Elements jest czerwony dla Danger.

Zdarzenia

We właściwościach Zdarzenia można ustawiać i modyfikować procedury obsługi zdarzeń widoku. Zdarzenia mogą być uruchamiane w sposób programowy lub w wyniku interakcji użytkownika z widokiem. Informacje na temat definiowania zdarzeń i kodu zdarzeń zawiera sekcja Zdarzenia zdefiniowane przez użytkownika. Układ pionowy ma następujące typy procedur obsługi zdarzeń:

On load: aktywowano podczas ładowania strony. Na przykład:
```
me.setWidth("100%");
```
On responsive update: aktywowano, gdy sekcja jest zmieniana zgodnie z wielkością ekranu urządzenia.

metody

Informacje na temat metod dostępnych dla układu pionowego można znaleźć w sekcji Interfejs API języka JavaScript w układzie pionowym.

Zasoby dodatkowe

Więcej informacji na temat sposobu tworzenia formatki lub strony zawiera sekcja Budowanie formatek.
Informacje na temat standardowych właściwości (Ogólne, Konfiguracja, Pozycjonowanie, Widocznośći Atrybuty HTML) można znaleźć w sekcji Właściwości widoku.