È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Divider

I Divider vengono utilizzati per gestire e separare i contenuti negli elenchi e nei layout di pagina, al fine di conferire ai contenuti un migliore effetto visivo e senso dello spazio.

Modalità d'uso

I Divider sono scritti in puro CSS; basta scrivere il codice HTML perché abbiano effetto.

Colori

Divider scuro, per sfondi chiari
Divider chiaro, per sfondi scuri
Divider con colore a regolazione automatica, che si adatterà automaticamente al tema della pagina come scuro o chiaro

Letture correlate

Linee guida di design Material Design: Componenti - Divider

Stile

Divider a larghezza intera

I Divider a larghezza intera occupano il 100% della larghezza. I nomi delle classi utilizzabili includono:

mdui-divider: scuro nel tema predefinito, chiaro nel tema scuro.
mdui-divider-light: Divider chiaro, da utilizzare su sfondi scuri.
mdui-divider-dark: Divider scuro, da utilizzare su sfondi chiari.

Esempio

<div class="mdui-divider"></div>

Divider rientrante (inset)

Il Divider rientrante ha una distanza di 72px dal lato sinistro, ed è spesso utilizzato in elenchi con avatar o icone. I nomi delle classi utilizzabili includono:

mdui-divider-inset: scuro nel tema predefinito, chiaro nel tema scuro.
mdui-divider-inset-light: Divider chiaro rientrante, da utilizzare su sfondi scuri.
mdui-divider-inset-dark: Divider scuro rientrante, da utilizzare su sfondi chiari.

Esempio

<div class="mdui-divider-inset"></div>

Elenco classi CSS

Nome classe	Descrizione
`.mdui-divider`	Definisce un Divider. È scuro nel tema predefinito e chiaro nel tema scuro.
`.mdui-divider-light`	Definisce un Divider chiaro, per sfondi scuri.
`.mdui-divider-dark`	Definisce un Divider scuro, per sfondi chiari.
`.mdui-divider-inset`	Definisce un Divider rientrante. È scuro nel tema predefinito e chiaro nel tema scuro.
`.mdui-divider-inset-light`	Definisce un Divider chiaro rientrante, per sfondi scuri.
`.mdui-divider-inset-dark`	Definisce un Divider scuro rientrante, per sfondi chiari.

Select

Pannello pieghevole