Aggiunta di un layout annidato.

Puoi mettere una riga dentro una colonna per dividere di nuovo quella colonna, per esempio due icone fianco a fianco sopra un’intestazione. Usalo quando una colonna ha bisogno di una griglia più fine della riga intorno. L’esempio aggiunge una riga di due icone alla colonna centrale di una riga a tre colonne. Per la tua prima riga, parti da Righe e colonne.

Aggiungi un layout annidato

1. Aggiungi una sezione con una riga e colonne.
2. Passa sopra a una colonna e fai clic su + sulla sua barra Column.
3. Nel selettore di elementi scegli Row dalla scheda Layout.
4. La riga annidata compare dentro la colonna con colonne proprie.
5. Aggiungi elementi alle colonne annidate come al solito, per esempio un’Icon in ciascuna.
6. Fai clic su Save nella barra degli strumenti per salvare la pagina.

I nuovi elementi arrivano in cima alla loro colonna, quindi la riga annidata sta sopra il testo della colonna.

Cosa vedi

La matita e la stella stanno fianco a fianco in cima alla colonna centrale, sopra l’intestazione Design. Le colonne esterne sono invariate. Nell’editor, la riga annidata ha le sue barre Row e Column, dentro quelle della riga esterna.

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

Configura il tuo layout annidato

Una riga annidata ha la stessa icona griglia e le stesse impostazioni di qualsiasi riga; vedi Righe e colonne. Le sue larghezze sono quote della colonna madre, non della pagina. Una colonna a mezza larghezza che contiene una riga annidata di due metà ti dà due aree da un quarto.

Sugli schermi più stretti di 768 pixel, le colonne annidate si impilano come quelle esterne. Dai alla riga annidata un layout per telefono con Add screen size se le icone devono restare fianco a fianco.

Profondità massima di annidamento

Le righe si annidano fino a tre livelli: una riga, una riga in una delle sue colonne e un’altra riga dentro quella. Un quarto livello è rifiutato. Lo stesso limite vale per ogni tipo di contenitore per conto suo, come Tabs dentro Tabs. Un tipo non conta mai verso il limite di un altro tipo.

Due livelli coprono la maggior parte dei layout. Ogni livello in più aggiunge barre dei controlli da superare e restringe lo spazio per i contenuti.

Schemi di annidamento comuni

Se non lo vedi

• Un avviso dice che puoi annidare le righe solo fino a 3 livelli. La colonna si trova già dentro due righe annidate, quindi "Element cannot be added". Aggiungi la riga a una colonna di un livello sopra, oppure usa un preset con più colonne sulla riga esterna.
• La riga annidata sta sopra il testo invece che sotto. I nuovi elementi arrivano in cima alla loro colonna. Apri More sulla barra della riga annidata e scegli Move Down.
• Le icone si impilano sul telefono. Le colonne annidate si impilano sotto i 768 pixel, come tutte le colonne. Fai clic sull’icona griglia della riga annidata, poi su Add screen size, e scegli 1/2 + 1/2 per Extra small (< 576px).

E adesso?

• Livelli posizionati: sovrapponi gli elementi in modi che la griglia non può.
• Righe e colonne: preset di colonna e un layout per dimensione di schermo.
• Schede: impila pannelli di contenuto in un unico punto invece che fianco a fianco.