llms.txt

PageForm

Раскладка формы создания или настройки ресурса: заголовок, степпер (stepper), контент (children), сайд-блок (sideBlock) и sticky-футер с оценкой бюджета (priceSummary) и кнопками (footer). Раскладку берёт из AdaptiveProvider.

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

  • Многошаговые формы создания/аренды/настройки ресурса со степпером и итоговой ценой.
  • Нужен закреплённый футер с основной/вторичной кнопкой и сводкой бюджета.

Анатомия

Тело PageForm на desktop — одна карточка формы фиксированной ширины по центру страницы; справа при переданных слотах встаёт липкая колонка sideItems (304px). Внутри карточки вертикальным стеком идут заголовок, степпер, контент шага и футер.

Боковая колонка отрисовывается только при переданных priceSummary.content / sideBlock; иначе карточка формы стоит одна по центру. На mobile раскладка одноколоночная: степпер sticky сверху, слоты — стопкой, футер sticky снизу.

Слоты:

  • title / subtitle — заголовок формы и подзаголовок.
  • stepper — степпер шагов; на mobile становится sticky сверху.
  • children — контент текущего шага.
  • sideBlock — массив блоков { label, content } в боковой колонке (подсказки, сводка конфигурации).
  • priceSummary — { total, content? }: на desktop content идёт карточкой боковой колонки, на mobile — оценкой бюджета в футере.
  • footer — кнопки футера (внизу карточки формы на desktop, sticky-футер на mobile). stickyFooter закрепляет его внизу при прокрутке длинной формы.

Кнопки футера

  • buttonPrimary — основная кнопка. variant из набора (continue, create, save, rent, send, restore, add) задаёт локализованную подпись; variant: 'custom' требует свой label.
  • buttonSecondary — вторичная кнопка (cancel, back или custom).
  • buttonAdditional — дополнительная кнопка @cloud-ru/ds-button.

Каждой кнопке можно передать tooltip (пропсы @cloud-ru/ds-tooltip).

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

  • desktop — сайд-блок сбоку, футер с бюджетом и кнопками внизу.
  • mobile — слот «ещё» (moreActions, kebab) прижимается к правому краю строки заголовка; степпер sticky сверху, футер с оценкой бюджета и кнопками — sticky снизу.

Установка

pnpm add @cloud-ru/ds-uikit-product-page-layout
import { PageForm } from '@cloud-ru/ds-uikit-product-page-layout'

Props

Types

