Figma

ImageBanner

import { ImageBanner } from '@megafon/ui-shared';
Примеры и код
Свойства и методы
Демо данные:


const content: IImageBannerProps = {
    title: 'Заголовок ≤ 30 символов',
    description: 'Здесь будет располагаться подзаголовок. Пишите кратко, не более 100 символов',
    cost: 'oт <b>0000₽</b>',
}


В свойствах title и description поддерживаются некоторые HTML-теги: "<br>, <font color>, <a href>".


Также в обоих свойствах поддерживается спецсимвол &nbsp.

Размер баннера фиксированный

Изображение растягивается на весь баннер

Изображение прижимается к правому краю, растягивается на максимальную высоту, слева изображение обрезается, если оно шире баннера.

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...imagesFullWidth}
          isImageFullWidth
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

<ContentArea>
      <ImageBanner
          badges={badgeDark}
          backgroundColor="gradient"
          radius="rounded"
          {...content}
          {...imagesFullWidthGradient}
          isImageFullWidth
      >
          {greenButtons}
      </ImageBanner>
  </ContentArea>

Картинка в фиксированном фрейме

На разрешении 1024+ изображение ограничивается по высоте и ширине размером фрейма. На разрешении 768- изображение ограничивается шириной баннера и высотой 150px. На разрешении 768 - 1024 изображение ограничивается шириной баннера и высотой 230px. Если изображение больше фрейма, то оно скейлится и вписывается во фрейм по типу contain. При этом выравнивается по центру фрейма по вертикали и горизонтали. Если изображение должно прижиматься к нижнему или верхнему краю, то необходимо поменять вертикальное выравнивание.

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

Цвета фона

Зеленый

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

Фиолетовый

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="purple"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

Градиент

<ContentArea>
      <ImageBanner badges={badgeDark} backgroundColor="gradient" radius="rounded" {...content} {...imagesGradient}>
          {greenButtons}
      </ImageBanner>
  </ContentArea>

Светлый

<ContentArea>
      <ImageBanner badges={badgeDark} backgroundColor="light" radius="rounded" {...content} {...imagesGradient}>
          {greenButtons}
      </ImageBanner>
  </ContentArea>

spbSky0

<ContentArea>
      <ImageBanner badges={badgeDark} backgroundColor="spbSky0" radius="rounded" {...content} {...imagesGradient}>
          {greenButtons}
      </ImageBanner>
  </ContentArea>

Уровень заголовка

H1

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

H2

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          headerLevelMobile="h2"
          headerLevel="h2"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

H2 только на мобильном экране

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          headerLevelMobile="h2"
          headerLevel="h1"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

Кнопки

С кнопками

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

С кнопками стора

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {storeButton}
      </ImageBanner>
  </ContentArea>

Без кнопок

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      />
  </ContentArea>

С бейджами

Светлая тема

