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>

You can find a demo with React Router following this section of the documentation.

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

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:

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

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>

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

Press Enter to start editing

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>

<FixedSizeList
  height={400}
  width={360}
  itemSize={46}
  itemCount={200}
  overscanCount={5}
>
  {renderRow}
</FixedSizeList>

Press Enter to start editing

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. You can learn more about this in the overrides documentation page.

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

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.