PropsPageFormProps
PropTypeDefaultRequiredDescription
childrenstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—no
classNamestring—no
data-test-idstring—no
footer{ buttonPrimary: ({ variant: ButtonPrimaryVariant; } | { variant: "custom"; label: string; }) & { tooltip?: TooltipProps; } & Omit<ButtonProps, "label">; buttonSecondary?: (({ ...; } | { ...; }) & ... 1 more ... & Omit<...>); buttonAdditional?: ({ ...; } & ... 4 more ... & { ...; }) | undefin...—no
priceSummary{ total: ReactNode; content?: ReactNode; }—no
sideBlock{ label: string; content: ReactNode; snapPoints?: SnapPoint[]; }[]—no
stepperReactNode—no
stickyFooterboolean—noЗакрепляет футер внизу формы при прокрутке контента.
subtitleReactNode—noПодзаголовок под заголовком
titlestring—yesЗаголовок страницы

Unions

ButtonPrimaryVariantunion

"add" | "continue" | "create" | "rent" | "restore" | "save" | "send"

ButtonSecondaryVariantunion

"back" | "cancel"

Related props

ButtonPropsinterface

PropTypeDefaultRequiredDescription
appearance"critical" | "neutral" | "primary"—noВариант оформления
asT | undefined—noЭлемент или компонент для рендера: 'button' | 'a' | ComponentType (например Link из react-router-dom)
classNamestring | undefined—noДополнительный класс
counterOmit<CounterProps, "size"> | undefined—noПропсы для counter. `appearance` можно задать явно (по умолчанию наследуется от appearance кнопки).
data-test-idstring | undefined—no
disabledboolean | undefined—noОтключена
fullWidthboolean | undefined—noНа всю ширину
iconstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—noИконка
iconPosition"after" | "before"—noПозиция иконки относительно текста
innerRefPolymorphicRef<T> | undefined—noRef на реальный DOM-элемент/инстанс, который рендерится через `as`. Используем явный проп, чтобы не зависеть от `forwardRef` и не тащить type-assertions на экспорт.
labelstring | undefined—noТекст кнопки
loadingboolean | undefined—noСостояние загрузки
minWidthboolean | undefined—noМинимальная ширина контейнера (`min-width` из токена размера). По умолчанию `true`. `false` — кнопка сжимается по контенту вместо фиксированного минимума.
size"l" | "m" | "s"—noРазмер
view"elevated" | "filled" | "function" | "outline" | "simple" | "tonal"—noВариант кнопки (Figma: filled, outline, function, simple, elevated)

ModalCustomPropsinterface

PropTypeDefaultRequiredDescription
childrenstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—yesСодержимое окна (композиция Header/Body/Footer)
classNamestring | undefined—noCSS-класс окна
closeOnPopstateboolean | undefined—noЗакрытие при навигации по истории
containerModalContainer | undefined—noЯвный DOM-контейнер для `createPortal`; иначе `usePortalContext()` или `document.body`.
data-test-idstring | undefined—no
heightAutoboolean | undefined—noРастягивать по высоте в пределах контейнера
mode"aggressive" | "forced" | "regular"—noРежим закрытия: Regular — overlay/Esc/кнопка; Aggressive — только кнопка; Forced — без кнопки и overlay/Esc.
onClose() => void—yesКолбэк закрытия
openboolean—yesУправление состоянием показан/не показан
rootClassNamestring | undefined—noCSS-класс корневого слоя портала
safeAreaboolean | undefined—noРезервировать ли место под iOS notch / home-indicator и Android nav-bar. Реализовано паддингом на `.content` через `env(safe-area-inset-*)`: на устройстве без выреза/индикатора (и на desktop) inset = 0, поэтому никакого «лишнего» отступа не появляется; на notched-устройстве — ровно нужный. Верхний отступ добавляется только когда sheet раскрыт на полный вьюпорт (его верх под notch).
showBackdropboolean | undefined—noОтображение тёмной подложки за sheet'ом. При `false` фон не затемняется и click-outside не закрывает sheet (нет backdrop-узла, по которому ловится клик).
snapPointsSnapPoint[] | undefined—noМассив фиксированных позиций sheet'а от меньшей к большей. По дефолту `undefined` — sheet `height: auto` с одним snap'ом по высоте контента. Пример: `[0.5, 1]` — sheet открывается на половину экрана, drag вверх раскрывает до full-viewport; drag вниз ниже `0.5` ведёт к закрытию. Контракт массива (движок не сортирует и не дедуплицирует — порядок и различимость на стороне потребителя): - строго по возрастанию: индекс `0` — самая компактная позиция, последний — top / expanded; - значения должны резолвиться в различные высоты (`['50%', 0.5]` на типичном вьюпорте дадут одну высоту → дубль-индекс будет недостижим свайпом); - `'fit-content'` имеет смысл только как ЕДИНСТВЕННЫЙ snap (без `snapPoints`); внутри массива фиксированных позиций его «контентная» высота не определена.
swipeEnabledboolean | undefined—noВключает swipe-down для закрытия / swipe-up для раскрытия на следующий snap-point. При `swipeEnabled=false` snap-point по-прежнему можно переключить через controlled `snapIndex` prop'ом.
width"l" | "m" | "s"—noРазмер окна

TooltipPropsinterface

PropTypeDefaultRequiredDescription
childrenReactNode | ChildrenFunction—noТриггер поповера (подробнее читайте ниже)
classNamestring | undefined—no
closeOnPopstateboolean | undefined—noЗакрывать ли поповер при переходе по истории браузера
data-test-idstring | undefined—no
disableMaxWidthboolean | undefined—noОтключение ограничения ширины тултипа
disableSpanWrapperboolean | undefined—noОтключает для `isValidElement` внешнюю обертку триггера <br/> Пригодится для элементов с `position: absolute` <br/> Работает для триггеров, которые умеют отдать свою DOM-ноду: нативные элементы, `forwardRef`-компоненты и компоненты, помеченные `withInnerRefSupport` из `@cloud-ru/ds-utils`. Остальные всё равно получают `<span>` — без ноды поповеру не от чего считать позицию; в dev-режиме об этом печатается предупреждение.
fallbackPlacementsPlacement[] | undefined—noЦепочка расположений которая будет применяться к поповеру от первого к последнему если при текущем он не влезает.
hoverDelayClosenumber | undefined—noЗадержка закрытия по ховеру
hoverDelayOpennumber | undefined—noЗадержка открытия по ховеру
offsetnumber | undefined—noОтступ поповера от его триггер-элемента (в пикселях).
onOpenChange((isOpen: boolean) => void) | undefined—noКолбек отображения компонента. Срабатывает при изменении состояния open.
openboolean | undefined—noУправляет состоянием показан/не показан.
placement"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"—noПоложение поповера относительно своего триггера (children).
tipstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—yesСодержимое тултипа (текст или разметка)
trigger"click" | "clickAndFocusVisible" | "focus" | "focusVisible" | "hover" | "hoverAndFocus" | "hoverAndFocusVisible"—noУсловие отображения поповера: <br/> - `click` - открывать по клику <br/> - `hover` - открывать по ховеру <br/> - `focusVisible` - открывать по focus-visible <br/> - `focus` - открывать по фокусу <br/> - `hoverAndFocusVisible` - открывать по ховеру и focus-visible <br/> - `hoverAndFocus` - открывать по ховеру и фокусу <br/> - `clickAndFocusVisible` - открывать по клику и focus-visible
triggerClassNamestring | undefined—noCSS-класс триггера
triggerRefForwardedRef<HTMLElement | ReferenceType | null> | undefined—noRef ссылка на триггер

Types

PageFormProps

Unions

Storybook

Открыть в Storybook →

Figma

Открыть в Figma →