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

List

Le liste visualizzano più righe di elementi in modo verticale. Ogni riga può contenere icone, avatar, testo, ecc.

Modalità d'uso

Il componente lista è scritto in puro CSS, basta scrivere il codice HTML perché abbia effetto.

Colori

Colore di sfondo: sfondo trasparente.

Colore del testo: nero nel tema chiaro, bianco nel tema scuro.

Letture correlate

Linee guida di Material Design: Componenti - Liste

Stile

Testo normale

Questa è una lista semplicissima.

Esempio

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Starred</li>
  <li class="mdui-list-item mdui-ripple">Send mail</li>
</ul>

Usa collegamenti come elementi della lista.

Esempio

<div class="mdui-list">
  <a href="#" class="mdui-list-item mdui-ripple">Inbox</a>
  <a href="#" class="mdui-list-item mdui-ripple">Starred</a>
  <a href="#" class="mdui-list-item mdui-ripple">Send mail</a>
</div>

Icona

Le liste possono contenere icone.

Esempio

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
    <div class="mdui-list-item-content">Inbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
    <div class="mdui-list-item-content">Outbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
    <div class="mdui-list-item-content">Trash</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">error</i>
    <div class="mdui-list-item-content">Spam</div>
  </li>
</ul>

Le icone possono essere a destra della lista.

Esempio

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Inbox</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Outbox</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Trash</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Spam</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">error</i>
  </li>
</ul>

Usa icone vuote come segnaposto.

Esempio

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
    <div class="mdui-list-item-content">Inbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
    <div class="mdui-list-item-content">Outbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">Trash</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">Spam</div>
  </li>
</ul>

Avatar

Le liste possono contenere avatar.

Esempio

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">Brendan Lim</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">Grace Ng</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar4.jpg"/>
    </div>
    <div class="mdui-list-item-content">Kerem Suer</div>
  </li>
</ul>

Gli avatar possono essere a destra della lista.

Esempio

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Brendan Lim</div>
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Grace Ng</div>
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">Kerem Suer</div>
    <div class="mdui-list-item-avatar">
      <img src="avatar4.jpg"/>
    </div>
  </li>
</ul>

Contiene sia avatar che icone.

Esempio

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">Brendan Lim</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">Grace Ng</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar4.jpg"/>
    </div>
    <div class="mdui-list-item-content">Kerem Suer</div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
</ul>

Sostituisci l'avatar con un'icona.

Esempio

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">Photos</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">Recipes</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">assignment</i>
    <div class="mdui-list-item-content">Work</div>
  </li>
</ul>

Testo multilinea

Ogni elemento della lista può contenere fino a 3 righe di testo; se il testo supera le 3 righe, occorre usare una Card al suo posto.

Per impostazione predefinita, l'altezza del testo non è limitata; anche se il testo supera le 3 righe, verrà comunque visualizzato normalmente. È possibile aggiungere classi a .mdui-list-item-title e .mdui-list-item-text per limitare l'altezza del testo:

Aggiungi la classe .mdui-list-item-one-line per limitare il testo a un'unica riga
Aggiungi la classe .mdui-list-item-two-line per limitare il testo a due righe
Aggiungi la classe .mdui-list-item-three-line per limitare il testo a tre righe

Esempio

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title mdui-list-item-one-line">Multiline item</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.</div>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title mdui-list-item-one-line">Multiline item</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">You've got to get enough sleep. Other travelling salesmen live a life of luxury. You've got to get enough sleep. Other travelling salesmen live a life of luxury.</div>
    </div>
  </li>
</ul>

Divisore

Il divisore nella lista avrà uno spazio di 8px sopra e sotto.

Esempio

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Starred</li>
  <li class="mdui-divider"></li>
  <li class="mdui-list-item mdui-ripple">All mail</li>
  <li class="mdui-list-item mdui-ripple">Trash</li>
</ul>

Rimuovi i margini superiori e inferiori del divisore.

Esempio

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Brunch this weekend?</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood ...
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Summer BBQ</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could ...
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Oui oui</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
      </div>
    </div>
  </li>
</ul>

Sottotitolo

Quando si usa un sottotitolo nella lista, verrà aggiunto automaticamente un divisore sopra il sottotitolo.

Esempio

<ul class="mdui-list">
  <li class="mdui-subheader">Mail</li>
  <li class="mdui-list-item mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Sent</li>
  <li class="mdui-subheader">Work</li>
  <li class="mdui-list-item mdui-ripple">Family</li>
  <li class="mdui-list-item mdui-ripple">Friends</li>
</ul>

Sottotitolo rientrato

Esempio

<ul class="mdui-list">
  <li class="mdui-subheader-inset">Friends</li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">Brendan Lim</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">me, Scott, Jennifer</div>
  </li>
  <li class="mdui-subheader-inset">Family</li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">Grace Ng</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar4.jpg"/>
    </div>
    <div class="mdui-list-item-content">Kerem Suer</div>
  </li>
