Adicionar um esquema aninhado.
Pode pôr uma fila dentro de uma coluna para subdividir essa coluna, como dois ícones lado a lado por cima de um cabeçalho. Use-a quando uma coluna precisar de uma grelha mais fina do que a fila à volta. O exemplo adiciona uma fila de dois ícones à coluna do meio de uma fila de três colunas. Para a sua primeira fila, comece por Adicionar uma fila.
Adicionar um esquema aninhado
- Adicione uma secção com uma fila e colunas.
- Paire o cursor sobre uma coluna e clique em + na sua barra Column.
- No seletor de elementos, selecione Row no separador Layout.
- A fila aninhada aparece dentro da coluna com colunas próprias.
- Adicione elementos às colunas aninhadas como habitualmente, por exemplo um Icon em cada.
- Clique em Save na barra de ferramentas para guardar a página.
Os elementos novos ficam no topo da sua coluna, por isso a fila aninhada fica por cima do texto da coluna.
O que vê
O lápis e a estrela ficam lado a lado no topo da coluna do meio, por cima do cabeçalho Design. As colunas exteriores não mudam. No editor, a fila aninhada tem as suas próprias barras Row e Column, dentro das da fila exterior.
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
Configure o seu esquema aninhado
Uma fila aninhada tem o mesmo ícone de grelha e as mesmas definições que qualquer fila; veja Adicionar uma fila. As suas larguras são frações da coluna-mãe, não da página. Uma coluna de meia largura com uma fila aninhada de duas metades dá duas áreas de um quarto.
Em ecrãs com menos de 768 píxeis, as colunas aninhadas empilham-se como as exteriores. Dê à fila aninhada um esquema de telemóvel com Add screen size se os ícones deverem ficar lado a lado.
Profundidade máxima de aninhamento
As filas aninham-se três níveis: uma fila, uma fila numa das suas colunas e mais uma fila dentro dessa. Um quarto nível é recusado. O mesmo limite aplica-se a cada tipo de contentor por si, como Tabs dentro de Tabs. Um tipo nunca conta para o limite de outro tipo.
Dois níveis chegam para a maioria dos esquemas. Cada nível extra acrescenta barras de controlos por onde apontar e estreita o espaço para o conteúdo.
Padrões comuns de aninhamento
| Padrão | Como se constrói |
|---|---|
| Grelha de funcionalidades | Uma fila de três colunas, cada uma com uma fila aninhada: um ícone ao lado do seu texto |
| Blocos de barra lateral | Uma fila 2/3 + 1/3 cuja coluna estreita tem filas aninhadas, uma por bloco |
| Membros da equipa | Uma fila de duas colunas, cada uma com uma fila aninhada 1/3 + 2/3: um retrato ao lado da biografia |
Se não a vir
- Um aviso diz que só pode aninhar filas 3 níveis. A coluna já está dentro de duas filas aninhadas, por isso "Element cannot be added". Adicione a fila a uma coluna um nível acima ou use uma predefinição com mais colunas na fila exterior.
- A fila aninhada fica por cima do texto em vez de por baixo. Os elementos novos ficam no topo da sua coluna. Abra More na barra da fila aninhada e escolha Move Down.
- Os ícones empilham-se no telemóvel. As colunas aninhadas empilham-se abaixo de 768 píxeis, como todas as colunas. Clique no ícone de grelha da fila aninhada, depois em Add screen size, e escolha 1/2 + 1/2 para Extra small (< 576px).
E a seguir?
- Adicionar um contentor de camadas posicionadas: sobreponha elementos de formas que a grelha não consegue.
- Adicionar uma fila: predefinições de colunas e um esquema por tamanho de ecrã.
- Adicionar um painel de separadores: empilhe painéis de conteúdo num lugar em vez de lado a lado.