List и ListItem

Библиотека MUI (Material-UI) предоставляет мощный и гибкий компонент List, предназначенный для отображения списков элементов с единообразным стилем и поддержкой различных визуальных и интерактивных возможностей. С помощью List и ListItem можно создавать как простые текстовые списки, так и сложные структуры с иконками, чекбоксами и вложенными элементами.

Компонент List

Компонент List служит контейнером для элементов списка. Он автоматически применяет стили, соответствующие Material Design, включая отступы, цветовые схемы и управление выделением.

Основные свойства List:

  • component – определяет HTML-элемент, используемый для контейнера. По умолчанию ul.
  • dense – уменьшает вертикальные отступы между элементами списка, делая его более компактным.
  • subheader – позволяет добавить подзаголовок для списка через компонент ListSubheader.
  • disablePadding – убирает внутренние отступы списка.
  • sx – позволяет добавлять кастомные стили через систему MUI.

Пример использования:

import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';

<List dense={true}>
  <ListItem>
    <ListItemText primary="Первый элемент" />
  </ListItem>
  <ListItem>
    <ListItemText primary="Второй элемент" />
  </ListItem>
</List>

В этом примере используется свойство dense, которое уменьшает отступы, и ListItemText, компонент для отображения текста внутри элемента списка.

Компонент ListItem

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

Ключевые свойства ListItem:

  • button – делает элемент кликабельным, превращая его визуально и функционально в кнопку.
  • selected – выделяет элемент списка, полезно для навигационных меню.
  • disabled – делает элемент неактивным.
  • divider – добавляет разделительную линию снизу элемента.
  • sx – позволяет задавать кастомные стили.
  • dense – уменьшает вертикальные отступы внутри элемента.

Пример использования с интерактивностью:

<List>
  <ListItem button selected={true}>
    <ListItemText primary="Выбранный элемент" />
  </ListItem>
  <ListItem button>
    <ListItemText primary="Кликабельный элемент" />
  </ListItem>
  <ListItem disabled>
    <ListItemText primary="Неактивный элемент" />
  </ListItem>
</List>

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

MUI поддерживает создание вложенных списков с помощью свойства nested через компонент List внутри ListItem. Часто используется для навигационных меню или дерева категорий.

Пример:

import Collapse from '@mui/material/Collapse';
import ListItemIcon from '@mui/material/ListItemIcon';
import InboxIcon from '@mui/icons-material/Inbox';
import ExpandLess from '@mui/icons-material/ExpandLess';
import ExpandMore from '@mui/icons-material/ExpandMore';
import { useState } from 'react';

function NestedList() {
  const [open, setOpen] = useState(false);

  const handleClick = () => {
    setOpen(!open);
  };

  return (
    <List>
      <ListItem button onCl ick={handleClick}>
        <ListItemIcon>
          <InboxIcon />
        </ListItemIcon>
        <ListItemText primary="Папка" />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <List component="div" disablePadding>
          <ListItem button sx={{ pl: 4 }}>
            <ListItemText primary="Вложенный элемент" />
          </ListItem>
        </List>
      </Collapse>
    </List>
  );
}

Особенности данного подхода:

  • Collapse управляет анимацией открытия/закрытия вложенного списка.
  • sx={{ pl: 4 }} добавляет дополнительный отступ для вложенного элемента.
  • ListItemIcon позволяет добавлять иконки к каждому элементу списка.

Комбинирование с другими компонентами

ListItem легко интегрируется с другими компонентами MUI, такими как:

  • Checkbox и Switch – для создания интерактивных списков выбора.
  • Avatar – для отображения аватаров пользователей или иконок.
  • ListItemSecondaryAction – для размещения кнопок действий справа.

Пример списка с чекбоксами:

import Checkbox from '@mui/material/Checkbox';
import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';

<List>
  <ListItem>
    <ListItemText primary="Элемент с выбором" />
    <ListItemSecondaryAction>
      <Checkbox edge="end" />
    </ListItemSecondaryAction>
  </ListItem>
</List>

Стилизация и темы

MUI предоставляет sx и theme для детальной стилизации списков:

  • sx={{ bgcolor: 'background.paper' }} задает цвет фона.
  • theme.palette.primary.main позволяет использовать цвета из текущей темы.
  • MuiListItem можно кастомизировать через Theme Overrides, чтобы изменить отступы, выделение и эффекты при наведении для всех списков проекта.

Пример глобальной стилизации через тему:

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiListItem: {
      styleOverrides: {
        root: {
          '&.Mui-selected': {
            backgroundColor: '#1976d2',
            color: '#fff',
          },
        },
      },
    },
  },
});

<ThemeProvider theme={theme}>
  <List>
    <ListItem button selected>
      <ListItemText primary="Элемент с кастомной темой" />
    </ListItem>
  </List>
</ThemeProvider>

Выводы по функциональности

Комбинация List и ListItem в MUI обеспечивает:

  • Гибкую структуру для отображения элементов с текстом, иконками и действиями.
  • Встроенную поддержку кликабельных и интерактивных элементов.
  • Простую реализацию вложенных списков с анимацией.
  • Полную интеграцию с системой тем и кастомных стилей MUI.
  • Возможность использовать дополнительные компоненты для создания сложных интерфейсов, таких как меню, панели навигации и списки выбора.

Эти возможности делают List и ListItem универсальными инструментами для построения интерфейсов, где важна читаемость, структурированность и визуальная согласованность с Material Design.

Оглавление