List

Les listes sont des suites verticales d'éléments qui présentent du texte ou des images, facilitant la navigation et l'accès aux informations.

Utilisation

Importez les composants :

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

Importez les types TypeScript correspondants :

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';

Exemple d'utilisation :

Sous-en-tête

Élément 1

Élément 2

<mdui-list>
  <mdui-list-subheader>Sous-en-tête</mdui-list-subheader>
  <mdui-list-item>Élément 1</mdui-list-item>
  <mdui-list-item>Élément 2</mdui-list-item>
</mdui-list>

Par défaut, le texte principal et le texte secondaire s'affichent intégralement, quelle que soit leur longueur. Utilisez les attributs headline-line et description-line pour limiter le nombre de lignes (maximum 3).

Titre Titre Titre Titre Titre Titre Titre Titre Titre Titre Titre Titre Titre Titre Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire

<mdui-list>
  <mdui-list-item headline-line="1" description-line="2">
    Titre Titre Titre Titre Titre Titre Titre Titre Titre Titre Titre Titre Titre Titre
    <span slot="description">Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire Texte secondaire</span>
  </mdui-list-item>
</mdui-list>

Source

Contenu sur les côtés

Utilisez les attributs icon et end-icon du composant <mdui-list-item> pour ajouter des icônes Material Icons à gauche et à droite de l'élément de liste.

Titre

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

Source

Vous pouvez également utiliser les slots icon et end-icon pour ajouter des éléments personnalisés.

Titre

<mdui-list>
  <mdui-list-item>
    Titre
    <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>

Source

Lien

Ajoutez l'attribut href pour transformer l'élément de liste en lien. Les attributs liés aux liens (download, target, rel) sont alors également disponibles.

Titre

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

Source

État désactivé

Ajoutez l'attribut disabled à <mdui-list-item> pour désactiver l'élément. Les composants internes (case à cocher, bouton radio, Switch) seront également désactivés.

Titre

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

Source

État actif

Ajoutez l'attribut active à <mdui-list-item> pour activer l'élément.

Titre

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

Source

État non cliquable

Ajoutez l'attribut nonclickable à <mdui-list-item> pour supprimer l'effet de survol et l'ondulation au clic.

Titre

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

Source

Forme arrondie

Ajoutez l'attribut rounded à <mdui-list-item> pour arrondir ses coins.

Titre

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

Source

Alignement vertical

Utilisez l'attribut alignment de <mdui-list-item> pour définir l'alignement des éléments latéraux par rapport à l'élément principal. Valeurs possibles :

start : Alignement en haut
center : Alignement centré
end : Alignement en bas

Titre

<mdui-list>
  <mdui-list-item alignment="start" description="Texte secondaire">
    Titre
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="center" description="Texte secondaire">
    Titre
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
  <mdui-list-item alignment="end" description="Texte secondaire">
    Titre
    <mdui-icon slot="icon" name="people"></mdui-icon>
  </mdui-list-item>
</mdui-list>

Source

Contenu personnalisé

Utilisez le slot custom de <mdui-list-item> pour personnaliser complètement le contenu de l'élément.

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>

Source

`mdui-list-item` API

Propriétés

