Layout automatico in Zero Block

Per attivare il layout automatico, accedere alle impostazioni del gruppo. Assicurarsi che gli elementi raggruppati siano impostati come gruppo "Oggetto" e non "Logico". Una volta selezionata l'opzione "Oggetto" in Gruppo, apparirà la sezione Layout automatico.

Nella sezione Layout automatico, scegliere "Auto" per l'impostazione Flex. L'attivazione del layout automatico consente di accedere a varie impostazioni che controllano il modo in cui gli elementi reagiscono alle modifiche del contenuto o delle dimensioni e si allineano di conseguenza all'interno del gruppo. Esploriamo queste impostazioni e impariamo a personalizzarle.

Con il layout automatico abilitato, sono disponibili due nuove impostazioni per i gruppi che consentono di gestire la larghezza e l'altezza del contenitore con gli elementi raggruppati.

Per impostazione predefinita, è selezionata l'opzione Abbraccio, che rende flessibile la dimensione del gruppo, regolandola in base alle dimensioni degli elementi all'interno del contenitore e alla distanza tra di essi.

Se si ridimensiona manualmente il gruppo o si imposta una larghezza o un'altezza personalizzata, Abbraccio passa automaticamente a Fisso. L'opzione Fisso significa che le dimensioni del gruppo sono personalizzate e non vengono modificate anche se si cambia la distanza tra gli elementi o la loro dimensione.

Si può notare che è disponibile un'altra impostazione Hug. Se attivata, ricalcola i valori di larghezza e altezza e li imposta al minimo possibile per adattarsi perfettamente a tutti gli elementi, tenendo conto delle loro dimensioni e del valore impostato nell'impostazione Gap (che controlla la spaziatura). Se si ridimensionano gli elementi, Hug regolerà automaticamente la larghezza o l'altezza di conseguenza.

L'impostazione Direzione controlla l'allineamento degli elementi all'interno del gruppo. Sono disponibili tre opzioni: Orizzontale, Verticale e A capo (passa alla riga successiva).

Quando si seleziona la direzione Orizzontale , tutti gli elementi saranno allineati lungo l'asse X. È l'ideale per disporre gli elementi in fila, come le icone, le voci di menu o i pulsanti.

Quando si imposta la direzione verticale, tutti gli elementi del gruppo saranno allineati lungo l'asse Y. Questo è particolarmente utile quando si progettano elenchi o schede impilate una sotto l'altra. Ciò è particolarmente utile quando si progettano elenchi o elementi di schede impilati uno sotto l'altro.

Quando si sceglie la direzione Wrap, gli elementi si allineano in una riga in base alla larghezza del contenitore. Se un elemento è troppo largo per essere inserito, viene spostato nella riga successiva. Questo può essere particolarmente utile per le gallerie fotografiche, le tag cloud a più righe e per rendere i siti web reattivi su diverse risoluzioni dello schermo.

L'impostazione Gap controlla la distanza tra gli elementi all'interno del gruppo in base alla direzione scelta. Per l'allineamento orizzontale, regola lo spazio sull'asse X, mentre per l'allineamento verticale, modifica lo spazio sull'asse Y. Quando è impostata la direzione A capo, è possibile specificare gli spazi per entrambi gli assi.

Si noti che se l'opzione Abbraccia è abilitata per la direzione scelta, la regolazione di Spazio può influire sulla larghezza o sull'altezza del contenitore.

L'impostazione Allinea elementi regola l'allineamento degli elementi di un gruppo lungo l'asse principale, in verticale o in orizzontale, in base alla direzione scelta.

Ad esempio, se si seleziona la direzione Orizzontale, gli elementi si allineano verticalmente al centro, in alto o in basso del contenitore. Al contrario, se si sceglie la direzione Verticale, gli elementi si allineano orizzontalmente al centro, a sinistra o a destra del contenitore. Tuttavia, se l'opzione Abbraccio è attivata e tutti gli elementi hanno la stessa larghezza o altezza, l'allineamento non cambia.

L'impostazione Giustifica contenuto fornisce opzioni di allineamento alternative, utilizzando un asse diverso da quello di Allinea elementi. Questa impostazione è disponibile solo quando l'opzione Abbraccia non è selezionata per la larghezza o l'altezza lungo l'asse.

Oltre all'allineamento centrale o laterale di base, sono disponibili anche opzioni di allineamento intelligente:

L'opzione Spazio tra distribuisce uniformemente gli elementi all'interno del gruppo, senza spazi bianchi tra questi e il contenitore.

L'opzione Spazio intorno distribuisce gli elementi in modo uniforme all'interno del gruppo, assicurando che la distanza tra gli elementi e il contenitore sia pari alla metà della distanza tra gli elementi.

L'opzione Spazio uniformemente distribuisce gli elementi in modo uniforme all'interno del gruppo, assicurando che la distanza tra gli elementi e il contenitore sia pari alla distanza tra gli elementi.

L'impostazione Allinea contenuto dispone gli elementi all'interno del gruppo ed è disponibile solo quando è selezionata la direzione A capo e ci sono più righe di contenuto. Allinea verticalmente tutte le righe al contenitore, a meno che non sia selezionato Abbraccia.

Con Allinea contenuto, è possibile allineare le righe come di consueto al centro o ai lati. Analogamente all'impostazione precedente, è possibile scegliere una delle opzioni di allineamento intelligente: Spazio tra (che distribuisce uniformemente gli elementi senza alcuna spaziatura dal contenitore), Spazio intorno (che distribuisce uniformemente gli elementi con una distanza dal contenitore pari alla metà della spaziatura tra gli elementi) e Spazio uniforme (che distribuisce uniformemente gli elementi con una distanza dal contenitore pari alla spaziatura tra gli elementi).