PageServices
Детальная страница инстанса: селект раздела (sidebar), заголовок (title) со статусом в slotAfterTitle, действия (actions) и контент (children). Раскладку берёт из AdaptiveProvider.
Когда использовать
- Страница конкретного ресурса/инстанса с навигацией по разделам и заголовком-статусом.
- Нужен заголовок со статусом и панелью действий поверх адаптивной раскладки с боковым сайдбаром.
Анатомия
sidebar— селект/сайдбар разделов (пропсыPageSidebar).title— заголовок страницы (строкаHeadline).slotBeforeTitle/slotAfterTitle— слоты до/после заголовка; статус инстанса обычно кладут вslotAfterTitle.actions— панель действий справа от заголовка.subtitle— подзаголовок (например,DefaultSubtitleс ID ресурса).children— контент страницы.autoHeight— снять расчёт высоты по глобальному хост-контейнеру single-spa.limitContentMaxWidth— ограничить максимальную ширину контента.
Адаптивность
desktop— сайдбар сбоку, заголовок и действия в строке шапки.mobile— селект раздела (SidebarSelect) выносится наверх как full-bleed-строка с разделителем снизу; ниже — заголовок со статусом, строка действий и контент с отступом.
Установка
pnpm add @cloud-ru/ds-uikit-product-page-layoutimport { PageServices } from '@cloud-ru/ds-uikit-product-page-layout'Props
Types
Props
PageServicesProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
actions | Action[] | — | no | |
autoHeight | boolean | — | no | |
children | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined | — | no | |
className | string | — | no | |
data-test-id | string | — | no | |
limitContentMaxWidth | boolean | — | no | |
maxVisibleActionsItems | number | — | no | |
sidebar | PageSidebarProps | — | no | |
slotAfterTitle | ReactNode | — | no | Слот после заголовка (например, статус) |
slotBeforeTitle | ReactNode | — | no | Слот перед заголовком (например, кнопка «назад») |
subtitle | ReactNode | — | no | Подзаголовок под заголовком |
title | string | — | yes | Заголовок страницы |
truncateTitle | boolean | — | no | Обрезать заголовок в одну строку с многоточием |