Attribut HTML	Propriété JavaScript	Type	Défaut
`headline`	`headline`	`string`	-
Texte principal. Peut également être défini via le slot par défaut.
`headline-line`	`headlineLine`	`1 \| 2 \| 3`	-
Nombre de lignes pour le texte principal. Au-delà de la limite, le texte sera tronqué. Par défaut, aucune limite de lignes. Les valeurs possibles incluent : `1` : Affiche une seule ligne, tronqué au-delà `2` : Affiche deux lignes, tronqué au-delà `3` : Affiche trois lignes, tronqué au-delà
`description`	`description`	`string`	-
Texte secondaire. Peut également être défini via `slot="description"`.
`description-line`	`descriptionLine`	`1 \| 2 \| 3`	-
Nombre de lignes pour le texte secondaire. Au-delà de la limite, le texte sera tronqué. Par défaut, aucune limite de lignes. Les valeurs possibles incluent : `1` : Affiche une seule ligne, tronqué au-delà `2` : Affiche deux lignes, tronqué au-delà `3` : Affiche trois lignes, tronqué au-delà
`icon`	`icon`	`string`	-
Nom de l'icône Material Icons à gauche. Peut également être défini via `slot="icon"`.
`end-icon`	`endIcon`	`string`	-
Nom de l'icône Material Icons à droite. Peut également être défini via `slot="end-icon"`.
`disabled`	`disabled`	`boolean`	`false`
Si cet élément de liste est désactivé. Lorsqu'il est désactivé, l'élément de liste devient gris et les composants `<mdui-checkbox>`, `<mdui-radio>`, `<mdui-switch>` qu'il contient sont également désactivés.
`active`	`active`	`boolean`	`false`
Si cet élément de liste est activé
`nonclickable`	`nonclickable`	`boolean`	`false`
Si l'élément de liste doit être non cliquable. Lorsqu'il est défini, les composants `<mdui-checkbox>`, `<mdui-radio>`, `<mdui-switch>` dans l'élément de liste restent interactifs.
`rounded`	`rounded`	`boolean`	`false`
Si l'élément de liste doit avoir une forme arrondie
`alignment`	`alignment`	`'start' \| 'center' \| 'end'`	`'center'`
Alignement vertical de l'élément de liste. Les valeurs possibles incluent : `start` : Aligné en haut `center` : Centré `end` : Aligné en bas
`href`	`href`	`string`	-
URL cible du lien. Si cette propriété est définie, le composant sera rendu en tant qu'élément `<a>` et pourra utiliser les attributs liés aux liens.
`download`	`download`	`string`	-
Nom du fichier à télécharger. Remarque : Cette propriété ne s'applique que si l'attribut `href` est défini.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Cible d'ouverture du lien. Les valeurs possibles incluent : `_blank` : Ouvre le lien dans une nouvelle fenêtre `_parent` : Ouvre le lien dans le contexte parent `_self` : Par défaut. Ouvre le lien dans le contexte courant `_top` : Ouvre le lien dans toute la fenêtre Remarque : Cette propriété ne s'applique que si l'attribut `href` est défini.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relation entre le document actuel et le document lié. Les valeurs possibles incluent : `alternate` : Version alternative du document actuel `author` : Auteur du document actuel ou de l'article `bookmark` : Lien permanent vers la section ancêtre la plus proche `external` : Le document référencé n'est pas sur le même site que le document actuel `help` : Lien vers un document d'aide associé `license` : Le contenu principal du document actuel est couvert par la licence de droits d'auteur du fichier référencé `me` : Le document actuel représente le propriétaire du contenu lié `next` : Le document actuel fait partie d'une série, le document référencé est le suivant dans la série `nofollow` : L'auteur ou l'éditeur du document actuel n'approuve pas le fichier référencé `noreferrer` : N'inclut pas l'en-tête `Referer`. Effet similaire à `noopener` `opener` : Si l'hyperlien crée un contexte de navigation de premier niveau (c'est-à-dire que la valeur de l'attribut `target` est `_blank`), crée un contexte de navigation auxiliaire `prev` : Le document actuel fait partie d'une série, le document référencé est le précédent dans la série `search` : Fournit un lien vers une ressource pouvant être utilisée pour rechercher le fichier actuel et ses pages associées `tag` : Fournit une balise (identifiée par l'adresse donnée) applicable au document actuel Remarque : Disponible uniquement lorsque l'attribut `href` est spécifié.
`autofocus`	`autofocus`	`boolean`	`false`
Si le focus doit être automatiquement obtenu après le chargement de la page
`tabindex`	`tabIndex`	`number`	-
Ordre de l'élément lors de la navigation au clavier avec la touche Tab

Méthodes

Nom	Paramètres	Valeur de retour
`click`		`void`
Simule un clic sur l'élément
`focus`	`options: FocusOptions` (Optionnel)	`void`
Place le focus sur l'élément. Vous pouvez passer un objet en paramètre, dont les propriétés incluent : `preventScroll` : Par défaut, après la prise de focus, la page défile pour amener l'élément à l'écran. Si vous ne souhaitez pas que la page défile, vous pouvez définir cette propriété sur `true`.
`blur`		`void`
Retire le focus de l'élément

Événements

Nom
`focus`
Se déclenche lorsque l'élément obtient le focus
`blur`
Se déclenche lorsque l'élément perd le focus

Slots

Nom
Défaut
Texte principal
`description`
Texte secondaire
`icon`
Élément à gauche de l'élément de liste
`end-icon`
Élément à droite de l'élément de liste
`custom`
Contenu personnalisé

CSS Parts

Nom
`container`
Conteneur de l'élément de liste
`icon`
Icône de gauche
`end-icon`
Icône de droite
`body`
Partie centrale
`headline`
Titre principal
`description`
Sous-titre

Propriétés CSS personnalisées

Nom
`--shape-corner`
Taille des coins arrondis de l'élément de liste. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.
`--shape-corner-rounded`
Taille des coins arrondis de l'élément de liste lorsque l'attribut `rounded` est spécifié. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.

`mdui-list-subheader` API

Slots

Nom
Défaut
Texte du sous-en-tête de liste

`mdui-list` API

Slots

Nom
Défaut
Éléments `<mdui-list-item>`

Chapitre précédent

LinearProgress

Chapitre suivant

List

Utilisation

Exemples

Contenu textuel

Contenu sur les côtés

Lien

État désactivé

État actif

État non cliquable

Forme arrondie

Alignement vertical

Contenu personnalisé

`mdui-list-item` API

Propriétés

Méthodes

Événements

Slots

CSS Parts

Propriétés CSS personnalisées

`mdui-list-subheader` API

Slots

`mdui-list` API

Slots