Lists (Listes)

Les listes sont continues, des index verticaux de texte ou d’images.

Les listes sont des groupes successifs de textes ou d'images. Ils sont composés d'items contenant les actions primaires ou secondaires, représentées par des icônes et/ou du texte.

Liste simple

Le dernier élément de la démonstration précédente montre comment vous pouvez créer un lien:

function ListItemLink(props) {
  return <ListItem button component="a" {...props} />;
}

//...

<ListItemLink href="#simple-list">
  <ListItemText primary="Spam" />
</ListItemLink>

Vous pouvez trouver une démonstration avec la bibliothèque React Router en suivant cette section de la documentation.

Liste imbriquée

Liste en répertoires

Photos
Jan 9, 2014
Work
Jan 7, 2014
Vacation
July 20, 2014

Interactif

Vous trouverez ci-dessous une démo interactive vous permettant d'explorer les résultats visuels utilisant différents paramètres:

Enable denseEnable secondary text

Text only

Single-line item
Single-line item
Single-line item

Icon with text

Single-line item
Single-line item
Single-line item

Avatar with text

Single-line item
Single-line item
Single-line item

Avatar with text and icon

Single-line item
Single-line item
Single-line item

Sélection d'élément de liste

Alignement d'élément de liste

Vous devez modifier l'alignement des éléments de la liste lorsque vous affichez 3 lignes ou plus, définissez la propriété alignItems = "flex-start".

R
Brunch this weekend?
Ali Connors — I'll be in your neighborhood doing errands this…
T
Summer BBQ
to Scott, Alex, Jennifer — Wish I could come, but I'm out of town this…
C
Oui Oui
Sandra Adams — Do you have Paris recommendations? Have you ever…

Controles de liste

Case à cocher

Une case à cocher peut être une action principale ou secondaire.

La case a cocher est l'action primaire et l'indicateur d'état pour l'élément liste. Le bouton comment est une action secondaire et une cible séparée.

Line item 1
Line item 2
Line item 3
Line item 4

La case à cocher est l'action secondaire pour un élément de liste et une cible distincte.

A
Line item 1
A
Line item 2
A
Line item 3
A
Line item 4

Interrupteur (switch)

Le commutateur (switch) est l'action secondaire et une cible distincte.

Settings
Wi-Fi
Bluetooth

Épingler les sous-entêtes

Lors du défilement, les sous-en-têtes restent épinglés en haut de l'écran jusqu'à ce qu'ils soient déplacés en dehors de l'écran par le prochain en-tête.

This feature relies on CSS sticky positioning. Unfortunately it's not implemented by all the supported browsers. It defaults to disableSticky when not supported.

- I'm sticky 0
- Item 0
- Item 1
- Item 2
- I'm sticky 1
- Item 0
- Item 1
- Item 2
- I'm sticky 2
- Item 0
- Item 1
- Item 2
- I'm sticky 3
- Item 0
- Item 1
- Item 2
- I'm sticky 4
- Item 0
- Item 1
- Item 2

<List className={classes.root} subheader={<li />}>
  {[0, 1, 2, 3, 4].map((sectionId) => (
    <li key={`section-${sectionId}`} className={classes.listSection}>
      <ul className={classes.ul}>
        <ListSubheader>{`I'm sticky ${sectionId}`}</ListSubheader>
        {[0, 1, 2].map((item) => (
          <ListItem key={`item-${sectionId}-${item}`}>
            <ListItemText primary={`Item ${item}`} />
          </ListItem>
        ))}
      </ul>
    </li>
  ))}
</List>

Liste Insets

<List component="nav" className={classes.root} aria-label="contacts">
  <ListItem button>
    <ListItemIcon>
      <StarIcon />
    </ListItemIcon>
    <ListItemText primary="Chelsea Otakan" />
  </ListItem>
  <ListItem button>
    <ListItemText inset primary="Eric Hoffman" />
  </ListItem>
</List>

Liste virtualisée

Dans l'exemple suivant, nous montrons comment utiliser react-virtualized avec le composant List. Il affiche 200 lignes et peut facilement gérer plus. La virtualisation aide à résoudre les problèmes de performances.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

<FixedSizeList height={400} width={300} itemSize={46} itemCount={200}>
  {renderRow}
</FixedSizeList>

If this library doesn't cover your use case, you should consider using react-virtualized, then alternatives like react-virtuoso. The use of react-window when possible is encouraged.

Personnalisation

🎨 Si vous cherchez de l'inspiration, vous pouvez consulter les exemples de personnalisation de MUI Treasury.