</ul>

Lista densa

Gli elementi di una lista densa saranno più compatti.

Esempio

<ul class="mdui-list mdui-list-dense">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">move_to_inbox</i>
    <div class="mdui-list-item-content">Inbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">send</i>
    <div class="mdui-list-item-content">Outbox</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">delete</i>
    <div class="mdui-list-item-content">Trash</div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">error</i>
    <div class="mdui-list-item-content">Spam</div>
  </li>
</ul>

Un altro esempio di lista densa.

Esempio

<ul class="mdui-list mdui-list-dense">
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Brunch this weekend?</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">
        <span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood doing errands this weekend. Do you want ...
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Summer BBQ</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">
        <span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could come, but I'm out of town this weekend.
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Oui oui</div>
      <div class="mdui-list-item-text mdui-list-item-two-line">
        <span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris recommendations? Have you ever been?
      </div>
    </div>
  </li>
</ul>

Stato attivo

Gli elementi in stato attivo avranno un colore di sfondo e il testo in grassetto.

Esempio

<ul class="mdui-list">
  <li class="mdui-list-item mdui-list-item-active mdui-ripple">Inbox</li>
  <li class="mdui-list-item mdui-ripple">Starred</li>
  <li class="mdui-list-item mdui-ripple">Send mail</li>
</ul>

Esempio

<ul class="mdui-list">
  <li class="mdui-list-item mdui-list-item-active mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar1.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Brunch this weekend?</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">All Connors</span> - I'll be in your neighborhood ...
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar2.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Summer BBQ</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">to Alex, Scott, Jennifer</span> - Wish I could ...
      </div>
    </div>
  </li>
  <li class="mdui-divider-inset mdui-m-y-0"></li>
  <li class="mdui-list-item mdui-ripple">
    <div class="mdui-list-item-avatar">
      <img src="avatar3.jpg"/>
    </div>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Oui oui</div>
      <div class="mdui-list-item-text mdui-list-item-one-line">
        <span class="mdui-text-color-theme-text">Sandra Adams</span> - Do you have Paris reco ...
      </div>
    </div>
  </li>
</ul>

Elenco classi CSS

Nome classe	Descrizione
`.mdui-list`	Definisci una lista (obbligatorio)
`.mdui-list-dense`	Definisci una lista densa
`.mdui-list-item`	Definisci un elemento della lista (obbligatorio)
`.mdui-list-item-active`	Imposta l'elemento della lista come attivo
`.mdui-list-item-icon`	Definisci l'icona nell'elemento della lista
`.mdui-list-item-avatar`	Definisci l'avatar nell'elemento della lista
`.mdui-list-item-content`	Definisci il contenuto dell'elemento della lista
`.mdui-list-item-title`	Definisci il titolo nel contenuto dell'elemento della lista
`.mdui-list-item-text`	Definisci il testo secondario nel contenuto dell'elemento della lista
`.mdui-list-item-one-line`	Imposta il testo per occupare un'unica riga di altezza
`.mdui-list-item-two-line`	Imposta il testo per occupare due righe di altezza
`.mdui-list-item-three-line`	Imposta il testo per occupare tre righe di altezza

Altri esempi

Lista file

Esempio

<ul class="mdui-list">
  <li class="mdui-subheader-inset">Folders</li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Photos</div>
      <div class="mdui-list-item-text">Jan 9, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons">info</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Recipes</div>
      <div class="mdui-list-item-text">Jan 17, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons">folder</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Work</div>
      <div class="mdui-list-item-text">Jan 28, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
  <li class="mdui-subheader-inset">Files</li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons mdui-color-blue mdui-text-color-white">assignment</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Photos</div>
      <div class="mdui-list-item-text">Jan 9, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-avatar mdui-icon material-icons mdui-color-yellow-600 mdui-text-color-white">assessment</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">Kitchen remodel</div>
      <div class="mdui-list-item-text">Jan 10, 2014</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-grey-400">info</i>
  </li>
</ul>

Contatti

Esempio

<ul class="mdui-list">
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-indigo">phone</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">(650) 555-1234</div>
      <div class="mdui-list-item-text">Mobile</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">(323) 555-6789</div>
      <div class="mdui-list-item-text">Work</div>
    </div>
    <i class="mdui-list-item-icon mdui-icon material-icons">chat_bubble</i>
  </li>
  <li class="mdui-divider"></li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-indigo">email</i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">aliconnors@example.com</div>
      <div class="mdui-list-item-text">Personal</div>
    </div>
  </li>
  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon"></i>
    <div class="mdui-list-item-content">
      <div class="mdui-list-item-title">ali_connors@example.com</div>
      <div class="mdui-list-item-text">Work</div>
    </div>
  </li>
</ul>

Slider

Controlli di lista