Accordion

Компонент для создания раскрывающихся/сворачивающихся блоков контента.

Загружается...

Структура

Обязательная обёртка для всего сворачивающегося контента - компонент Accordion.

Заголовок для триггера разворачивающегося блока необходимо вкладывать в подкомпонент Accordion.Summary, который наследует все свойства компонента SimpleCell.

Сворачивающийся контент необходимо вкладывать в подкомпонент Accordion.Content.

Режим работы

Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение React-компонентов, прочитать про это можно в документации React ↗.

Для использования неконтролируемого режима достаточно просто не передавать expanded или передавать defaultExpanded, если требуется задать значение по умолчанию.

Используйте свойства expanded и onChange для контролируемого управления состоянием компонента.

// Неконтролируемое состояние, раскрыт по умолчанию
<Accordion defaultExpanded>
  <Accordion.Summary>Заголовок</Accordion.Summary>
  <Accordion.Content>
    <Div>Контент</Div>
  </Accordion.Content>
</Accordion>;
 
// Контролируемое состояние, раскрыт по умолчанию
const [expanded, setExpanded] = React.useState(true);
return (
  <Accordion expanded={expanded} onChange={setExpanded}>
    <Accordion.Summary>Заголовок</Accordion.Summary>
    <Accordion.Content>
      <Div>Контент</Div>
    </Accordion.Content>
  </Accordion>
);

Группа аккордеонов

Компонент Group позволяет отображать несколько Accordion.

Загружается...

Визуальное оформление

Иконки

Используйте свойства ExpandIcon и CollapseIcon для кастомизации иконок раскрытия/сворачивания.

Загружается...

Анимация

Компонент поддерживает следующие анимационные эффекты:

плавное раскрытие/сворачивание контента;
автоматический расчет высоты содержимого;
поддержка прерывания анимации при быстром клике.

Производительность

По умолчанию контент монтируется, даже если он не развернут. Такое поведение предусмотрено с учётом серверного рендеринга и SEO.

Если внутри контента находится большая иерархия компонентов или если у вас много аккордеонов, то для улучшения производительности передавайте свойство unmountOnCollapsed, которое позволяет не монтировать контент, пока он не развернут и размонтирует компонент при сворачивании.

<Accordion unmountOnCollapsed />

Доступность реализована на основе рекомендаций из Accordion WAI-ARIA design pattern ↗.

Свойства и методы

Accordion

Свойство	Описание
`defaultExpanded`	`boolean` Значение по умолчанию. По умолчанию: `false`
`disabled`	`boolean` Блокировка взаимодействия с компонентом. По умолчанию: `-`
`expanded`	`boolean` Управляет раскрытием и скрытием контента. По умолчанию: `-`
`id`	`string` Используется для генерации id для заголовка и контента(a11y). По умолчанию: `-`
`onChange`	`((newValue: boolean) => void)` Возвращает новое значение при изменении раскрытия/сворачивания контента. По умолчанию: `-`
`unmountOnCollapsed`	`boolean` Нужно ли удалять из DOM контент при сворачивании. По умолчанию: `false`

Accordion.Summary

Свойство	Описание
`activated`	`boolean` Позволяет управлять `activated`-состоянием извне. По умолчанию: `-`
`activeClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`. По умолчанию: `-`
`activeEffectDelay`	`number` Длительность показа `active`-состояния. По умолчанию: `-`
`activeMode`	`StateModeLiteral` Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active. По умолчанию: `-`
`after`	`ReactNode` Иконка 24\|28 или `<Switch />`. Располагается справа от `indicator`. По умолчанию: `-`
`badgeAfterSubtitle`	`ReactNode` Иконка 12. Добавится справа от текста `subtitle`. По умолчанию: `-`
`badgeAfterTitle`	`ReactNode` Иконка 12 или `<Badge />`. Добавится справа от текста `children`. По умолчанию: `-`
`badgeBeforeSubtitle`	`ReactNode` Иконка 12. Добавится слева от текста `subtitle`. По умолчанию: `-`
`badgeBeforeTitle`	`ReactNode` Иконка 12 или `<Badge />`. Добавится слева от текста `children`. По умолчанию: `-`
`baseClassName`	`string \| false` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `className`. По умолчанию: `-`
`baseStyle`	`CSSProperties` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `style`. По умолчанию: `-`
`before`	`ReactNode` Иконка 28 или `<Avatar size={28\|32\|40\|48\|72} />`. По умолчанию: `-`
`borderRadiusMode`	`"auto" \| "inherit"` Задает border-radius элементу В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`. По умолчанию: `-`
`chevronSize`	`"s" \| "m"` Размер chevron. По умолчанию: `-`
`CollapseIcon`	`ElementType<any, keyof IntrinsicElements>` Иконка для сворачивания контента. По умолчанию: `-`
`Component`	`ElementType<any, keyof IntrinsicElements>` По умолчанию: `-`
`disabled`	`boolean` Блокировка взаимодействия с компонентом. По умолчанию: `-`
`ExpandIcon`	`ElementType<any, keyof IntrinsicElements>` Иконка для раскрытия контента. По умолчанию: `-`
`extraSubtitle`	`ReactNode` Дополнительная строка текста под `children` и `subtitle`. По умолчанию: `-`
`focusVisibleMode`	`FocusVisibleMode` Стиль аутлайна focus visible. Если передать произвольную строку, она добавится как css-класс при :focus-visible По умолчанию: `-`
`getRootRef`	`Ref<HTMLElement>` По умолчанию: `-`
`hasActive`	`boolean` Указывает, должен ли компонент реагировать на `active`-состояние. По умолчанию: `-`
`hasHover`	`boolean` Указывает, должен ли компонент реагировать на `hover`-состояние. По умолчанию: `-`
`hasHoverWithChildren`	`boolean` Позволяет родительскому компоненту иметь `hovered`-cостояние при наведении на любой дочерний элемент. По умолчанию состояние hovered у родителя сбрасывается. Присваивается родителькому компоненту. По умолчанию: `-`
`hoverClassName`	`string` Deprecated: Since 7.3.0. Свойство устарело и будет удалено в `v8`, используйте свойство `hoverMode`. По умолчанию: `-`
`hovered`	`boolean` Позволяет управлять `hovered`-состоянием извне. По умолчанию: `-`
`hoverMode`	`StateModeLiteral` Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover. По умолчанию: `-`
`iconPosition`	`"after" \| "before"` Позиция иконки. По умолчанию: `after`
`indicator`	`ReactNode` Контейнер для текста справа от `children`. По умолчанию: `-`
`multiline`	`boolean` Включает многострочный режим для отображения текста. По умолчанию: `-`
`overTitle`	`ReactNode` Дополнительная строка текста над `children`. По умолчанию: `-`
`subtitle`	`ReactNode` Дополнительная строка текста под `children`. По умолчанию: `-`
`unlockParentHover`	`boolean` Позволяет родительскому компоненту показывать hovered-состояние при наведении на текущий дочерний компонент. Присваивается дочернему компоненту. По умолчанию: `-`

Accordion.Content

Свойство	Описание
`getRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`

Tooltip

Avatar