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>

Семантическое переопределение тега заголовка

<Accordion title="H5 стиль, но семантически h3" titleTag="h5" titleTagName="h3">
      <Paragraph hasMargin={false}>
          Поисковые системы учитывают структуру заголовков, слишком глубокий уровень (например, h5) может снизить значимость контента.
      </Paragraph>
  </Accordion>

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