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.
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
- 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:
- Single-line item
- Single-line item
- Single-line item
- Single-line item
- Single-line item
- Single-line item
- Single-line item
- Single-line item
- Single-line item
- Single-line item
- Single-line item
- Single-line item
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 BBQto Scott, Alex, Jennifer — Wish I could come, but I'm out of town this…
Oui OuiSandra 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
- 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
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.
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.