ListItemIcon и ListItemText

В библиотеке MUI (@mui/material) компоненты ListItemIcon и ListItemText играют ключевую роль при создании списков с визуальной структурой, где каждый элемент содержит иконку и текстовое описание. Эти компоненты используются внутри ListItem, обеспечивая удобное выравнивание, адаптивность и единый стиль интерфейса.

ListItemIcon

ListItemIcon предназначен для отображения иконок в элементах списка. Основные моменты:

  • Выравнивание: иконка автоматически располагается слева от текста и выравнивается по вертикали с учетом шрифта текста.
  • Размер и отступы: MUI задаёт стандартные размеры иконок через fontSize="medium" и соответствующие отступы справа, чтобы текст не прилипал к иконке.
  • Использование: в качестве дочернего компонента ListItem, чаще всего с иконками из библиотеки @mui/icons-material.

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

import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import InboxIcon from '@mui/icons-material/Inbox';
import MailIcon from '@mui/icons-material/Mail';

function SimpleList() {
  return (
    <List>
      <ListItem>
        <ListItemIcon>
          <InboxIcon />
        </ListItemIcon>
        <ListItemText primary="Входящие" />
      </ListItem>
      <ListItem>
        <ListItemIcon>
          <MailIcon />
        </ListItemIcon>
        <ListItemText primary="Отправленные" />
      </ListItem>
    </List>
  );
}

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

  • sx: объект стилей для кастомизации размеров, цвета, отступов.
  • children: обычно компонент иконки (<InboxIcon />, <MailIcon /> и др.).
  • Автоматическая поддержка темной и светлой темы через color="inherit".

ListItemText

ListItemText отвечает за текстовое содержимое элемента списка. Основные возможности:

  • primary: основной текст (строка или React-компонент).
  • secondary: дополнительный текст, который обычно отображается меньшим шрифтом и серым цветом.
  • disableTypography: если установлено в true, MUI не оборачивает текст в компонент Typography, что позволяет использовать собственные стили.
  • inset: добавляет отступ слева, если нет иконки, создавая визуальный баланс.

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

<ListItem>
  <ListItemIcon>
    <InboxIcon />
  </ListItemIcon>
  <ListItemText 
    primary="Входящие" 
    secondary="Не прочитанные сообщения" 
  />
</ListItem>

Элементы primary и secondary могут быть строками, JSX или компонентами Typography, что даёт полную свободу кастомизации.

Стилизация и адаптация

Использование sx и кастомных классов позволяет гибко управлять внешним видом компонентов:

<ListItemText
  primary="Входящие"
  secondary="Не прочитанные"
  sx={{
    color: 'primary.main',
    fontWeight: 'bold',
    '& .MuiListItemText-secondary': {
      color: 'text.secondary',
      fontStyle: 'italic',
    }
  }}
/>
  • primaryTypographyProps и secondaryTypographyProps: отдельные свойства для настройки шрифтов и стилей основного и дополнительного текста без глобального sx.
  • Совместимость с темами: компоненты автоматически наследуют цвета и отступы из темы MUI, что упрощает создание консистентного дизайна.

Компоновка ListItemIcon и ListItemText

Эти компоненты лучше всего использовать вместе внутри ListItem, чтобы создать структурированный элемент списка с иконкой и текстом. Общие рекомендации:

  1. Иконка слева: всегда использовать ListItemIcon перед ListItemText для правильного выравнивания.
  2. Текст с несколькими уровнями: primary для заголовка, secondary для дополнительной информации.
  3. Кастомизация отступов: при необходимости использовать sx или inset, чтобы текст визуально не «слипался» с иконкой.
  4. Адаптивность: элементы списка автоматически подстраиваются под высоту шрифта и размер иконки, обеспечивая единый внешний вид на разных устройствах.

Пример сложного списка

<List>
  <ListItem button>
    <ListItemIcon>
      <InboxIcon />
    </ListItemIcon>
    <ListItemText 
      primary="Входящие" 
      secondary="5 новых сообщений" 
      primaryTypographyProps={{ fontWeight: 'medium' }}
    />
  </ListItem>
  <ListItem button>
    <ListItemIcon>
      <MailIcon />
    </ListItemIcon>
    <ListItemText 
      primary="Отправленные" 
      secondary="2 письма сегодня" 
      secondaryTypographyProps={{ fontStyle: 'italic' }}
    />
  </ListItem>
</List>

В этом примере показаны кнопочные элементы списка с иконками и текстом, где primary и secondary текст стилизованы отдельно через Typography Props, обеспечивая гибкость и визуальную ясность.

Итоговые принципы

  • ListItemIcon → всегда слева, для визуальных меток.
  • ListItemText → основной и дополнительный текст, легко кастомизируемый.
  • Стилизация через sx и Typography Props → точная настройка шрифтов, цвета и отступов.
  • Встроенная адаптивность → корректная работа с темами MUI и высотой строки.

Использование этих компонентов позволяет создавать удобочитаемые, структурированные списки, которые полностью соответствуют дизайну Material Design и сохраняют консистентность интерфейса.

Оглавление