llms.txt

PageSidebar

Боковая навигация страницы: список разделов (items) с группами и сворачиванием, опциональный поиск, шапка (header) и подвал (footerItems). Используется самостоятельно и как слот sidebar в PageServices.

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

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

Анатомия

Элементы (items, footerItems)

SidebarItem — либо ссылка (href), либо узел с вложенностью (items). Базовые поля: id, label, onClick, beforeContent / afterContent, disabledReason (+ disabledReasonPlacement).

  • type — collapse (по умолчанию, сворачиваемая группа) или group.
  • divider — разделитель после узла.

Шапка (header)

  • type: 'title' — заголовок с label и обязательной icon, опционально afterContent.
  • type: 'back' — кнопка «назад» с label, href или onClick.

Состояние и поведение

  • open / defaultOpen / onOpenChanged — раскрытие сайдбара (controlled / uncontrolled).
  • selected / onSelect — выбранный пункт и колбэк.
  • hasSearch — строка поиска по пунктам.
  • collapse — поведение сворачивания (пропсы @cloud-ru/ds-list).

Установка

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

Props

Types

PropsPageSidebarProps
PropTypeDefaultRequiredDescription
classNamestring—no
collapseCollapseState—no
data-test-idstring—no
defaultOpenboolean—no
documentationDocumentation—noЗарезервировано, в текущей реализации не используется.
footerItemsSidebarItem[]—no
hasSearchboolean—no
headerHeaderProps—no
itemsSidebarItem[]—yes
onOpenChanged((open: boolean) => void)—no
onSelect((id: string | number) => void)—no
openboolean—no
pageContainerIdstring—noЗарезервировано, в текущей реализации не используется.
selectedstring | number—no

Documentationinterface

PropTypeDefaultRequiredDescription
hrefstring | undefined—no
onClickMouseEventHandler | undefined—no
targetHTMLAttributeAnchorTarget | undefined—no

HeaderPropstype

{ type: typeof SIDEBAR_HEADER_TYPE.Title; label: string; icon: Icon; afterContent?: ReactNode; } | { type: typeof SIDEBAR_HEADER_TYPE.Back; label: string; href?: string; onClick?: MouseEventHandler; }

SidebarItemtype

SidebarItemWithHref | SidebarItemWithItems

SidebarItemBaseinterface

PropTypeDefaultRequiredDescription
afterContentstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—no
beforeContentstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—no
data-test-idstring | undefined—no
disabledReasonstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—no
disabledReasonPlacement"bottom" | "bottom-end" | "bottom-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start"—no
idstring | number—yes
labelstring—yes
onClick((e: MouseEvent<HTMLElement>) => void) | undefined—no

Related props

CollapseStateinterface

PropTypeDefaultRequiredDescription
defaultValueItemId[] | undefined—no
onChange((value?: ItemId[]) => void) | undefined—no
valueItemId[] | undefined—no

ListPropsinterface

PropTypeDefaultRequiredDescription
barHideStrategy"leave" | "move" | "never" | "scroll"—noУправление скрытием скролл баров: <br> - `Never` - показывать всегда <br> - `Leave` - скрывать когда курсор покидает компонент <br> - `Scroll` - показывать только когда происходит скроллинг <br> - `Move` - показывать при движении курсора над компонентом
classNamestring | undefined—noCSS-класс
collapseCollapseState | undefined—noНастройки раскрытия элементов
contentRender((props: ContentRenderProps) => ReactNode) | undefined—noРендер функция основного контента айтема
data-test-idstring | undefined—no
dataErrorboolean | undefined—noЗагрузка данных завершилась ошибкой: показывается `errorDataState`
dataFilteredboolean | undefined—noТекущий пустой список — результат поиска/фильтра: показывается `noResultsState` вместо `noDataState`
errorDataStateEmptyStateProps | undefined—noЭкран при ошибке запроса
footerstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—noКастомизируемый элемент в конце списка
footerActiveElementsRefsRefObject<HTMLElement>[] | undefined—noСписок ссылок на кастомные элементы, помещенные в специальную секцию внизу списка
footerDividerboolean | undefined—noПоказывать divider между body и footer (Figma `dropdownContainer.dividerWrapper` снизу)
hasListInFocusChainboolean | undefined—noФлаг, отвечающий за включение самого родительского контейнера листа в цепочку фокусирующихся элементов
headerstring | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined—noКастомизируемый элемент в начале списка — Figma `dropdownContainer.topBar`. Подходит для заголовка / справочного блока над поиском.
headerDividerboolean | undefined—noПоказывать divider между header и body (Figma `dropdownContainer.dividerWrapper` сверху)
itemsItem[]—yesОсновные элементы списка
keyboardNavigationRefRefObject<{ focusItem(id: ItemId): void; }> | undefined—noСсылка на управление навигацией листа с клавиатуры
limitedScrollHeightboolean | undefined—noОграничить максимальную высоту скролл-контейнера в зависимости от `size`
loadingboolean | undefined—noФлаг, отвечающий за состояние загрузки списка
markerboolean | undefined—noОтображать ли маркер у выбранного элемента списка
noDataStateEmptyStateProps | undefined—noЭкран при отсутствии данных
noResultsStateEmptyStateProps | undefined—noЭкран при отсутствии результатов поиска или фильтров
onKeyDown((e: KeyboardEvent<HTMLElement>) => void) | undefined—noОбработчик события по нажатию клавиш
onScroll((event?: Event) => void) | undefined—noКолбек на скролл прокручиваемого списка
pinBottomItem[] | undefined—noЭлементы списка, закрепленные снизу
pinTopItem[] | undefined—noЭлементы списка, закрепленные сверху
scrollboolean | undefined—noВключить ли скролл для основной части списка
scrollContainerClassNamestring | undefined—noCSS-класс для scroll обертки основного списка айтемов
scrollContainerRefRef<HTMLElement> | undefined—noСсылка на контейнер, который скроллится
scrollRefRef<HTMLElement> | undefined—noСсылка на элемент, обозначающий самый конец прокручиваемого списка
scrollToSelectedItemboolean | undefined—noФлаг, отвечающий за прокручивание до выбранного элемента
searchSearchState | undefined—noНастройки поисковой строки
selectionSelectionMultipleState | SelectionSingleState | undefined—noНастройки выбора элементов. `mode: 'single'` — один выбранный элемент (`value: ItemId`), `mode: 'multiple'` — множественный выбор (`value: ItemId[]`). Без `selection` выбора нет — клик вызывает только `onClick` элемента.
size"l" | "m" | "s"—noРазмер списка
tabIndexnumber | undefined—no`tabIndex` корневого элемента списка (для управления порядком фокуса)
untouchableScrollbarsboolean | undefined—noОтключает возможность взаимодействовать со скролбарами мышью.
virtualizedboolean | undefined—noВключить виртуализацию элементов списка. Рекомендуется при количестве элементов от 1000.

Types

PageSidebarProps

Storybook

Открыть в Storybook →