Accordion

import { Accordion } from '@megafon/ui-core';

Примеры и код

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

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

<Accordion title="Списание абонентской платы">
<Paragraph hasMargin={false}>
    При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц
    и дополнительных услуг, указанных в заявке. В день перехода на тариф списывается полная сумма абонентской
    платы, далее списания происходят раз в месяц в тот же день.
</Paragraph>
</Accordion>

Аккордион изначально открыт

<Accordion title="Подключение к интернету" isOpened>
  <Paragraph hasMargin={false}>
      Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
      Монтажник проведёт все необходимые работы под ключ.
  </Paragraph>
</Accordion>

Несколько аккордионов

<Accordion title="Списание абонентской платы">
      <Paragraph hasMargin={false}>
          При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц
          и дополнительных услуг, указанных в заявке. В день перехода на тариф списывается полная сумма абонентской
          платы, далее списания происходят раз в месяц в тот же день.
      </Paragraph>
</Accordion>
<Accordion title="Дополнительные опции">
<Paragraph hasMargin={false}>
  При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц
  и дополнительных услуг, указанных в заявке. В день перехода на тариф списывается полная сумма абонентской
  платы, далее списания происходят раз в месяц в тот же день.
</Paragraph>
</Accordion>
<Accordion title="Дополнительные пакеты">
  <Paragraph hasMargin={false}>
      При подключении тарифа на вашем счёте должна быть сумма, достаточная для списания абонентской платы за месяц
      и дополнительных услуг, указанных в заявке. В день перехода на тариф списывается полная сумма абонентской
      платы, далее списания происходят раз в месяц в тот же день.
  </Paragraph>
</Accordion>

С микроразметкой

<Accordion hasMicrodata title="Подключение к интернету">
      <Paragraph hasMargin={false}>
          Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.
          Монтажник проведёт все необходимые работы под ключ.
      </Paragraph>
  </Accordion>

Итоговая верстка<div
  class="mfui-accordion"
  itemscope=""
  itemprop="mainEntity"
  itemtype="https://schema.org/Question"
>
  <div
    class="mfui-accordion__title-wrap"
    tabindex="0"
    role="button"
    itemprop="name"
  >
    <h5
      class="mfui-header mfui-header_color_default mfui-header_level_h5 mfui-header_h-align_inherit mfui-header_space_wide"
    >
      Подключение к интернету
    </h5>
    <div class="mfui-accordion__icon-box">
    </div>
  </div>
  <div class="mfui-accordion__content" style="overflow: hidden; height: 0px">
    <div class="mfui-accordion__content-inner">
      <div
        itemscope=""
        itemprop="acceptedAnswer"
        itemtype="https://schema.org/Answer"
      >
        <div itemprop="text">
          <p
            class="mfui-paragraph mfui-paragraph_color_default mfui-paragraph_space_wide"
          >
            Подключение к домашнему интернету осуществляется в удобное для вас
            время по технологиям Ethernet, Docsis. Монтажник проведёт все
            необходимые работы под ключ.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Prop name	Type	Default	Description
rootRef	Ref<HTMLDivElement>		Ссылка на корневой элемент
title*	ReactNode \| ReactNode[]		Заголовок
titleTag	"h1" \| "h2" \| "h3" \| "h5"	h5	Заголовок
isOpened	boolean	false	Состояние открытости
hasMicrodata	boolean	false	Включить микроразметку
className	string		Дополнительный класс для корневого элемента
classes	{ root?: string; openedClass?: string; collapse?: string; titleWrap?: string; title?: string; }		Дополнительные классы для корневого и внутренних элементов
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 атрибуты к внутренним элементам
onClickAccordion	(isOpened: boolean) => void		Обработчик клика