AccordionSummary и AccordionDetails

Accordion — это компонент, позволяющий создавать сворачиваемые панели с заголовком и содержимым. Основные части компонента — AccordionSummary и AccordionDetails, каждая из которых выполняет определённую роль в организации интерфейса.

AccordionSummary

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

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

  • expandIcon — добавляет иконку раскрытия панели. Чаще всего используется компонент ExpandMoreIcon из MUI Icons.
  • aria-controls — связывает заголовок с содержимым для корректной работы с доступностью.
  • id — уникальный идентификатор заголовка, необходимый для связывания с aria-controls.
  • onClick — обработчик клика по заголовку для дополнительной логики, например, изменения состояния в родительском компоненте.

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

import React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

function ExampleAccordion() {
  return (
    <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel1-content"
        id="panel1-header"
      >
        <Typography>Заголовок панели</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>
          Содержимое панели. Здесь можно разместить любой JSX, включая другие компоненты.
        </Typography>
      </AccordionDetails>
    </Accordion>
  );
}

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

AccordionDetails

AccordionDetails содержит контент панели, который становится видимым при раскрытии аккордеона. Этот блок может включать текст, таблицы, формы, списки и другие компоненты MUI.

Основные особенности AccordionDetails:

  • Не имеет отдельной логики раскрытия — она управляется родительским Accordion.
  • При необходимости можно использовать стили sx или className для кастомизации внешнего вида.
  • Поддерживает любые дочерние элементы, что делает его универсальным контейнером для сложных интерфейсов.

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

<AccordionDetails sx={{ backgroundColor: '#f5f5f5', padding: 2 }}>
  <Typography>
    Дополнительный контент с кастомными отступами и фоном.
  </Typography>
</AccordionDetails>

Связь AccordionSummary и AccordionDetails

Для корректного управления аккордеоном MUI использует ARIA-связки. AccordionSummary должен иметь aria-controls, указывающий на id AccordionDetails, а также уникальный id. Это обеспечивает:

  • Доступность для экранных читалок.
  • Синхронизацию состояния панели с визуальными и функциональными элементами интерфейса.

Расширенные возможности

  1. Контроль состояния аккордеона через пропсы expanded и onChange:
<Accordion expanded={expanded === 'panel1'} onCha nge={handleChange('panel1')}>
  <AccordionSummary expandIcon={<ExpandMoreIcon />}>
    <Typography>Заголовок</Typography>
  </AccordionSummary>
  <AccordionDetails>
    <Typography>Содержимое</Typography>
  </AccordionDetails>
</Accordion>

  1. Множественные панели с независимым состоянием, используя массив состояний для хранения информации о раскрытых панелях.

  2. Кастомизация и стилизация с помощью sx, styled или CSS-классов. Например, можно изменить цвет текста заголовка при раскрытии или добавить анимацию для содержимого.

<AccordionSummary
  sx={{
    '&.Mui-expanded': { backgroundColor: '#e0f7fa' },
    fontWeight: 'bold'
  }}
>
  <Typography>Кастомный заголовок</Typography>
</AccordionSummary>
  1. Вложенные аккордеоны: AccordionSummary и AccordionDetails могут содержать другие аккордеоны для создания многоуровневых интерфейсов.

Практические рекомендации

  • Использовать Typography внутри AccordionSummary и AccordionDetails для единообразного отображения текста.
  • Всегда задавать уникальные id и aria-controls для поддержки доступности.
  • Для сложного содержимого AccordionDetails лучше использовать контейнеры (Box, Stack) для правильного выравнивания и отступов.
  • Контролируемые аккордеоны с expanded и onChange позволяют создавать интерфейсы с логикой раскрытия нескольких панелей одновременно или поочередного раскрытия.

Эта комбинация компонентов — основа для создания динамических и структурированных интерфейсов, позволяя организовать большое количество информации компактно и удобно для пользователя.

Оглавление