Перейти к контенту

🎉 Material UI v5 is out! Head to the migration guide to get started.

Редактировать эту страницу

Списки

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

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

Простой список

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

function ListItemLink(props) {
  return <ListItem button component="a" {...props} />;
}

//...

<ListItemLink href="#simple-list">
  <ListItemText primary="Spam" />
</ListItemLink>

Вы можете посмотреть демо с React Router.

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

Список папок

  • Photos

    Jan 9, 2014

  • Work

    Jan 7, 2014

  • Vacation

    July 20, 2014

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

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

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"

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

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

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 является второстепенным действием для элемента списка.

  • Avatar n°1
    Line item 1
  • Avatar n°2
    Line item 2
  • Avatar n°3
    Line item 3
  • Avatar n°4
    Line item 4

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

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

  • Settings
  • Wi-Fi
  • Bluetooth

Закрепленный подзаголовок

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

This feature relies on CSS sticky positioning. Unfortunately it's not implemented by all the supported browsers. It defaults to disableSticky when not supported.

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

Вставленный список

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

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
<FixedSizeList height={400} width={300} itemSize={46} itemCount={200}>
  {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.

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

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

API