List

Un elenco è una sequenza verticale di elementi che può contenere testo o immagini.

Utilizzo

Importa i componenti:

import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';

Importa i tipi TypeScript:

import type { List } from 'mdui/components/list.js';
import type { ListItem } from 'mdui/components/list-item.js';
import type { ListSubheader } from 'mdui/components/list-subheader.js';

Esempio:

Sottotitolo

Elemento 1

Elemento 2

<mdui-list>
  <mdui-list-subheader>Sottotitolo</mdui-list-subheader>
  <mdui-list-item>Elemento 1</mdui-list-item>
  <mdui-list-item>Elemento 2</mdui-list-item>
</mdui-list>

Per impostazione predefinita, sia il testo principale che quello secondario vengono mostrati per intero. Per limitare il numero di righe, usa gli attributi headline-line e description-line. Il limite massimo è di 3 righe.

Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto

<mdui-list>
  <mdui-list-item headline-line="1" description-line="2">
    Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione Intestazione
    <span slot="description">Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto Testo di supporto</span>
  </mdui-list-item>
</mdui-list>

Sorgente

Contenuto ai lati

Gli attributi icon e end-icon su <mdui-list-item> aggiungono Icone Material rispettivamente ai lati sinistro e destro.

Intestazione

<mdui-list>
  <mdui-list-item icon="people" end-icon="arrow_right">Intestazione</mdui-list-item>
</mdui-list>

Sorgente

Oppure, usa gli slot icon e end-icon per aggiungere elementi ai lati sinistro e destro dell'elemento dell'elenco.

Intestazione

<mdui-list>
  <mdui-list-item>
    Intestazione
    <mdui-avatar slot="icon" src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>
    <mdui-checkbox slot="end-icon"></mdui-checkbox>
  </mdui-list-item>
</mdui-list>

Sorgente

Link

L'attributo href trasforma l'elemento dell'elenco in un link, con gli attributi download, target e rel disponibili per funzionalità relative ai link.

Intestazione

<mdui-list>
  <mdui-list-item href="https://www.mdui.org" target="_blank">Intestazione</mdui-list-item>
</mdui-list>

Sorgente

Stato Disabilitato

L'attributo disabled su <mdui-list-item> disabilita l'elemento. Questo disabilita anche i componenti all'interno dell'elemento dell'elenco.

Intestazione

<mdui-list>
  <mdui-list-item disabled>Intestazione</mdui-list-item>
  <mdui-list-item>Intestazione</mdui-list-item>
</mdui-list>

Sorgente

Stato Attivo

L'attributo active su <mdui-list-item> attiva l'elemento.

Intestazione

<mdui-list>
  <mdui-list-item active>Intestazione</mdui-list-item>
  <mdui-list-item>Intestazione</mdui-list-item>
</mdui-list>

Sorgente

Stato Non Cliccabile

L'attributo nonclickable su <mdui-list-item> rimuove gli effetti hover del mouse e di ripple al clic.

Intestazione

<mdui-list>
  <mdui-list-item nonclickable>Intestazione</mdui-list-item>
  <mdui-list-item>Intestazione</mdui-list-item>
</mdui-list>

Sorgente

Forma Arrotondata

L'attributo rounded su <mdui-list-item> conferisce all'elemento un aspetto arrotondato.

Intestazione

<mdui-list>
  <mdui-list-item rounded>Intestazione</mdui-list-item>
  <mdui-list-item rounded>Intestazione</mdui-list-item>
</mdui-list>

Sorgente

Allineamento Verticale

L'attributo alignment su <mdui-list-item> allinea verticalmente il contenuto dell'elemento. Valori possibili:

start: allineamento in alto.
center: allineamento al centro.
end: allineamento in basso.

Intestazione

<mdui-list>
  <mdui-list-item alignment="start" description="Testo di supporto">
    Intestazione
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="center" description="Testo di supporto">
    Intestazione
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="end" description="Testo di supporto">
    Intestazione
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
</mdui-list>

Sorgente

Contenuto Personalizzato

Lo slot custom in <mdui-list-item> consente la personalizzazione completa del contenuto dell'elemento dell'elenco.

test

<mdui-list>
  <mdui-list-item>
    <div slot="custom" style="display: flex;">
      <mdui-icon name="people"></mdui-icon>
      <div>test</div>
    </div>
  </mdui-list-item>
</mdui-list>

Sorgente

`mdui-list-item` API

Proprietà

