Accordion компонент

Компонент Accordion библиотеки MUI используется для создания скрываемых и раскрываемых панелей контента. Он позволяет пользователю управлять видимостью различных блоков информации, делая интерфейс более компактным и удобным для восприятия.

Базовая структура Accordion состоит из трех ключевых элементов:

  1. Accordion — контейнер всей панели.
  2. AccordionSummary — заголовок панели, который виден всегда и реагирует на клики для раскрытия или скрытия контента.
  3. AccordionDetails — содержимое панели, которое отображается только при раскрытии.

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

import * as 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 SimpleAccordion() {
  return (
    

      
        }
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          Заголовок панели 1
        
        
          
            Содержимое панели 1.
          
        
      
    

  );
}

Ключевые моменты:

  • expandIcon задаёт иконку раскрытия панели. В MUI чаще всего используется .
  • aria-controls и id обеспечивают корректную доступность (accessibility) и связь заголовка с его содержимым.
  • Содержимое панели помещается в AccordionDetails, где можно использовать любые компоненты MUI или обычный HTML.

Управление состоянием Accordion

По умолчанию каждая панель Accordion управляет своим состоянием автоматически: открытие одной панели не влияет на другие. Для более сложных сценариев, например, когда требуется раскрывать только одну панель из группы, необходимо управлять состоянием вручную с помощью React.

Пример с контролируемым Accordion:

function ControlledAccordion() {
  const [expanded, setExpanded] = React.useState(false);

  const handleChange = (panel) => (event, isExpanded) => {
    setExpanded(isExpanded ? panel : false);
  };

  return (
    

      
        }>
          Панель 1
        
        
          Контент панели 1
        
      
      
        }>
          Панель 2
        
        
          Контент панели 2
        
      
    

  );
}

Принцип работы:

  • Состояние expanded хранит идентификатор текущей открытой панели.
  • Функция handleChange обновляет состояние при клике, обеспечивая поведение «только одна открытая панель».

Настройка стиля и кастомизация

Компонент Accordion поддерживает глубокую кастомизацию через пропсы и стили MUI. Основные возможности:

  • square: делает углы панели прямыми.
  • disabled: блокирует возможность раскрытия.
  • TransitionProps: позволяет настраивать анимацию раскрытия через объект с параметрами react-transition-group.
  • sx: позволяет применять стили через системные свойства MUI.

Пример кастомизированного Accordion:


  }>
    Кастомная панель
  
  
    
      Панель с изменёнными стилями: фон, граница, радиус.

Вложенные и многоуровневые Accordion

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

Пример вложенного Accordion:


  }>
    Внешняя панель
  
  
    
      }>
        Внутренняя панель
      
      
        Контент внутренней панели

Доступность и семантика

MUI по умолчанию соблюдает требования ARIA, но важно корректно использовать:

  • aria-controls на AccordionSummary для связи с AccordionDetails.
  • id для уникальной идентификации каждой панели.
  • disabled для панелей, которые не должны быть интерактивными.

Это обеспечивает правильное взаимодействие с экранными читалками и улучшает UX.

Рекомендации по использованию

  • Использовать Accordion для больших блоков информации, которые не должны занимать всё пространство сразу.
  • Для компактных списков или быстрых переключений лучше применять другие компоненты, например, Tabs.
  • Контролируемые панели подходят для ситуаций, когда требуется ограничить количество открытых панелей или синхронизировать состояние с другими элементами интерфейса.
Оглавление