AccordionBox

import { AccordionBox } from '@megafon/ui-shared';

Примеры и код

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

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

<AccordionBox title="Accordion title">
  <Paragraph hasMargin={false}>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit dolore quam deserunt magni consequuntur veniam!
      Enim doloremque error expedita nisi nobis architecto aliquid. Iste dolores cupiditate earum vero, at quis.
  </Paragraph>
</AccordionBox>

Несколько компонентов

<AccordionBox title="Accordion title 1">
  <Paragraph hasMargin={false}>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit dolore quam deserunt magni consequuntur veniam!
      Enim doloremque error expedita nisi nobis architecto aliquid. Iste dolores cupiditate earum vero, at quis.
  </Paragraph>
</AccordionBox>
  <AccordionBox title="Accordion title 2">
  <Paragraph hasMargin={false}>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit dolore quam deserunt magni consequuntur veniam!
      Enim doloremque error expedita nisi nobis architecto aliquid. Iste dolores cupiditate earum vero, at quis.
  </Paragraph>
</AccordionBox>

Без ограничения по ширине

<AccordionBox title="Accordion title" isFullWidth={true}>
  <Paragraph hasMargin={false}>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit dolore quam deserunt magni consequuntur veniam!
      Enim doloremque error expedita nisi nobis architecto aliquid. Iste dolores cupiditate earum vero, at quis.
  </Paragraph>
</AccordionBox>

Центрирование по горизонтали

Для расширений 1280+. Работает только с ограничением по ширине.

<AccordionBox title="Accordion title" hCenterAlignWide={true}>
  <Paragraph hasMargin={false}>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit dolore quam deserunt magni consequuntur veniam!
      Enim doloremque error expedita nisi nobis architecto aliquid. Iste dolores cupiditate earum vero, at quis.
  </Paragraph>
</AccordionBox>

Prop name	Type	Default	Description
dataAttrs	{ root?: Record<string, string> \| undefined; header?: { root: Record<string, string>; } \| undefined; collapse?: { root?: Record<string, string> \| undefined; inner?: Record<...> \| undefined; } \| undefined; titleWrap?: Record<...> \| undefined; arrowUp?: Record<...> \| undefined; arrowDown?: Record<...> \| undefined; } \|...		Дополнительные data атрибуты к внутренним элементам
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на корневой элемент
title*	string		Заголовок аккордеона
titleTag	"h1" \| "h2" \| "h3" \| "h5" \| undefined		Тег заголовка (определяет базовый тег и стили)
titleTagName	"h1" \| "h2" \| "h3" \| "h5" \| "h4" \| "h6" \| undefined		Тег заголовка для семантической разметки (переопределение тега без изменения стилей)
isOpened	boolean \| undefined		Состояние аккордеона, заданное извне
hasMicrodata	boolean \| undefined		Включить микроразметку
isFullWidth	boolean \| undefined	false	Отключить ограничение ширины
hCenterAlignWide	boolean \| undefined	false	Центрирование по горизонтали для расширения 1280+
className	string \| undefined		Дополнительный класс для корневого элемента
classes	{ openedClass?: string \| undefined; root?: string \| undefined; collapse?: string \| undefined; titleWrap?: string \| undefined; title?: string \| undefined; } \| undefined		Дополнительные классы для корневого и внутренних элементов
onClickAccordion	((isOpened: boolean) => void) \| undefined		Обработчик клика