Listas

Listas são continuas, apresentam verticalmente texto ou imagens.

Listas são um grupo contínuo de texto ou imagens. Elas são compostas por itens contendo ações primárias e complementares, que são representados por ícones e texto.

Lista Simples

O último item da demonstração anterior mostra como você pode renderizar um link:

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

//...

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

//...

Você pode encontrar uma demonstração com React Router seguindo esta seção da documentação.

Lista Aninhada

Lista de Pastas

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

Interativo

Abaixo está uma demonstração interativa que permite explorar os resultados visuais das diferentes configurações:

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

Lista com item selecionado

Alinhar itens da lista

Você deve alterar o alinhamento do item da lista ao exibir 3 linhas ou mais, alterando a propriedade alignItems = "flex-start".

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

Controles de Lista

Caixa de seleção

Uma caixa de seleção pode ser uma ação primária ou uma ação secundária.

A caixa de seleção é a ação principal e o indicador de estado para o item da lista. O botão de comentário é uma ação secundária e um destino separado.

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

A caixa de seleção é uma ação secundária, sem interferir com o estado do item da lista.

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

Interruptor

O interruptor é uma ação secundária, sem interferir com o estado do item da lista.

Settings
Wi-Fi
Bluetooth

Lista com subtítulo fixado

Após a rolagem, os subtítulos permanecem fixos na parte superior da tela até serem empurrados para fora da área de visualização pelo próximo subtítulo.

Esse recurso depende do posicionamento fixo do CSS. Infelizmente, não é implementado por todos os navegadores. O padrão é disableSticky quando não é suportado.

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

Item de lista encaixado

A propriedade inset habilita um item de lista, que não tenha um ícone principal ou um avatar, para alinhar corretamente os itens que possuem.

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

Lista sem espaçamentos

Ao renderizar uma lista dentro de um componente que define seus próprios espaços, o espaçamento do ListItem pode ser desabilitado com 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>

Lista virtualizada

No exemplo a seguir, nós demonstramos como usar a biblioteca react-window com o componente List. Ela renderiza 200 linhas e pode facilmente lidar com mais. A virtualização ajuda a lidar com problemas de desempenho.

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>

O uso da biblioteca react-window, quando possível, é recomendado. Se no seu caso esta biblioteca não resolver, você deve considerar o uso de react-virtualized, e em seguida, como alternativa react-virtuoso.

Customização

🎨 Se você está procurando inspiração, você pode verificar os exemplos de customização de MUI Treasury.