AccordionBox

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

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

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

Accordion title

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.

<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">
  <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>

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

Accordion title 1

Accordion title 2

<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 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>

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

Accordion title

<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>

<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+. Работает только с ограничением по ширине.

Accordion title

<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>

<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>