Classi ausiliarie

Margini

Questa serie di classi di utility può aggiungere margin e padding agli elementi, con valori predefiniti multipli di 8px.

Il formato del nome della classe è: .mdui-{proprietà}-{direzione}-{dimensione}

Proprietà:

• m - imposta margin
• p - imposta padding

Direzione:

• t - imposta margin-top o padding-top
• b - imposta margin-bottom o padding-bottom
• l - imposta margin-left o padding-left
• r - imposta margin-right o padding-right
• x - imposta margin-left margin-right o padding-left padding-right
• y - imposta margin-top margin-bottom o padding-top padding-bottom
• a - imposta margin o padding

Dimensione:

• 0 - 0px
• 1 - 8px
• 2 - 16px
• 3 - 24px
• 4 - 32px
• 5 - 40px

.mdui-m-t-0 {
  margin-top: 0 !important;
}

.mdui-m-l-1 {
  margin-left: 8px !important;
}

.mdui-p-x-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.mdui-p-a-5 {
  padding: 40px !important;
}

Floating rapido

• .mdui-float-left fa fluttuare l'elemento a sinistra
• .mdui-float-right fa fluttuare l'elemento a destra

Centratura orizzontale

Aggiungendo la classe .mdui-center a qualsiasi elemento, è possibile centrarlo orizzontalmente.

Centratura verticale

Aggiungendo la classe .mdui-valign a qualsiasi elemento, i suoi elementi figli saranno centrati verticalmente.

Allineamento orizzontale

• .mdui-text-left Allinea il testo a sinistra.
• .mdui-text-center Allinea il testo al centro.
• .mdui-text-right Allinea il testo a destra.

Conversione maiuscole/minuscole del testo

• .mdui-text-lowercase Converte il testo in minuscolo.
• .mdui-text-uppercase Converte il testo in maiuscolo.
• .mdui-text-capitalize Converte la prima lettera di ogni parola in maiuscolo.

Troncamento automatico del testo

.mdui-text-truncate Tronca automaticamente il testo quando la lunghezza supera il limite, sostituendolo con i puntini di sospensione.

Pulizia float (Clearfix)

Aggiungendo la classe .mdui-clearfix all'elemento genitore, è possibile pulire il float.

Nascondi contenuto

• La classe .mdui-hidden viene utilizzata per nascondere gli elementi, equivalente ad aggiungere lo stile display: none;; l'elemento nascosto non occupa spazio nella pagina.
• La classe .mdui-invisible viene utilizzata per rendere l'elemento invisibile, ma occupa comunque spazio sulla pagina, equivalente ad aggiungere lo stile visibility: hidden;.

Utility responsive

Queste classi di utility utilizzano le media query per nascondere i contenuti su diversi dispositivi. Queste classi includono:

• .mdui-hidden-*: nascondi su dispositivi con la larghezza specificata.
• .mdui-hidden-*-up: nascondi su dispositivi con larghezza uguale o superiore a quella specificata.
• .mdui-hidden-*-down: nascondi su dispositivi con larghezza uguale o inferiore a quella specificata.

Ridimensiona la finestra del browser o visualizza i seguenti esempi su diversi dispositivi. La parte scura indica che è visibile nella finestra del browser corrente.