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.

Basic List

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

<ListItemButton component="a" href="#simple-list">
  <ListItemText primary="Spam" />
</ListItemButton>

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

When displaying three lines or more, the avatar is not aligned at the top. When displaying three lines or more, the avatar is not aligned at the top. When displaying three lines or more, the avatar is not aligned at the top. You should set the alignItems="flex-start" prop to align the avatar at the top, following the Material Design guidelines:

  • 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

Sticky subheader

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. (⚠️ no IE 11 support)

    • 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

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.

  • Chelsea Otakan
  • Eric Hoffman

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 sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}>
  {[1, 2, 3].map((value) => (
    <ListItem
      key={value}
      disableGutters
      secondaryAction={
        <IconButton aria-label="comment">
          <CommentIcon />
        </IconButton>
      }
    >
      <ListItemText primary={`Line item ${value}`} />
    </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.

Customized List

Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.

🎨 If you are looking for inspiration, you can check MUI Treasury's customization examples.

API