Gruppi di nidificazione nel blocco zero

Zero Block ora supporta la nidificazione, consentendo di inserire un gruppo di elementi all'interno di un altro. Vediamo quando l'annidamento può essere utile e come usarlo.

L'annidamento può essere particolarmente utile quando si progetta con il layout automatico (contenitori flessibili), si creano schede, gallerie e altro. Ad esempio, avete creato una scheda per il vostro blog con un titolo, una descrizione e un'immagine. Avete poi raggruppato questi elementi (seleziona più elementi → Raggruppa), li avete impostati come gruppo di oggetti (Raggruppa → Oggetto) e avete attivato il layout automatico (Layout automatico → Flex → Auto), in modo che l'altezza della scheda si regoli automaticamente in base al suo contenuto. È stato inoltre aggiunto un URL e impostato un colore di sfondo.

Per regolare in modo più flessibile la spaziatura tra il titolo e la descrizione, si sono raggruppati questi due elementi di testo e si è abilitato il layout automatico per questo nuovo gruppo. Ora si dispone di un gruppo annidato con proprietà flessibili.

1. Tramite il pannello Livelli.
2. Utilizzando il drag-and-drop (solo con il layout automatico abilitato).
3. Con la scorciatoia da tastiera Cmd/Ctrl+G.
4. Attraverso il pannello Impostazioni.
5. Dal menu contestuale.

💡 È possibile annidare gruppi all'interno di altri gruppi fino a cinque livelli di profondità. Tuttavia, gli elementi raggruppati come gruppo logico non possono essere annidati all'interno di un gruppo oggetto. Se si tenta di annidarli, il gruppo Logico si convertirà automaticamente in un gruppo Oggetto.

Ecco alcuni esempi di quando i gruppi di nidificazione sono particolarmente utili e come si possono usare nei vostri progetti.

La nidificazione dei gruppi è utile anche per applicare effetti di animazione diversi ai vari gruppi. Ad esempio, è possibile impostare un'animazione di aspetto per un'intera scheda e un'animazione hover separata per un gruppo annidato con un singolo elemento, come una freccia.

Il layout automatico, combinato con il nesting, consente di rendere rapidamente reattivo il layout del sito web a diverse risoluzioni dello schermo. Inoltre, evita il lavoro manuale ripetitivo: una volta impostate, le impostazioni controllano automaticamente il modo in cui tutti gli elementi rispondono alle modifiche del contenuto o delle dimensioni e si allineano di conseguenza.