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 name	Type	Default	Description
title*	string		Заголовок
text*	string		Текст
linkApple	string \| undefined		Ссылка на скачивание приложения в App Store
onClickApple	((e: MouseEvent<EventTarget, MouseEvent>) => void) \| undefined		Обработчик клика по ссылке в App Store
linkGoogle	string \| undefined		Ссылка на скачивание приложения в Google Play
onClickGoogle	((e: MouseEvent<EventTarget, MouseEvent>) => void) \| undefined		Обработчик клика по ссылке в Google Play
linkGalaxyStore	string \| undefined		Ссылка на скачивание приложения в Samsung Galaxy Store
onClickGalaxyStore	((e: MouseEvent<EventTarget, MouseEvent>) => void) \| undefined		Обработчик клика по ссылке в Samsung Galaxy Store
linkHuawei	string \| undefined		Ссылка на скачивание приложения в Huawei AppGallery
onClickHuawei	((e: MouseEvent<EventTarget, MouseEvent>) => void) \| undefined		Обработчик клика по ссылке в Huawei AppGallery
linkRuStore	string \| undefined		Ссылка на скачивание приложения в RuStore
onClickRuStore	((e: MouseEvent<EventTarget, MouseEvent>) => void) \| undefined		Обработчик клика по ссылке в RuStore
linkMiStore	string \| undefined		Ссылка на скачивание приложения в Mi App Store
onClickMiStore	((e: MouseEvent<EventTarget, MouseEvent>) => void) \| undefined		Обработчик клика по ссылке в Mi App Store
linkVAppstore	string \| undefined		Ссылка на скачивание приложения в V-Appstore
onClickVAppstore	((e: MouseEvent<EventTarget, MouseEvent>) => void) \| undefined		Обработчик клика по ссылке в V-Appstore
textButton	string \| undefined	Установите приложение	Текст кнопки
linkButton	string \| undefined		Ссылка для кнопки
rel	string \| undefined		Rel - атрибут тега <a> для всех кнопок баннера
qrCode	string \| undefined		Ссылка на картинку с QR-кодом
theme	ThemeType \| undefined	default	Цветовая тема компонента
deviceMask*	DeviceMaskType		Изображение телефона. DEPRECATED: 'black-iphone', 'white-iphone', 'iphone-12'
imageSrc*	string		Изображение на дисплее телефона
isContentLeftMobile	boolean \| undefined		Выравнивание контента слева на мобильном разрешении
className	string \| undefined		Дополнительный класс корневого элемента
classes	{ root?: string \| undefined; appleLink?: string \| undefined; galaxyStoreLink?: string \| undefined; googleLink?: string \| undefined; huaweiLink?: string \| undefined; miStoreLink?: string \| undefined; ruStoreLink?: string \| undefined; vAppstoreLink?: string \| undefined; button?: string \| undefined; } \| undefined		Дополнительные классы для корневого и внутренних элементов
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на корневой элемент
dataAttrs	{ root?: Record<string, string> \| undefined; button?: Record<string, string> \| undefined; linkApple?: Record<string, string> \| undefined; linkGalaxyStore?: Record<...> \| undefined; ... 4 more ...; linkVAppstore?: Record<...> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам