Dodawanie układu zagnieżdżonego..

Learn DXPR BuilderBuild pagesAdd contentLay-out

W kolumnie możesz umieścić wiersz, aby podzielić ją jeszcze raz, na przykład dwie ikony obok siebie nad nagłówkiem. Użyj tego, gdy jedna kolumna potrzebuje drobniejszej siatki niż otaczający ją wiersz. Przykład dodaje wiersz dwóch ikon do środkowej kolumny wiersza trzykolumnowego. Pierwszy wiersz zacznij od wierszy i kolumn.

Wiersz trzykolumnowy, którego środkowa kolumna trzyma zagnieżdżony wiersz z ikoną ołówka i ikoną gwiazdki nad tekstem Design

Dodawanie układu zagnieżdżonego

  1. Dodaj sekcję z wierszem i kolumnami.
  2. Najedź na kolumnę i kliknij + na jej pasku Column.
  3. W selektorze elementów wybierz Row na karcie Layout.
  4. Zagnieżdżony wiersz pojawia się w kolumnie z własnymi kolumnami.
  5. Dodaj elementy do zagnieżdżonych kolumn jak zwykle, na przykład Icon do każdej.
  6. Kliknij Save na pasku narzędzi, aby zapisać stronę.

Nowe elementy lądują na górze kolumny, więc zagnieżdżony wiersz siada nad tekstem kolumny.

Efekt

Ołówek i gwiazdka stoją obok siebie na górze środkowej kolumny, nad nagłówkiem Design. Zewnętrzne kolumny są bez zmian. W edytorze zagnieżdżony wiersz ma własne paski Row i Column, wewnątrz pasków zewnętrznego wiersza.

Section
  Row (1/3 + 1/3 + 1/3)
    Column
      Text: Discovery
    Column
      Row (nested, 1/2 + 1/2)
        Column
          Icon: pencil
        Column
          Icon: star
      Text: Design
    Column
      Text: Delivery

Konfiguracja układu zagnieżdżonego

Zagnieżdżony wiersz ma tę samą ikonę siatki i ustawienia co każdy wiersz; zobacz wiersze i kolumny. Jego szerokości są udziałami kolumny nadrzędnej, nie strony. Kolumna o połowie szerokości z zagnieżdżonym wierszem dwóch połówek daje dwa obszary o ćwierci szerokości.

Na ekranach węższych niż 768 pikseli zagnieżdżone kolumny układają się jedna pod drugą, tak jak zewnętrzne. Daj zagnieżdżonemu wierszowi układ na telefon opcją Add screen size, jeśli ikony mają zostać obok siebie.

Maksymalna głębokość zagnieżdżenia

Wiersze zagnieżdżają się na trzy poziomy: wiersz, wiersz w jednej z jego kolumn i jeszcze jeden wiersz w środku. Czwarty poziom jest odrzucany. Ten sam limit dotyczy każdego rodzaju kontenera z osobna, na przykład kart w kartach. Jeden rodzaj nigdy nie liczy się do limitu innego.

Dwa poziomy wystarczają większości układów. Każdy kolejny poziom dodaje paski sterowania do ominięcia i zwęża miejsce na treść.

Popularne wzorce zagnieżdżenia

Wzorzec Jak jest zbudowany
Siatka funkcji Wiersz trzech kolumn, każda z zagnieżdżonym wierszem: ikona obok tekstu
Bloki paska bocznego Wiersz 2/3 + 1/3, którego wąska kolumna trzyma zagnieżdżone wiersze, po jednym na blok
Członkowie zespołu Wiersz dwóch kolumn, każda z zagnieżdżonym wierszem 1/3 + 2/3: portret obok biogramu

Jeśli go nie widzisz

  • Ostrzeżenie mówi, że wiersze można zagnieżdżać tylko na 3 poziomy. Kolumna siedzi już w dwóch zagnieżdżonych wierszach, więc pada komunikat „Element cannot be added”. Dodaj wiersz do kolumny o poziom wyżej albo użyj presetu z większą liczbą kolumn w wierszu zewnętrznym.
  • Zagnieżdżony wiersz siada nad tekstem zamiast pod nim. Nowe elementy lądują na górze kolumny. Otwórz More na pasku zagnieżdżonego wiersza i wybierz Move Down.
  • Ikony układają się jedna pod drugą na telefonie. Zagnieżdżone kolumny układają się w stos poniżej 768 pikseli, jak wszystkie kolumny. Kliknij ikonę siatki zagnieżdżonego wiersza, potem Add screen size i wybierz 1/2 + 1/2 dla Extra small (< 576px).

Co dalej?