llms.txt

CollapseBlock

Три семантических уровня раскрываемого блока: CollapseBlockPrimary, CollapseBlockSecondary, CollapseBlockTertiary. Уровень задаёт размер типографики заголовка и плотность отступов; все три компонента используют одно и то же API — меняется только роль в иерархии.

Когда использовать

  • Primary (title size l) — верхнеуровневые разделы страницы или секции формы.
  • Secondary (title size m) — подразделы внутри Primary. Типовой view='outline'.
  • Tertiary (title size s) — плоские детали без дальнейшей вложенности. Без view / backgroundPredefined — только заголовок и контент.

Анатомия

Содержимое

children — слот целиком: компонент задаёт раскладку и отступы, но не типографику и не цвет текста. Содержимое наследует стили родителя, поэтому шрифт задаёт место использования — обёрткой с нужным классом либо компонентом Typography. В макете содержимое набрано regular/body/m.

View

Визуальная подача блока: simple — плоский фон без рамки, outline — с границей, elevated — с тенью для поверхностей поверх страницы.

backgroundPredefined

Слой акрила через BACKGROUND_PREDEFINED_FILL из @cloud-ru/ds-materials (как у Card). По умолчанию — neutralBackground1Level.

chevronPosition (default after)

Положение шеврона-раскрытия относительно заголовка.

  • before — шеврон слева от заголовка.
  • after — шеврон справа от заголовка.

showChevron (default true)

Управляет наличием шеврона-раскрытия в строке заголовка.

  • true — шеврон показывается рядом с заголовком.
  • false — шеврон скрыт; блок по-прежнему раскрывается кликом по строке заголовка.

Установка

pnpm add @cloud-ru/ds-accordion
import { Accordion } from '@cloud-ru/ds-accordion'

// Каждый уровень доступен статическим полем контейнера:
Accordion.CollapseBlockPrimary
Accordion.CollapseBlockSecondary
Accordion.CollapseBlockTertiary

Примеры использования

Цветовые схемы

Цветовые схемыNeutral — дефолт. Primary — акцент. Цветные варианты — для статусных разделов.

Neutral

Primary

Green

Red

tsx
import { Accordion } from '@cloud-ru/ds-accordion';
import { BACKGROUND_PREDEFINED_FILL } from '@cloud-ru/ds-materials';

import styles from './styles.module.scss';

export function Appearances() {
  return (
    <div className={styles.wrapper}>
      <Accordion>
        <Accordion.CollapseBlockPrimary
          id='neutral'
          backgroundPredefined={BACKGROUND_PREDEFINED_FILL.NeutralBackground1Level}
          title='Neutral'
          view='outline'
        >
          Нейтральный акрил — значение по умолчанию.
        </Accordion.CollapseBlockPrimary>
        <Accordion.CollapseBlockPrimary
          id='primary'
          backgroundPredefined={BACKGROUND_PREDEFINED_FILL.PrimaryBackground}
          title='Primary'
          view='outline'
        >
          Акцентный раздел, выделенный основным цветом.
        </Accordion.CollapseBlockPrimary>
        <Accordion.CollapseBlockPrimary
          id='green'
          backgroundPredefined={BACKGROUND_PREDEFINED_FILL.GreenBackground}
          title='Green'
          view='outline'
        >
          Успех, подтверждённые действия.
        </Accordion.CollapseBlockPrimary>
        <Accordion.CollapseBlockPrimary
          id='red'
          backgroundPredefined={BACKGROUND_PREDEFINED_FILL.RedBackground}
          title='Red'
          view='outline'
        >
          Предупреждение или критическое внимание.
        </Accordion.CollapseBlockPrimary>
      </Accordion>
    </div>
  );
}

Левый шеврон + afterTitle справа

Левый шеврон + afterTitle справаЧитается как «строка итогов»: название слева, значение справа, шеврон возле названия.

Итого

1 200 ₽

Доставка

бесплатно
tsx
import { Accordion } from '@cloud-ru/ds-accordion';

import styles from './styles.module.scss';
export function ChevronBefore() {
  return (
    <div className={styles.wrapper}>
      <Accordion>
        <Accordion.CollapseBlockSecondary
          id='summary'
          view='outline'
          title='Итого'
          chevronPosition='before'
          afterTitle='1 200 ₽'
        >
          Разбивка платежа по позициям.
        </Accordion.CollapseBlockSecondary>
        <Accordion.CollapseBlockSecondary
          id='delivery'
          view='outline'
          title='Доставка'
          chevronPosition='before'
          afterTitle='бесплатно'
        >
          Курьер по Москве, 2–3 дня.
        </Accordion.CollapseBlockSecondary>
      </Accordion>
    </div>
  );
}

