llms.txt

PageLayout

@cloud-ru/ds-uikit-product-page-layout — набор страничных раскладок продуктового кабинета. Раскладки построены на общих слотах (Headline, Actions, сайдбар) и переключаются между desktop- и mobile-представлением автоматически по AdaptiveProvider.

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

  • Страницы продуктового кабинета, которым нужна единая адаптивная раскладка шапки, действий и сайдбара.
  • Одно и то же дерево разделов и набор действий нужны и на desktop, и на mobile без ручного дублирования вёрстки.

Когда не нужен пакет:

  • Отдельная карточка или виджет внутри страницы:
  • Только панель действий без страничной обёртки:
    • соберите Button / kebab напрямую.

Раскладки

  • PageCatalog — список/каталог сервисов: заголовок, действия в шапке, контент.
  • PageServices — детальная страница инстанса: селект раздела, заголовок со статусом, действия, контент.
  • PageForm — форма создания/настройки: степпер, сайд-блок и sticky-футер с оценкой бюджета.
  • TreeNavigation — раскладка с деревом разделов в режимах popover / aside / fixed.
  • PageSidebar — сайдбар разделов с поиском, группами и сворачиванием.

Общие слоты, переиспользуемые внутри раскладок:

  • Headline — строка заголовка: title, слоты до/после, действия, подзаголовок.
  • DefaultSubtitle — подзаголовок «подпись + копируемое значение».
  • PageLoading — заглушка-спиннер на время загрузки страницы.

Установка

pnpm add @cloud-ru/ds-uikit-product-page-layout
import {
  PageCatalog,
  PageServices,
  PageForm,
  TreeNavigation,
  PageSidebar,
  Headline,
  DefaultSubtitle,
  PageLoading,
  TREE_NAVIGATION_MODE,
} from '@cloud-ru/ds-uikit-product-page-layout'

Адаптивность

PageCatalog, PageServices и PageForm — адаптивные: раскладку они берут из контекста AdaptiveProvider (@cloud-ru/ds-adaptive), а не из пропа. Потребитель ставит один <AdaptiveProvider> в корне фичи — desktop работает по умолчанию, mobile подключается автоматически.

  • На mobile рендерится отдельное представление: сайдбар сворачивается в селект, действия — одно видимое плюс kebab.
  • Форс конкретной раскладки — withLayoutType(Component, 'desktop') или вложенный <AdaptiveProvider layoutType='mobile'>. Пропа layoutType у компонентов нет.

Подробности по каждому представлению — на страницах соответствующих раскладок.

Figma

Открыть в Figma →

Смотри также