Figma

StoreBanner

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

Демо данные
const title = 'Скачивайте мобильное приложение МегаФон';
const text = 'Скачай и получи максимум';
const link = '#';
const onClick = () => {};

Базовое использование

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGalaxyStore={link}
      onClickGalaxyStore={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      linkRuStore={link}
      onClickRuStore={onClick}
      linkHuawei={link}
      onClickHuawei={onClick}
      linkMiStore={link}
      onClickMiStore={onClick}
      linkVAppstore={link}
      onClickVAppstore={onClick}
      imageSrc={image.src}
      deviceMask="new-iphone"
  />
</ContentArea>

Шаблоны девайсов

iPhone

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      imageSrc={image.src}
      deviceMask="new-iphone"
  />
</ContentArea>

Android

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      imageSrc={androidImage.src}
      deviceMask="android"
  />
</ContentArea>

Цветовые темы

Зеленая

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      imageSrc={image.src}
      theme="green"
      deviceMask="new-iphone"
  />
</ContentArea>

Серая 1

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      imageSrc={image.src}
      theme="spbSky1"
      deviceMask="android"
  />
</ContentArea>

Серая 2

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      imageSrc={image.src}
      theme="spbSky0"
      deviceMask="android"
  />
</ContentArea>

QR-код

1 стор

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      imageSrc={image.src}
      qrCode={qrCode.src}
      deviceMask="new-iphone"
  />
</ContentArea>

2 стора

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      imageSrc={image.src}
      qrCode={qrCode.src}
      deviceMask="new-iphone"
  />
</ContentArea>

3 стора

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      linkHuawei={link}
      onClickHuawei={onClick}
      imageSrc={image.src}
      qrCode={qrCode.src}
      deviceMask="new-iphone"
  />
</ContentArea>

Кнопка

На белом фоне

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkButton="#"
      imageSrc={image.src}
      deviceMask="new-iphone"
  />
</ContentArea>

На зеленом фоне

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkButton="#"
      imageSrc={image.src}
      deviceMask="new-iphone"
      theme="green"
  />
</ContentArea>

HTML-теги и спецсимволы

В свойствах title и text поддерживаются некоторые HTML-теги:
- для title: "<br>, <font color>, <a href>";
- для text: "<br>, <font color>, <a href>, <b>".
Также в обоих свойствах поддерживается спецсимвол &nbsp.
Демо данные
const htmlTitle ='Скачивайте&nbspмобильное приложение <font color="#731982">МегаФон</font><br>по <a href="https://moscow.megafon.ru">ссылке</a>';
const htmlText = '<a href="https://moscow.megafon.ru">Скачай</a>&nbspи<br><font color="#731982">получи</font> <b>максимум</b>';
<ContentArea>
  <StoreBanner
      title={htmlTitle}
      text={htmlText}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      imageSrc={androidImage.src}
      deviceMask="android"
  />
</ContentArea>

Выравнивание контента слева на мобильном разрешении

<ContentArea>
  <StoreBanner
      title={title}
      text={text}
      linkApple={link}
      onClickApple={onClick}
      linkGoogle={link}
      onClickGoogle={onClick}
      linkVAppstore={link}
      onClickVAppstore={onClick}
      imageSrc={image.src}
      deviceMask="new-iphone"
      isContentLeftMobile
  />
</ContentArea>
Prop nameTypeDefaultDescription
title*stringЗаголовок
text*stringТекст
linkApplestringСсылка на скачивание приложения в App Store
onClickApple(e: MouseEvent<EventTarget, MouseEvent>) => voidОбработчик клика по ссылке в App Store
linkGooglestringСсылка на скачивание приложения в Google Play
onClickGoogle(e: MouseEvent<EventTarget, MouseEvent>) => voidОбработчик клика по ссылке в Google Play
linkGalaxyStorestringСсылка на скачивание приложения в Samsung Galaxy Store
onClickGalaxyStore(e: MouseEvent<EventTarget, MouseEvent>) => voidОбработчик клика по ссылке в Samsung Galaxy Store
linkHuaweistringСсылка на скачивание приложения в Huawei AppGallery
onClickHuawei(e: MouseEvent<EventTarget, MouseEvent>) => voidОбработчик клика по ссылке в Huawei AppGallery
linkRuStorestringСсылка на скачивание приложения в RuStore
onClickRuStore(e: MouseEvent<EventTarget, MouseEvent>) => voidОбработчик клика по ссылке в RuStore
linkMiStorestringСсылка на скачивание приложения в Mi App Store
onClickMiStore(e: MouseEvent<EventTarget, MouseEvent>) => voidОбработчик клика по ссылке в Mi App Store
linkVAppstorestringСсылка на скачивание приложения в V-Appstore
onClickVAppstore(e: MouseEvent<EventTarget, MouseEvent>) => voidОбработчик клика по ссылке в V-Appstore
textButtonstringУстановите приложениеТекст кнопки
linkButtonstringСсылка для кнопки
relstringRel - атрибут тега <a> для всех кнопок баннера
qrCodestringСсылка на картинку с QR-кодом
themeThemeTypedefaultЦветовая тема компонента
deviceMask*DeviceMaskTypeИзображение телефона. DEPRECATED: 'black-iphone', 'white-iphone', 'iphone-12'
imageSrc*stringИзображение на дисплее телефона
isContentLeftMobilebooleanВыравнивание контента слева на мобильном разрешении
classNamestringДополнительный класс корневого элемента
classes{ root?: string; appleLink?: string; galaxyStoreLink?: string; googleLink?: string; huaweiLink?: string; miStoreLink?: string; ruStoreLink?: string; vAppstoreLink?: string; button?: string; }Дополнительные классы для корневого и внутренних элементов
rootRefRef<HTMLDivElement>Ссылка на корневой элемент
dataAttrs{ root?: Record<string, string>; button?: Record<string, string>; linkApple?: Record<string, string>; linkGalaxyStore?: Record<string, string>; linkGoogle?: Record<...>; linkHuawei?: Record<...>; linkMiStore?: Record<...>; linkRuStore?: Record<...>; linkVAppstore?: Record<...>; }Дополнительные data атрибуты к внутренним элементам