<ContentArea>
      <ImageBanner
          badges={badgesLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
      >
          {storeButton}
      </ImageBanner>
  </ContentArea>

Темная тема

<ContentArea>
      <ImageBanner badges={badgesDark} backgroundColor="gradient" radius="rounded" {...content} {...imagesGradient}>
          {storeButton}
      </ImageBanner>
  </ContentArea>

С TimerBadge

<ContentArea>
      <ImageBanner badges={timerBadge} backgroundColor="gradient" radius="rounded" {...content} {...imagesGradient}>
          {storeButton}
      </ImageBanner>
  </ContentArea>

Без бейджей

<ContentArea>
      <ImageBanner backgroundColor="green" radius="rounded" {...content} {...images} imageVerticalAlign="bottom">
          {storeButton}
      </ImageBanner>
  </ContentArea>

С блоком рекламы

В баннер можно вставить внешний компонент блока рекламы, он будет отображен в верхнем правом углу баннера

<ContentArea>
      <ImageBanner
          badges={badgeLight}
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
          adBlock={AdBlock}
      >
          {storeButton}
      </ImageBanner>
  </ContentArea>

Реклама без бейджей

<ContentArea>
      <ImageBanner
          backgroundColor="green"
          radius="rounded"
          {...content}
          {...images}
          imageVerticalAlign="bottom"
          adBlock={AdBlock}
      >
          {storeButton}
      </ImageBanner>
  </ContentArea>

Серая плашка рекламы

<ContentArea>
      <ImageBanner
          badges={badgeDark}
          backgroundColor="spbSky0"
          radius="rounded"
          {...content}
          autoHeight
          adBlock={AdBlockGray}
      >
          {greenButtons}
      </ImageBanner>
  </ContentArea>

Без изображения

С кнопками

<ContentArea>
      <ImageBanner badges={badgeLight} backgroundColor="green" radius="rounded" {...content}>
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

С кнопками стора

<ContentArea>
      <ImageBanner badges={badgeLight} {...content} backgroundColor="green" radius="rounded">
          {storeButtons}
      </ImageBanner>
  </ContentArea>

Без кнопок

<ContentArea>
      <ImageBanner badges={badgeLight} backgroundColor="green" radius="rounded" {...content} />
  </ContentArea>

Радиус баннера

По умолчанию углы прямые, это необходимо при использовании внутри компонента Banner, если используем ImageBanner отдельно, то выставляем закругленные углы.

Прямые углы

<ContentArea>
      <ImageBanner badges={badgeLight} backgroundColor="green" {...content} radius="corners">
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

Закругленные углы

<ContentArea>
      <ImageBanner badges={badgeLight} backgroundColor="green" radius="rounded" {...content} radius="rounded">
          {whiteButtons}
      </ImageBanner>
  </ContentArea>

Высота баннера зависит от контента

Без изображения

С кнопками

<ContentArea>
      <ImageBanner badges={badgeDark} backgroundColor="spbSky0" radius="rounded" {...content} autoHeight>
          {greenButtons}
      </ImageBanner>
  </ContentArea>

С кнопками стора

<ContentArea>
      <ImageBanner badges={badgeDark} backgroundColor="spbSky0" radius="rounded" {...content} autoHeight>
          {storeButton}
      </ImageBanner>
  </ContentArea>

Без кнопок

<ContentArea>
      <ImageBanner badges={badgeDark} backgroundColor="spbSky0" radius="rounded" {...content} autoHeight />
  </ContentArea>

Изображение растягивается на всю ширину

С кнопками

<ContentArea>
      <ImageBanner
          badges={badgeDark}
          backgroundColor="spbSky0"
          radius="rounded"
          {...content}
          {...imagesFullWidthAutoHeight}
          autoHeight
          isImageFullWidth
      >
          {greenButtons}
      </ImageBanner>
  </ContentArea>

С кнопками стора

<ContentArea>
      <ImageBanner
          badges={badgeDark}
          backgroundColor="spbSky0"
          radius="rounded"
          {...content}
          {...imagesFullWidthAutoHeight}
          autoHeight
          isImageFullWidth
      >
          {storeButton}
      </ImageBanner>
  </ContentArea>

Без кнопок

<ContentArea>
      <ImageBanner
          badges={badgeDark}
          backgroundColor="spbSky0"
          radius="rounded"
          {...content}
          {...imagesFullWidthAutoHeight}
          autoHeight
          isImageFullWidth
      />
  </ContentArea>

Поддержка тэгов внутри описания

 <ContentArea>
      <ImageBanner
          classes={{
              imageSource: 'image-source-test',
              children: 'children-test',
          }}
          badges={badgeDark}
          backgroundColor="spbSky0"
          radius="rounded"
          {...content}
          description={Description}
          {...imagesFullWidthAutoHeight}
          autoHeight
          isImageFullWidth
      />
  </ContentArea>
Prop nameTypeDefaultDescription
dataAttrs{ root?: Record<string, string>; image?: Record<string, string>; }Дополнительные data атрибуты к внутренним элементам
classNamestringДополнительный класс корневого элемента
classes{ root?: string; image?: string; imageSource?: string; title?: string; description?: string; cost?: string; badgesContainer?: string; badges?: string; adBlock?: string; children?: string; }{}Дополнительные классы для корневого и внутренних элементов
rootRefRef<HTMLDivElement>Ссылка на корневой элемент
titleReactNode | ReactNode[]Заголовок
descriptionReactNode | ReactNode[]Текст-описание
coststringСтрока со стоимостью услуги
headerLevelMobile"h1" | "h2"h1Тег заголовка на разрешении экрана 0-767
headerLevel"h1" | "h2"h1Тег заголовка на разрешении экрана 768+
backgroundColorBackgroundColorTypetransparentФоновый цвет
radiusRadiusTypecornersРадиус границы
imageMobilestringИзображение на разрешении экрана 0-1023
imageMobile2xstringИзображение 2x на разрешении экрана 0-1023
imageDesktopstringИзображение на разрешении экрана 1024+
imageDesktop2xstringИзображение на разрешении экрана 1024+
imageAltstringЗначение тега alt для изображения
imageVerticalAlignImageVerticalAlignTypecenterВыравнивание изображения по вертикали (по умолчанию center)
fetchPriority"auto" | "high" | "low"autoПриоритет загрузки изображения
autoHeightbooleanВысота баннера зависит от высоты контента (по умолчанию фиксированная)
isImageFullWidthbooleanИзображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм)
badgesElement | Element[]Бейджи
adBlockElementЭлемент блока с рекламой
hasMarginTopbooleanfalseОтступ сверху
export interface IImageBannerProps {
    /** Дополнительные data атрибуты к внутренним элементам */
    dataAttrs?: {
        root?: Record<string, string>,
        image?: Record<string, string>,
    };
    /** Дополнительный класс корневого элемента */
    className?: string;
    /** Дополнительные классы для корневого и внутренних элементов */
    classes?: {
        root?: string,
        image?: string,
        title?: string,
        description?: string,
        cost?: string,
        badgesContainer?: string,
        badges?: string,
        badge?: string,
        adBlock?: string,
    };
    /** Ссылка на корневой элемент */
    rootRef?: Ref<HTMLDivElement>;
    /** Заголовок */
    title: string | React.ReactNode | React.ReactNode[];
    /** Текст-описание */
    description?: string | React.ReactNode | React.ReactNode[];
    /** Строка со стоимостью услуги */
    cost?: string;
    /** Фоновый цвет */
    backgroundColor?: BackgroundColorType;
    /** Радиус границы */
    radius?: RadiusType;
    /** Изображение на разрешении экрана 0-1023 */
    imageMobile?: string;
    /** Изображение 2x на разрешении экрана 0-1023 */
    imageMobile2x?: string;
    /** Изображение на разрешении экрана 1024+ */
    imageDesktop?: string;
    /** Изображение на разрешении экрана 1024+ */
    imageDesktop2x?: string;
    /** Значение тега alt для изображения */
    imageAlt?: string;
    /** Выравнивание изображения по вертикали (по умолчанию center) */
    imageVerticalAlign?: ImageVerticalAlignType;
    /** Приоритет загрузки изображения */
    fetchPriority?: 'auto' | 'high' | 'low';
    /** Высота баннера зависит от высоты контента (по умолчанию фиксированная) */
    autoHeight?: boolean;
    /** Изображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм) */
    isImageFullWidth?: boolean;
    /** Бейджи */
    badges?: JSX.Element | JSX.Element[];
    /** Дополнительный отступ снизу при использовании в баннере */
    hasBottomOffset?: boolean;
    /** Элемент блока с рекламой */
    adBlock?: JSX.Element;
}


export type ButtonPropsType = IButtonProps & {
    /** Заголовок кнопки */
    title: string,
};