Accordion

Паттерны

Группа FAQ

Когда использовать:

• Несколько коротких ответов относятся к одному блоку помощи или поддержки.

Заметки о композиции:

• Делайте каждый триггер достаточно конкретным, чтобы список можно было просмотреть, не открывая каждый элемент.
• Используйте один корень, чтобы все секции разделяли одну модель раскрытия.

Компромиссы:

• Хорошо подходит для удобной для просмотра групповой справки.
• Плохо подходит для сильно интерактивных сценариев с формами.

import {
  Accordion,
  AccordionContent,
  AccordionHeader,
  AccordionIcon,
  AccordionItem,
  AccordionTrigger,
  Separator,
  Text,
} from '@vega-ui/react';

const questions = [

Секции настроек

Когда использовать:

• Большую форму настроек нужно разбить на удобные раскрывающиеся блоки.

Заметки о композиции:

• Держите актуальную сейчас секцию открытой по умолчанию.
• Убедитесь, что свёрнутые секции дают достаточно контекста в подписях триггеров.

Компромиссы:

• Помогает сжать длинные формы.
• Может скрыть важную валидацию, если состояние секций не продумано.

import { FormEvent, useState } from 'react';
import {
  Accordion,
  AccordionContent,
  AccordionHeader,
  AccordionIcon,
  AccordionItem,
  AccordionTrigger,
  Button,
  Label,
  Separator,
  TextField,

Встроенная справка внутри оверлеев

Когда использовать:

• Выдвижной панели (Drawer) или диалогу нужны раскрывающиеся второстепенные подсказки без ухода из текущей задачи.

Заметки о композиции:

• Аккордеон должен оставаться второстепенным по отношению к основной задаче.
• Не позволяйте каждой секции превращаться в замену целой страницы внутри оверлея.

Компромиссы:

• Сохраняет локальный контекст и держит справку рядом с задачей.
• Может сделать панель визуально перегруженной, если раскрыто слишком много секций.

import type { CSSProperties } from 'react';
import {
  Accordion,
  AccordionContent,
  AccordionHeader,
  AccordionIcon,
  AccordionItem,
  AccordionTrigger,
  Button,
  Drawer,
  DrawerClose,
  DrawerContent,

Сравнение

Быстрое правило выбора

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

Accordion или Collapsible

Используйте Accordion, когда:

• несколько секций относятся к одному групповому паттерну раскрытия
• важна согласованность состояния раскрытия между секциями

Используйте Collapsible, когда:

• достаточно одного самостоятельного раскрывающегося блока
• функции не нужна групповая семантика элементов

Главный компромисс: Accordion даёт согласованное групповое поведение, а Collapsible легче для одиночных секций.

Accordion или Drawer

Используйте Accordion, когда:

• содержимое должно оставаться встроенным в текущую раскладку

Используйте Drawer, когда:

• содержимое заслуживает отдельной панели-оверлея

Главный компромисс: Accordion сохраняет встроенный контекст, а Drawer даёт более сильное разделение и больше места.

Выбирайте этот компонент, когда

• Несколько раскрывающихся секций относятся к одному групповому интерфейсу.
• Пользователям удобно раскрывать одну или несколько связанных секций прямо на месте.
• Раскладка должна оставаться на странице, а не уходить в оверлей.

Не выбирайте этот компонент, когда

• Нужна только одна раскрывающаяся секция.
• Содержимому нужно модальное или оверлейное разделение.
• Модель состояния раскрытия между секциями не важна.

Решение проблем

Кликабельной кажется только иконка

Симптом

Пользователи пытаются кликнуть по строке, но как триггер реагирует только иконка.

Вероятная причина

Композицию триггера перестилизовали так, что иконка визуально отделилась от кнопки на всю ширину.

Как проверить

• Наведите курсор и кликните в разных точках по всей ширине триггера.
• Проверьте, не изменили ли собственные дочерние элементы или обёртки раскладку кнопки.

Исправление

• Оставьте AccordionTrigger основной поверхностью взаимодействия.
• Используйте AccordionIcon как декорацию внутри этого триггера.

Состояние раскрытия не совпадает с логикой родителя

Симптом

Секции открываются и закрываются, но состояние функции в родителе рассинхронизируется.

Вероятная причина

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

Как проверить

• Проверьте, что opened и onChangeOpened подключены вместе.
• Сравните видимое состояние с данными родителя после нескольких переключений.

Исправление

• Для состояния, которым владеет родитель, используйте opened и onChangeOpened вместе.
• defaultOpened оставьте только для неконтролируемых сценариев.

Ошибки формы теряются в свёрнутых секциях

Симптом

Валидация есть, но пользователи её не замечают, потому что нужная секция свёрнута.

Вероятная причина

Состояние аккордеона и видимость ошибок формы проектировали по отдельности.

Как проверить

• Вызовите реальную ошибку валидации внутри свёрнутой секции.
• Проверьте, сигнализирует ли внешний интерфейс, какой секции нужно внимание.

Исправление

• Автоматически открывайте невалидную секцию или показывайте видимую подсказку об ошибке на уровне секции.
• Не полагайтесь на скрытый текст ошибки внутри как на единственный сигнал.