Списки

Списки представляют собой непрерывные вертикальные массивы данных из текста или изображений.

Списки представляют собой непрерывную группу из текста или изображений. Они состоят из элементов, содержащих основные и дополнительные действия, которые представлены значками и текстом.

Basic List

Последний элемент предыдущего примера показывает, как вы можете отрисовать ссылку:

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

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

Вложенный список

Список папок

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

Интерактивность

Ниже приведен интерактивный пример, который демонстрирует результаты различных настроек сетки:

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

Выбранный ListItem

Выравнивание элементов списка

Вы должны изменить выравнивание элементов списка при отображении 3 или более элементов. Для этого установите свойство 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…

Элементы управления списком

Checkbox

Checkbox может быть основным или второстепенным действием.

The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target.

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

Тут checkbox является второстепенным действием для элемента списка.

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

Switch (переключатель)

Switch является второстепенным действием.

Settings
Wi-Fi
Bluetooth

Sticky subheader

При прокрутке подзаголовки остаются закрепленными в верхней части экрана, пока следующий подзаголовок не оттеснит предыдущий. This feature relies on CSS sticky positioning. (⚠️ 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

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.

Chelsea Otakan
Eric Hoffman

Gutterless list

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

Virtualized List

In the following example, we demonstrate how to use react-window with the List component. Он отображает 200 строк и c легкостью может еще больше. Virtualization helps with performance issues.

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>

If this library doesn't cover your use case, you should consider using react-virtualized, then alternatives like react-virtuoso. The use of react-window when possible is encouraged.

Customized List

Ниже находятся примеры кастомизации компонента. Вы можете узнать об этом больше в документации по переопределению свойств.

Кастомизация

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