Grupos de aninhamento no bloco zero

O Zero Block agora suporta aninhamento, permitindo que você coloque um grupo de elementos dentro de outro. Vamos explorar quando o aninhamento pode ser útil e como usá-lo.

O aninhamento pode ser especialmente útil ao projetar com o Auto Layout (contêineres flexíveis), criar cartões, galerias e muito mais. Por exemplo, você criou um cartão para o seu blog com um título, uma descrição e uma imagem. Em seguida, você agrupou esses elementos (selecionar vários elementos → Agrupar), definiu-o como um grupo de objetos (Grupo → Objeto) e ativou o Auto Layout (Auto Layout → Flex → Auto) para que a altura do cartão se ajuste automaticamente com base em seu conteúdo. Você também adicionou um URL e definiu uma cor de fundo.

Para ajustar com mais flexibilidade o espaçamento entre o título e a descrição, você agrupou esses dois elementos de texto e ativou o Auto Layout para esse novo grupo. Agora, você tem um grupo aninhado com propriedades flexíveis.

1. Por meio do painel Camadas.
2. Usando arrastar e soltar (somente com o Auto Layout ativado).
3. Com o atalho de teclado Cmd/Ctrl+G.
4. Por meio do painel Configurações.
5. No menu de contexto.

Você pode aninhar grupos dentro de outros grupos até cinco níveis de profundidade. Entretanto, os elementos agrupados como um grupo lógico não podem ser aninhados dentro de um grupo de objetos. Se você tentar aninhá-los, o grupo lógico será automaticamente convertido em um grupo de objetos.

Aqui estão alguns exemplos de quando os grupos de aninhamento são especialmente úteis e como você pode usá-los em seus projetos.

O aninhamento de grupos também é útil para aplicar diferentes efeitos de animação a vários grupos. Por exemplo, você pode definir uma animação de aparência para um cartão inteiro e uma animação de foco separada para um grupo aninhado com um único elemento, como uma seta.

O Auto Layout, combinado com o aninhamento, permite que você torne rapidamente o layout do seu site responsivo em diferentes resoluções de tela. Ele também evita o trabalho manual repetitivo - uma vez definidas, as configurações controlam automaticamente como todos os elementos respondem às alterações de conteúdo ou tamanho e se alinham de acordo.