Attributo HTML	Proprietà JavaScript	Tipo	Predefinito
`headline`	`headline`	`string`	-
Testo principale. Può essere specificato anche tramite lo slot predefinito.
`headline-line`	`headlineLine`	`1 \| 2 \| 3`	-
Numero di righe del testo principale, verrà troncato se supera il limite. Nessun limite di righe per impostazione predefinita. I valori opzionali includono: `1`: visualizza una riga, tronca se supera `2`: visualizza due righe, tronca se supera `3`: visualizza tre righe, tronca se supera
`description`	`description`	`string`	-
Testo secondario. Può essere specificato anche tramite `slot="description"`.
`description-line`	`descriptionLine`	`1 \| 2 \| 3`	-
Numero di righe del testo secondario, verrà troncato se supera il limite. Nessun limite di righe per impostazione predefinita. I valori opzionali includono: `1`: visualizza una riga, tronca se supera `2`: visualizza due righe, tronca se supera `3`: visualizza tre righe, tronca se supera
`icon`	`icon`	`string`	-
Nome dell'icona Material a sinistra. Può essere specificato anche tramite `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nome dell'icona Material a destra. Può essere specificato anche tramite `slot="end-icon"`.
`disabled`	`disabled`	`boolean`	`false`
Se questo elemento dell'elenco deve essere disabilitato. Se lo è, l'elemento verrà visualizzato in grigio e gli elementi al suo interno, come `<mdui-checkbox>`, `<mdui-radio>` e `<mdui-switch>`, saranno disabilitati.
`active`	`active`	`boolean`	`false`
Se attivare questo elemento dell'elenco
`nonclickable`	`nonclickable`	`boolean`	`false`
Se rendere l'elemento dell'elenco non cliccabile. Una volta impostato, elementi come `<mdui-checkbox>`, `<mdui-radio>`, `<mdui-switch>` al suo interno rimangono comunque interattivi.
`rounded`	`rounded`	`boolean`	`false`
Se utilizzare una forma arrotondata per l'elemento dell'elenco
`alignment`	`alignment`	`'start' \| 'center' \| 'end'`	`'center'`
Allineamento verticale dell'elemento dell'elenco. I valori opzionali includono: `start`: allineato in alto `center`: centrato `end`: allineato in basso
`href`	`href`	`string`	-
URL di destinazione del collegamento. Se questa proprietà è impostata, il componente viene renderizzato come elemento `<a>` e sarà possibile utilizzare le proprietà relative ai collegamenti.
`download`	`download`	`string`	-
Destinazione del download del collegamento. Nota: questa proprietà è valida solo se è impostato l'attributo `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Modalità di apertura del collegamento. I valori opzionali includono: `_blank`: apre il collegamento in una nuova finestra `_parent`: apre il collegamento nel frame genitore `_self`: predefinita. Apre il collegamento nel frame corrente `_top`: apre il collegamento nell'intera finestra Nota: questa proprietà è valida solo se è impostato l'attributo `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relazione tra il documento corrente e il documento collegato. I valori opzionali includono: `alternate`: versione alternativa del documento corrente `author`: autore del documento o dell'articolo corrente `bookmark`: collegamento permanente al capitolo antenato più vicino `external`: il documento di destinazione non appartiene allo stesso sito del documento corrente `help`: collegamento alla guida di riferimento `license`: il contenuto principale del documento corrente è coperto dalla licenza indicata nel documento di destinazione `me`: il documento corrente rappresenta il proprietario del contenuto collegato `next`: il documento corrente fa parte di una serie e il documento di destinazione è il successivo `nofollow`: l'autore o l'editore del documento corrente non avalla il documento di destinazione `noreferrer`: non include l'intestazione `Referer`. Simile a `noopener` `opener`: se il collegamento ipertestuale apre un contesto di navigazione di primo livello (cioè il valore dell'attributo `target` è `_blank`), crea un contesto di navigazione ausiliario `prev`: il documento corrente fa parte di una serie e il documento di destinazione è il precedente `search`: fornisce un collegamento a una risorsa per la ricerca nel documento corrente e nelle pagine correlate `tag`: associa un tag al documento corrente (identificato dall'indirizzo specificato) Nota: disponibile solo quando è specificato l'attributo `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Se deve ricevere automaticamente il focus al caricamento della pagina
`tabindex`	`tabIndex`	`number`	-
Ordine di tabulazione dell'elemento

Metodi

Nome	Parametri	Restituisce
`click`		`void`
Simula un clic del mouse sull'elemento
`focus`	`options: FocusOptions` (Opzionale)	`void`
Imposta il focus sull'elemento corrente. È possibile passare un oggetto come parametro, le cui proprietà includono: `preventScroll`: per impostazione predefinita, dopo che l'elemento riceve il focus, la pagina scorrerà per portare l'elemento in vista. Se non si desidera che la pagina scorra, è possibile impostare questa proprietà su `true`.
`blur`		`void`
Rimuove il focus dall'elemento corrente

Eventi

Nome
`focus`
Attivato quando si riceve il focus
`blur`
Attivato quando si perde il focus

Slots

Nome
(predefinito)
Testo principale
`description`
Testo secondario
`icon`
Elemento a sinistra dell'elemento dell'elenco
`end-icon`
Elemento a destra dell'elemento dell'elenco
`custom`
Qualsiasi contenuto personalizzato

CSS Parts

Nome
`container`
Contenitore dell'elemento dell'elenco
`icon`
Icona a sinistra
`end-icon`
Icona a destra
`body`
Parte centrale
`headline`
Titolo principale
`description`
Sottotitolo

CSS Custom Property

Nome
`--shape-corner`
Dimensione dell'arrotondamento degli angoli dell'elemento dell'elenco. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.
`--shape-corner-rounded`
Quando è specificato l'attributo `rounded`, dimensione dell'arrotondamento degli angoli dell'elemento dell'elenco. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.

`mdui-list-subheader` API

Slots

Nome
(predefinito)
Testo dell'intestazione

`mdui-list` API

Slots

Nome
(predefinito)
Elementi `<mdui-list-item>`

Capitolo precedente

LinearProgress

Capitolo successivo