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