afterTitle — счётчик

afterTitle — счётчикCounter в правом слоте заголовка. Не кликабельный — клик по строке раскрывает блок.

Входящие

12

Архив

238
tsx
import { Accordion } from '@cloud-ru/ds-accordion';
import { Counter } from '@cloud-ru/ds-counter';

import styles from './styles.module.scss';

export function AfterTitle() {
  return (
    <div className={styles.wrapper}>
      <Accordion>
        <Accordion.CollapseBlockPrimary id='inbox' title='Входящие' view='outline' afterTitle={<Counter value={12} />}>
          Непрочитанные сообщения и уведомления.
        </Accordion.CollapseBlockPrimary>
        <Accordion.CollapseBlockPrimary id='archive' title='Архив' view='outline' afterTitle={<Counter value={238} />}>
          Перемещённые из входящих.
        </Accordion.CollapseBlockPrimary>
      </Accordion>
    </div>
  );
}

Primary → Secondary → Tertiary

Primary → Secondary → TertiaryКаждый уровень — собственный Accordion. Вложенный не наследует состояние родителя.

Платежи

tsx
import { Accordion } from '@cloud-ru/ds-accordion';

import styles from './styles.module.scss';
export function NestedLevels() {
  return (
    <div className={styles.wrapper}>
      <Accordion>
        <Accordion.CollapseBlockPrimary id='root' title='Платежи' view='outline'>
          <Accordion>
            <Accordion.CollapseBlockSecondary id='sub-cards' view='outline' title='Карты'>
              <Accordion>
                <Accordion.CollapseBlockTertiary id='visa' title='Visa •••• 4242'>
                  Основная карта, истекает 09/28.
                </Accordion.CollapseBlockTertiary>
                <Accordion.CollapseBlockTertiary id='mir' title='МИР •••• 7781'>
                  Зарплатная карта.
                </Accordion.CollapseBlockTertiary>
              </Accordion>
            </Accordion.CollapseBlockSecondary>
            <Accordion.CollapseBlockSecondary id='sub-invoices' view='outline' title='Счета'>
              История операций и выставленные счета.
            </Accordion.CollapseBlockSecondary>
          </Accordion>
        </Accordion.CollapseBlockPrimary>
      </Accordion>
    </div>
  );
}

Props

Types

PropsCollapseBlockProps
PropTypeDefaultRequiredDescription
afterTitleReactNode—noКонтент справа от заголовка
backgroundPredefined"blueBackground" | "decorTransparent" | "greenBackground" | "neutralBackground1Level" | "orangeBackground" | "pinkBackground" | "primaryBackground" | "redBackground" | "transparent" | "violetBackground" | "yellowBackground"neutralBackground1LevelnoСлой backgroundPredefined + acrylic (см. `BACKGROUND_PREDEFINED_FILL` в `@cloud-ru/ds-materials`). По умолчанию `material/neutralBackground1Level`.
chevronPosition"after" | "before"afternoПоложение шеврона-раскрытия относительно текста (`before` | `after`)
childrenstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—no
classNamestring—noДополнительный класс корневого элемента
component"accordionPrimary" | "accordionSecondary" | "accordionTertiary"—yesУровень аккордеона: размер типографики и отступы
data-test-idstring—no
idstring—yesУникальный идентификатор блока в группе переключателей
keepMountedbooleanfalsenoОставлять ли контент в DOM при сворачивании
showChevronbooleantruenoПоказывать ли шеврон-раскрытия рядом с заголовком (по умолчанию `true`)
subTitleReactNode—noПодзаголовок под строкой заголовка
titlestring—noНачальное состояние раскрытия (uncontrolled)
view"elevated" | "outline" | "simple"simplenoВизуальный вариант обложки (`simple`, `outline`, `elevated`)

Unions

ChevronPositionunion

"after" | "before"

Componentunion

"accordionPrimary" | "accordionSecondary" | "accordionTertiary"

Viewunion

"elevated" | "outline" | "simple"

Related props

BackgroundPredefinedFillunion

"blueBackground" | "decorTransparent" | "greenBackground" | "neutralBackground1Level" | "orangeBackground" | "pinkBackground" | "primaryBackground" | "redBackground" | "transparent" | "violetBackground" | "yellowBackground"

Types

CollapseBlockProps

Unions

Storybook

Открыть в Storybook →

Figma

Открыть в Figma →