Header
@cloud-ru/ds-uikit-product-header — новая продуктовая шапка консоли на Snack V2: layout, главное меню с сегментами и избранным, меню пользователя, логотип и хлебные крошки.
Когда использовать
- Новая навигация консоли с сегментами сервисов, избранным и настройками отображения карточек.
- Полная замена header на Snack V2 без legacy-контрактов Figma
headerOld/navigationOldDrawer. - Поэтапная миграция:
MenuMobile(bottom sheet) подключается к legacyMainMenuчерезcustomMobileMenu.
Когда не нужен:
- Обратная совместимость со старым drawer и API
serviceGroups/LinksGroup:- используйте
@cloud-ru/ds-uikit-product-header-legacy.
- используйте
Компоненты
| Компонент | Назначение |
|---|---|
HeaderLayout | Компоновка слотов шапки: меню, логотип, селектор, хлебные крошки, тулбар |
MainMenu | Главное меню: trigger + drawer (desktop resizable / mobile bottom sheet) |
MenuMobile | Только mobile-drawer без trigger; для customMobileMenu в legacy |
UserMenu | Меню пользователя: профиль, тема, настройки и выход |
Logo | Логотип продукта с режимом окружения и кастомным изображением |
PathBreadcrumbs | Хлебные крошки пути в шапке |
PlatformLogo | Иконки платформ (Evolution, Advanced, Enterprise и др.) |
Установка
pnpm add @cloud-ru/ds-uikit-product-header
import { HeaderLayout, MainMenu, MenuMobile, UserMenu } from '@cloud-ru/ds-uikit-product-header';
import '@cloud-ru/ds-uikit-product-header/style.css';
Figma
Смотри также
@cloud-ru/ds-uikit-product-header-legacy— legacy-шапка для параллельного релиза иcustomMobileMenu.@cloud-ru/ds-adaptive—AdaptiveProvider/layoutTypeдля desktop/mobile поверхностей.