llms.txt

PageCatalog

Раскладка каталога/списка сервисов: строка заголовка (title) с панелью действий (actions) и контентная область (children). Раскладку берёт из AdaptiveProvider.

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

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

Анатомия

Заголовок (title) + панель действий (actions) + контент (children).

Действия

actions — массив Action. Каждый элемент — дискриминированный union по variant:

  • filled / outline / tonal / function / simple — простая кнопка @cloud-ru/ds-button с соответствующим view.
  • dropdown / kebab / droplist / quota — составные кнопки из предопределённых обёрток.

Основное действие ставьте первым в массиве: на desktop (row-reverse) оно встаёт справа, на mobile — растягивается на доступную ширину.

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

  • desktop — действия выстроены в строку шапки.
  • mobile — видимым остаётся первое (основное) действие, остальные уходят в kebab. Количество видимых регулируется maxVisibleActionsItems.

Установка

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

Props

Types

PropsPageCatalogProps
PropTypeDefaultRequiredDescription
actionsAction[]—no
childrenstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—no
classNamestring—noCSS-класс
data-test-idstring—no
maxVisibleActionsItemsnumber—no
titlestring—yesЗаголовок страницы

ActionsPropsinterface

PropTypeDefaultRequiredDescription
itemsAction[]—yes
maxVisibleItemsnumber | undefined—no

ButtonDroplistPropsinterface

PropTypeDefaultRequiredDescription
button(Omit<ButtonProps, "view" | "appearance"> & { buttonType?: "filled"; }) | (Omit<ButtonProps, "view" | "icon" | "appearance" | "iconPosition"> & { buttonType?: "function"; })—yes
list{ className?: string | undefined; open?: boolean | undefined; onOpenChange?: ((isOpen: boolean) => void) | undefined; items: Item[]; closeDroplistOnItemClick?: boolean | undefined; }—yes

ButtonKebabPropsinterface

PropTypeDefaultRequiredDescription
buttonOmit<ButtonProps, "view" | "label" | "icon"> | undefined—no
list{ className?: string | undefined; open?: boolean | undefined; onOpenChange?: ((isOpen: boolean) => void) | undefined; items: Item[]; closeDroplistOnItemClick?: boolean | undefined; }—yes

Related props

ButtonDropdownDroplistConfiginterface

PropTypeDefaultRequiredDescription
closeDroplistOnItemClickboolean | undefined—noЗакрывать выпадающий список после клика на базовый айтем. Работает в режимах selection: 'none' | 'single'
closeOnPopstateboolean | undefined—noЗакрывать ли поповер при переходе по истории браузера
itemsItem[]—yesОсновные элементы списка
placement"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"—noПоложение поповера относительно своего триггера (children).
triggerClassNamestring | undefined—noCSS-класс триггера

QuotaWidgetPropsBaseinterface

PropTypeDefaultRequiredDescription
canEditQuotaboolean—yesФлаг наличия прав на редактирование квот
disableSortingboolean | undefined—noФлаг отключения сортировки квот
errorboolean—yesФлаг ошибки при загрузке квот
hideIncreaseQuotaButtonboolean | undefined—noФлаг скрытия кнопки увеличения квоты
loadingboolean—yesФлаг загрузки квот
onIncreaseQuotaClick(() => void) | undefined—noКолбек нажатия на кнопку увеличения квот
onRefresh() => void—yesКолбек на обновление списка квот при ошибке
onWidgetOpen(() => void) | undefined—noКолбек открытия виджета квот
projectNamestring—yesНазвание проекта, по которому отображаются квоты
quotasQuotaItem[]—yesСписок квот для отображения

Types

PageCatalogProps

Storybook

Открыть в Storybook →

Figma

Открыть в Figma →