Saltar al contenido
Ayuda a traducir esta página

Listas

Las listas son índices contínuos y verticales de texto o imágenes.

Las listas son un grupo contínuo de texto o imágenes. Se componen de elementos que contienen acciones primarias y complementarias, que se representan mediante iconos y texto.

Lista Simple

El último elemento del demo anterior muestra cómo se puede representar un enlace:

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

//...

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

//...

Hay una demostración usando React Router siguiendo esta sección de la documentación.

Lista Anidada

Lista de Carpetas

  • Photos

    Jan 9, 2014

  • Work

    Jan 7, 2014

  • Vacation

    July 20, 2014

Explora

Debajo de esta línea hay una demostración interactiva que permite explorar el resultado visual de las distintas configuraciones:

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

ListItem Seleccionado

Alineación de los elementos de la lista

Debería cambiar la alineación del list item cuando se muestran 3 o más líneas, ajustando la propiedad alignItems="flex-start".

  • Remy Sharp
    Brunch this weekend?

    Ali Connors — I'll be in your neighborhood doing errands this…

  • Travis Howard
    Summer BBQ

    to Scott, Alex, Jennifer — Wish I could come, but I'm out of town this…

  • Cindy Baker
    Oui Oui

    Sandra Adams — Do you have Paris recommendations? Have you ever…

Controles de Lista

Checkbox

Un checkbox puede ser una acción primaria o una acción secundaria.

The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target.

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

El checkbox es la acción secundaria para el elemento de la lista y un objetivo separado.

  • Avatar n°1
    Line item 1
  • Avatar n°2
    Line item 2
  • Avatar n°3
    Line item 3
  • Avatar n°4
    Line item 4

Switch

El switch es la acción secundaria y un objetivo separado.

  • Settings
  • Wi-Fi
  • Bluetooth

Lista de Subencabezados Fijados

Al desplazarse, los subencabezados permanecen anclados en la parte superior de la pantalla hasta que el siguiente subencabezado los saque de la pantalla.

Esta característica se basa en el posicionamiento sticky de CSS. Desafortunadamente, no está implementado por todos los navegadores compatibles. El valor por defecto soportado es disableSticky cuando el navegador no provee el soporte.

    • 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>

Inset List Item

The inset prop enables a list item that does not have a leading icon or avatar to align correctly with items that do.

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

Gutterless list

When rendering a list within a component that defines its own gutters, ListItem gutters can be disabled with disableGutters.

  • Line item 1
  • Line item 2
  • Line item 3
<List className={classes.root}>
  {[1, 2, 3].map((value) => (
    <ListItem key={value} disableGutters>
      <ListItemText primary={`Line item ${value}`} />
      <ListItemSecondaryAction>
        <CommentIcon color="action" />
      </ListItemSecondaryAction>
    </ListItem>
  ))}
</List>

Virtualización de listas

En el siguiente ejemplo se demuestra como usar react-window con el componente List. Renderiza 200 filas y puede manejar más con facilidad. La virtualización ayuda con problemas de rendimiento.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
<FixedSizeList
  height={400}
  width={360}
  itemSize={46}
  itemCount={200}
  overscanCount={5}
>
  {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.

Personalización

🎨 Si estás buscando inspiración, puedes mirar los ejemplos de MUI Treasury.

API