Collapse

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

import { Collapse, Button, Box } from '@chakra-ui/react';
import { useState } from 'react';

function Example() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onCl ick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'Скрыть' : 'Показать'}
      </Button>
      <Collapse in={isOpen}>
        <Box p="4" bg="teal.100">
          Контент внутри Collapse
        </Box>
      </Collapse>
    </>
  );
}

В этом примере свойство in контролирует состояние компонента: true — контент виден, false — скрыт. Анимация происходит автоматически, без необходимости ручного управления стилями.

Свойства компонента Collapse

  • in — основной булевый параметр, определяющий видимость контента.
  • animateOpacity — если установить true, добавляется плавное изменение прозрачности при раскрытии и скрытии. Полезно для создания более мягких визуальных эффектов.
  • startingHeight — задаёт начальную высоту скрытого блока. Может быть полезно, если нужно оставить небольшой фрагмент видимым даже в закрытом состоянии.
  • endingHeight — высота блока в открытом состоянии, если требуется ограничить размер.

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

<Collapse in={isOpen} animateOpacity startingHeight="20px">
  <Box p="4" bg="orange.100">
    Частично видимый контент
  </Box>
</Collapse>

Управление скоростью анимации

Chakra UI позволяет настраивать продолжительность анимации через системные стили, используя объект transition. По умолчанию анимация происходит плавно, но можно задать кастомные значения времени и функции плавности:

<Collapse
  in={isOpen}
  animateOpacity
  style={{ transition: 'height 0.5s ease, opacity 0.5s ease' }}
>
  <Box p="4" bg="purple.100">
    Контент с кастомной анимацией
  </Box>
</Collapse>

Использование Collapse с Accordion

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

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

<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>

Здесь каждая AccordionPanel автоматически использует Collapse, обеспечивая плавное открытие и закрытие при клике на AccordionButton.

Продвинутые приёмы работы с Collapse

  1. Комбинирование с условным рендерингом Collapse может использоваться совместно с логикой React для оптимизации рендеринга. Контент внутри можно полностью не рендерить, пока панель закрыта:
{isOpen && (
  <Collapse in={isOpen}>
    <Box p="4" bg="green.100">
      Динамически рендеримый контент
    </Box>
  </Collapse>
)}
  1. Вложенные Collapse Внутри одного блока можно создавать несколько уровней Collapse, что полезно для многоуровневых меню или FAQ:
<Collapse in={isOpen}>
  <Box p="4" bg="gray.100">
    Основной контент
    <Collapse in={nestedOpen}>
      <Box p="2" bg="gray.200">
        Вложенный контент
      </Box>
    </Collapse>
  </Box>
</Collapse>
  1. Интеграция с Motion Chakra UI совместим с framer-motion, позволяя создавать более сложные анимации и комбинировать их с Collapse для кастомного поведения.

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

  • Использовать animateOpacity для более мягкого визуального восприятия.
  • Применять startingHeight для элементов с частично видимым контентом.
  • Для сложных интерфейсов использовать Collapse как базу для Accordion или кастомных раскрывающихся панелей.
  • Минимизировать рендеринг скрытых элементов для оптимизации производительности.

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

Оглавление