Collapse

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

Основное использование

Импорт компонента осуществляется из пакета antd:

import { Collapse } from 'antd';

const { Panel } = Collapse;

Базовый пример:

<Collapse>
  <Panel header="Заголовок панели 1" key="1">
    <p>Содержимое панели 1</p>
  </Panel>
  <Panel header="Заголовок панели 2" key="2">
    <p>Содержимое панели 2</p>
  </Panel>
  <Panel header="Заголовок панели 3" key="3">
    <p>Содержимое панели 3</p>
  </Panel>
</Collapse>

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

  • header — заголовок панели, отображаемый всегда.
  • key — уникальный идентификатор панели, необходим для управления состоянием раскрытия.
  • Внутри Panel помещается любой React-контент.

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

По умолчанию Collapse поддерживает автоматическое управление состоянием панелей. Можно использовать активный ключ (activeKey) для контролируемого поведения:

<Collapse activeKey={['1']}>
  <Panel header="Панель 1" key="1">
    <p>Контент 1</p>
  </Panel>
  <Panel header="Панель 2" key="2">
    <p>Контент 2</p>
  </Panel>
</Collapse>

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

  • activeKey может быть строкой или массивом строк.
  • Для разрешения одновременного открытия нескольких панелей используется массив ключей.
  • Для запрета открытия нескольких панелей одновременно задается свойство accordion:
<Collapse accordion>
  <Panel header="Панель 1" key="1">
    <p>Контент 1</p>
  </Panel>
  <Panel header="Панель 2" key="2">
    <p>Контент 2</p>
  </Panel>
</Collapse>

При accordion одновременно может быть открыта только одна панель.

Свойства Collapse

Свойство Тип Описание
accordion boolean Режим аккордеона, только одна открытая панель
activeKey string string[]
defaultActiveKey string string[]
bordered boolean Отображение границ панелей
destroyInactivePanel boolean Удаление содержимого закрытых панелей из DOM
expandIcon function Кастомная иконка раскрытия панели

Кастомизация и стилизация

Изменение иконки раскрытия:

<Collapse
  expandIcon={({ isActive }) => <span>{isActive ? '-' : '+'}</span>}
>
  <Panel header="Панель с кастомной иконкой" key="1">
    <p>Содержимое панели</p>
  </Panel>
</Collapse>

Удаление границ:

<Collapse bordered={false}>
  <Panel header="Панель без границ" key="1">
    <p>Контент</p>
  </Panel>
</Collapse>

Удаление контента закрытой панели из DOM:

<Collapse destroyInactivePanel>
  <Panel header="Динамическая панель" key="1">
    <p>Содержимое загружается только при раскрытии</p>
  </Panel>
</Collapse>

Вложенные панели

Collapse поддерживает вложенные панели, что позволяет создавать сложные иерархии контента:

<Collapse>
  <Panel header="Внешняя панель" key="1">
    <Collapse>
      <Panel header="Внутренняя панель 1" key="1-1">
        <p>Контент внутренней панели 1</p>
      </Panel>
      <Panel header="Внутренняя панель 2" key="1-2">
        <p>Контент внутренней панели 2</p>
      </Panel>
    </Collapse>
  </Panel>
</Collapse>

События

  • onChange — вызывается при раскрытии или закрытии панели, получает массив активных ключей:
<Collapse onCha nge={(keys) => console.log('Активные панели:', keys)}>
  <Panel header="Панель 1" key="1">
    <p>Контент</p>
  </Panel>
</Collapse>

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

  1. Использовать accordion для FAQ или списков, где важно показывать только один раздел за раз.
  2. Применять destroyInactivePanel при больших объемах данных для оптимизации производительности.
  3. Кастомизация иконок и стилей помогает интегрировать Collapse в любой дизайн, сохраняя визуальное единство интерфейса.
  4. Вложенные панели удобны для сложных структур с несколькими уровнями информации, например в административных панелях или настройках приложений.

Пример с полным контролем

import React, { useState } from 'react';
import { Collapse, Button } from 'antd';

const { Panel } = Collapse;

const ControlledCollapse = () => {
  const [activeKeys, setActiveKeys] = useState(['1']);

  const togglePanel = (key) => {
    setActiveKeys((prev) =>
      prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]
    );
  };

  return (
    <>
      <Button onCl ick={() => togglePanel('1')}>Переключить панель 1</Button>
      <Collapse activeKey={activeKeys} onCha nge={setActiveKeys}>
        <Panel header="Панель 1" key="1">
          <p>Контент панели 1</p>
        </Panel>
        <Panel header="Панель 2" key="2">
          <p>Контент панели 2</p>
        </Panel>
      </Collapse>
    </>
  );
};

export default ControlledCollapse;

Такой подход обеспечивает полный контроль над состоянием, интеграцию с кнопками и динамическую логику открытия/закрытия панелей.

Оглавление