Pular para o conteúdo
Ajude a traduzir esta página

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:

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

  • 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

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.

  • Avatar n°1
    Line item 1
  • Avatar n°2
    Line item 2
  • Avatar n°3
    Line item 3
  • Avatar n°4
    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>

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>

Lista Virtualizada

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>

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.

API