Accordion

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

Основная структура Accordion

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

  1. Accordion – контейнер для всего аккордеона.
  2. AccordionItem – отдельная секция аккордеона.
  3. AccordionButton и AccordionPanel – элементы управления и содержимое секции.

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

import { Accordion, AccordionItem, AccordionButton, AccordionPanel, Box } from "@chakra-ui/react";

function BasicAccordion() {
  return (
    <Accordion>
      <AccordionItem>
        <h2>
          <AccordionButton>
            <Box flex="1" textAlign="left">
              Секция 1
            </Box>
          </AccordionButton>
        </h2>
        <AccordionPanel pb={4}>
          Содержимое секции 1
        </AccordionPanel>
      </AccordionItem>

      <AccordionItem>
        <h2>
          <AccordionButton>
            <Box flex="1" textAlign="left">
              Секция 2
            </Box>
          </AccordionButton>
        </h2>
        <AccordionPanel pb={4}>
          Содержимое секции 2
        </AccordionPanel>
      </AccordionItem>
    </Accordion>
  );
}

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

  • AccordionButton всегда должен быть внутри AccordionItem и использоваться для раскрытия или сворачивания панели.
  • AccordionPanel содержит основной контент секции.
  • Для правильного доступа к клавиатуре и экранным читалкам структура h2 → AccordionButton → Box является рекомендуемой практикой.

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

Accordion поддерживает два режима раскрытия секций:

  • Множественный режим (allowMultiple) – позволяет открывать сразу несколько секций.
  • Одинарный режим (по умолчанию) – открыта только одна секция.

Пример включения множественного режима:

<Accordion allowMultiple>
  <AccordionItem>...</AccordionItem>
  <AccordionItem>...</AccordionItem>
</Accordion>

Для контроля активной секции программно используется проп index и событие onChange:

<Accordion index={0} onCha nge={(index) => console.log(index)}>
  <AccordionItem>...</AccordionItem>
  <AccordionItem>...</AccordionItem>
</Accordion>
  • index может быть числом или массивом чисел (в случае allowMultiple).
  • onChange возвращает индекс выбранной секции (или массив индексов для allowMultiple).

Кастомизация внешнего вида

Chakra UI позволяет легко стилизовать Accordion через системные пропсы:

  • Размеры и отступы – padding, margin, fontSize.
  • Цвета – bg, color, borderColor.
  • Состояния – псевдоклассы _expanded, _hover, _focus.

Пример стилизованного AccordionItem:

<AccordionItem>
  <h2>
    <AccordionButton _expanded={{ bg: "blue.500", color: "white" }} _hover={{ bg: "blue.100" }}>
      <Box flex="1" textAlign="left">
        Секция с кастомной стилизацией
      </Box>
    </AccordionButton>
  </h2>
  <AccordionPanel pb={4}>
    Содержимое с уникальным оформлением
  </AccordionPanel>
</AccordionItem>
  • _expanded применяется, когда секция открыта.
  • _hover управляет эффектом при наведении.

Добавление иконок

Часто для Accordion используют иконки для визуальной индикации состояния секции. Chakra предоставляет компонент AccordionIcon, который автоматически меняет положение в зависимости от состояния.

<AccordionButton>
  <Box flex="1" textAlign="left">
    Секция с иконкой
  </Box>
  <AccordionIcon />
</AccordionButton>

Особенности AccordionIcon:

  • Автоматически поворачивается на 180° при раскрытии.
  • Легко стилизуется через системные пропсы: color, boxSize, margin.

Адаптивность и интеграция с другими компонентами

Accordion хорошо сочетается с другими компонентами Chakra UI, включая Flex, Stack, Grid и Image. Секции можно наполнять любым контентом – текст, изображения, формы, списки.

Пример интеграции с Grid:

<AccordionItem>
  <h2>
    <AccordionButton>
      <Box flex="1" textAlign="left">Секция с сеткой</Box>
      <AccordionIcon />
    </AccordionButton>
  </h2>
  <AccordionPanel pb={4}>
    <Grid templateColumns="repeat(3, 1fr)" gap={4}>
      <Box bg="red.100" height="50px" />
      <Box bg="green.100" height="50px" />
      <Box bg="blue.100" height="50px" />
    </Grid>
  </AccordionPanel>
</AccordionItem>

Управление фокусом и клавиатурой

Accordion в Chakra UI полностью поддерживает доступность:

  • Tab перемещает фокус между секциями.
  • Enter или Space открывают/закрывают секцию.
  • ArrowUp и ArrowDown позволяют перемещаться между заголовками.

Дополнительные пропсы

  • allowToggle – позволяет закрывать активную секцию, даже если она одна в аккордеоне.
  • reduceMotion – уменьшает анимацию для пользователей с включёнными системными настройками уменьшения движения.
  • defaultIndex – задаёт, какая секция открыта при инициализации, без контроля состояния.
<Accordion defaultIndex={[1]} allowMultiple>
  <AccordionItem>...</AccordionItem>
  <AccordionItem>...</AccordionItem>
</Accordion>
  • defaultIndex принимает число или массив чисел для множественного режима.

Анимации и плавные переходы

Accordion автоматически применяет плавную анимацию при открытии и закрытии секции. В Chakra UI используется Collapse, поэтому можно управлять временем и функцией анимации через системные настройки темы или напрямую через motionProps при необходимости.

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

  • Использовать AccordionIcon для улучшения визуальной индикации.
  • Применять allowMultiple для FAQ и длинного контента.
  • Сочетать с Grid или Flex для организации сложного контента.
  • Использовать _expanded для создания динамической стилизации открытой секции.
  • Следить за доступностью через правильные заголовки (h2, h3 и т.д.) и управление фокусом.

Accordion в Chakra UI сочетает простоту использования с мощной кастомизацией, позволяя создавать как простые списки, так и сложные, интерактивные интерфейсы с минимальными усилиями.

Оглавление