Site Hero

Hero blocks for Site

Installation

npm i @cloud-ru/uikit-product-site-hero

HeroCentral

Props

| name | type | default value | description | |------|------|---------------|-------------| | layoutType* | enum LayoutType: "mobile", "tablet", "desktop", "desktopSmall" | - | | | breadcrumbs* | Item[] | - | Хлебные крошки | | subtitle* | string | - | Подзаголовок | | title* | string | - | Заголовок | | className | string | - | CSS - класснейм | | description | string | - | Описание | | classNameImage | string | - | ClassName для фоновой картинки | | buttons | HeroCentralButton[] | - | Настройки кнопкок | | anchors | AnchorTypeProps[] | - | Якорное меню | | tooltipText | string | - | Текст подсказки | | tooltipPlacement | enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" | - | Расположение подсказки | | backgroundImage | { desktop: string; desktopSmall: string; tablet: string; mobile: string; } | { desktop: 'https://cdn.cloud.ru/backend/images/solutions/hero_preview_bg_desktop.webp', desktopSmall: 'https://cdn.cloud.ru/backend/images/solutions/hero_preview_bg_desktop.webp', tablet: 'https://cdn.cloud.ru/backend/images/solutions/hero_preview_bg_tablet.webp', mobile: 'https://cdn.cloud.ru/backend/images/solutions/hero_preview_bg_mobile.webp', } | Фоновое изображение |

HeroEvent

Props

| name | type | default value | description | |------|------|---------------|-------------| | layoutType* | enum LayoutType: "mobile", "tablet", "desktop", "desktopSmall" | - | | | button* | HeroButtonProps | - | Настройки кнопки | | breadcrumbs* | Item[] | - | Хлебные крошки для события | | image* | string | - | Ссылка на изображение | | place* | Omit<PlaceProps, "title"> & { title?: string; } | - | Место проведения события | | startsAt* | string | - | Начало события события | | title* | string | - | Заголовок события | | className | string | - | CSS - класснейм | | backgroundColor | enum HeroColor: "neutral-background1-level", "neutral-background", "graphite-accent-default" | neutral-background | Цвета фона | | category | PromoTagProps | - | Категория события | | format | enum Format: "online", "offline", "hybrid" | - | Формат проведения события | | audience | enum Audience: "it", "students", "business" | - | Аудитория, для которой проводится событие |

HeroZero

Props

| name | type | default value | description | |------|------|---------------|-------------| | layoutType* | enum LayoutType: "mobile", "tablet", "desktop", "desktopSmall" | - | | | title* | string | - | Название секции | | breadcrumbs* | Item[] | - | Хлебные крошки | | description | string | - | Описание секции | | buttons | [ButtonFilledProps, ButtonFilledProps?] | - | Массив с настройками кнопок ButtonFilled | | showBottomPadding | boolean | true | Наличие нижнего паддинга | | backgroundColor | enum HeroColor: "neutral-background1-level", "neutral-background", "graphite-accent-default" | neutral-background | Цвет фона | | contentAlign | "left" | "center" | left | Выравнивание текста | | className | string | - | CSS - класснейм |

HeroMain

Props

| name | type | default value | description | |------|------|---------------|-------------| | layoutType* | enum LayoutType: "mobile", "tablet", "desktop", "desktopSmall" | - | | | breadcrumbs* | Item[] | - | Хлебные крошки для продукта | | description* | string | - | Описание продукта | | title* | string | - | Заголовок продукта | | image | string | - | Ссылка на изображение | | video | ReactNode \| VideoPlayerProps | - | Видео | | tags | Pick<TagSpecialProps, "text" \| "appearance" \| "tip">[] | [] | Тэги | | platforms | Platform[] | [] | Платформы | | handlePlatformClick | (e: MouseEvent<HTMLAnchorElement, MouseEvent>, platform: Platform) => void | - | Обработка клика по платформе | | backgroundColor | enum HeroColor: "neutral-background1-level", "neutral-background", "graphite-accent-default" | neutral-background1-level | Цвета фона | | buttons | [Omit<ButtonFilledProps, "size" \| "appearance">, Omit<ButtonPromoOutlineProps, "size" \| "appearance">?, Omit<...>?] | - | Массив с настройками кнопок ButtonFilled | | className | string | - | CSS - класснейм | | navbar | Pick<SiteNavbarProps, "items" \| "active" \| "onItemClick" \| "topPosition"> | - | Navbar |

HeroSlider

Props

| name | type | default value | description | |------|------|---------------|-------------| | layoutType* | enum LayoutType: "mobile", "tablet", "desktop", "desktopSmall" | - | | | tabs* | TabHeroSliderBase[] | - | Заголовки для tabs | | items* | HeroSlideProps[] | - | Слайды карусели | | id | string | - | | | className | string | - | CSS-класс | | state | { page: number; onChange(page: number): void; } | - | Управление состоянием извне |

Changelog