eshiol.it

Elenco completo delle classi per la gestione della spaziatura: 'padding' e 'margin'

Assegna agli elementi i valori di margin o di padding con le classi apposite per le singole proprietà. Le dimensioni delle spaziature possono variare da .4rem a 4rem. Questo si traduce in valori compresi tra 4px e 40px, visto che il Web Toolkit usa un font-size di base di 10px sia per dispositivi mobili che per dispositivi desktop.

Le classi sono denominate utilizzando il formato u-{proprietà}-{lato}-{dimensione}

Dove la proprietà è una tra:

• margin - per le classi che impostano margin 
• padding - per le classi che impostano padding 

Dove lati è uno tra:

• top - per le classi che impostano  margin-top o padding-top
• bottom - per le classi che impostano  margin-bottom o padding-bottom 
• left - per le classi che impostano  margin-left o padding-left 
• right - per le classi che impostano  margin-right o padding-right 

Dove la dimensione è una tra:

• xxs per le classi che impostano margin o padding a 0.4rem
• xs per le classi che impostano margin o padding a 0.8rem
• s per le classi che impostano margin o padding a 1.6rem
• m per le classi che impostano margin o padding a 2rem
• l per le classi che impostano margin o padding a 2.4rem
• xl per le classi che impostano margin o padding a 3.2rem
• xxl per le classi che impostano margin o padding a 4rem

Componente di navigazione basato su tiles (piastrelle)

---

Nella versione base le tiles vengono disposte 3 per riga. In modalità mobile vengono disposte su una unica colonna.

Si tratta di un menu ad un solo livello associato ad un modulo con layout Entrypoint.

Di default il colore della singola tile è u-background-compl-80 e dipende dal tema scelto. Il colore può essere modificato intervenendo su Classe CSS del link della singola voce di menu.

L'elenco dei colori disponibili per il background è consultabile qui. Background

---

La variante multilivello permette di disporre più tiles in colonna sulla stessa riga.

Bisogna strutturarlo con voci di menu di sistema “separatore” che permettono di distribuire gli Entrypoint su più colonne separate (nell'esempio tre colonne differenti).

---

Per rendere il nostro Entrypoint più accattivante aggiungiamo qualche dettaglio nella formattazione.

Possiamo modificare dimensione e colore del carattere agendo sul parametro Classe CSS del link della singola voce di menu.

ANAC Importer

Anche nel caso delle voci entrypoint è possibile aggiunge una icone agendo sul campo Classe Immagine della singola voce di menu.

Users Importer

L'elenco delle icone disponibili è consultabile qui: Icone

Nel caso si voglia dare particolare importanza ad una voce di menu è possibile associare una immagine. Siccome di default l'immagine è posta a sinistra del titolo del link, tramite il parametro Classe CSS del link è possibile modificarne la formattazione.

Template ItaliaPA

li:u-textCenter allinea immagine e testo al centro mentre li:u-imageTitleNoWrap posizione il titolo su una sola linea.

Ultimo dettaglio la possibilità di formattare le singole colonne affinché occupino tutto lo spazio disponibile.

Il risultato può essere ottenuto lavorando sulle singole voci di menu oppure aggiungendo la classe u-flex al parametro Suffisso classe menu del modulo

La voce di menu Articoli >> Articoli in evidenza di tutte le categorie con layout Default presenta gli articoli in evidenza di tutte le categorie in tre sezioni distinte.

Nella prima sezione è presente un Carousel che mostra i primi n. articoli principali con Layout: News | Web Toolkit

Nella seconda sezione sono mostrati n. articoli introduttivi disposti su n. colonne con layout Layout: Default | Web Toolkit

L'ultima sezione presenta una lista di n. link con layout Linklist: Default | Web Toolkit

---

---

---

All'interno del megamenu è possibile aggiungere pulsanti invece di semplici voci di menu. È il caso del pulsante Accedi/Esci.

Leggi tutto...