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}
    linkGoogle={link}
    onClickGoogle={onClick}
    linkRuStore={link}
    onClickRuStore={onClick}
    linkHuawei={link}
    onClickHuawei={onClick}
    linkMiStore={link}
    onClickMiStore={onClick}
    imageSrc={image}
    deviceMask="android"
  />
</ContentArea>

<ContentArea>
  <StoreBanner
    title={title}
    text={text}
    linkApple={link}
    onClickApple={onClick}
    linkGoogle={link}
    onClickGoogle={onClick}
    linkRuStore={link}
    onClickRuStore={onClick}
    linkHuawei={link}
    onClickHuawei={onClick}
    linkMiStore={link}
    onClickMiStore={onClick}
    imageSrc={image}
    deviceMask="android"
  />
</ContentArea>

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

Iphone 12

<ContentArea>
  <StoreBanner
    title={title}
    text={text}
    linkApple={link}
    onClickApple={onClick}
    linkGoogle={link}
    onClickGoogle={onClick}
    imageSrc={iphone12Screen}
    deviceMask="iphone-12"
  />
</ContentArea>

<ContentArea>
  <StoreBanner
    title={title}
    text={text}
    linkApple={link}
    onClickApple={onClick}
    linkGoogle={link}
    onClickGoogle={onClick}
    imageSrc={iphone12Screen}
    deviceMask="iphone-12"
  />
</ContentArea>

Новый iphone

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

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

Белый iphone

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

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

Черный iphone

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

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

Android

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

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

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

Зеленая

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

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

Серая 1

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

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

Серая 2

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

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

QR-код

1 стор

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

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

2 стора

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

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

3 стора

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

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

Кнопка

На белом фоне

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

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

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

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

<ContentArea>
  <StoreBanner
    title={title}
    text={text}
    linkButton="#"
    imageSrc={image}
    deviceMask="black-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={image}
    deviceMask="android"
  />
</ContentArea>

<ContentArea>
  <StoreBanner
    title={htmlTitle}
    text={htmlText}
    linkApple={link}
    onClickApple={onClick}
    linkGoogle={link}
    onClickGoogle={onClick}
    imageSrc={image}
    deviceMask="android"
  />
</ContentArea>

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

Скачивайте мобильное приложение МегаФон

Скачай и получи максимум

Изображение приложения на экране телефона

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

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

StoreBanner

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

Скачивайте мобильное приложение МегаФон

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

Iphone 12

Скачивайте мобильное приложение МегаФон

Новый iphone

Скачивайте мобильное приложение МегаФон

Белый iphone

Скачивайте мобильное приложение МегаФон

Черный iphone

Скачивайте мобильное приложение МегаФон

Android

Скачивайте мобильное приложение МегаФон

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

Зеленая

Скачивайте мобильное приложение МегаФон

Серая 1

Скачивайте мобильное приложение МегаФон

Серая 2

Скачивайте мобильное приложение МегаФон

QR-код

1 стор

Скачивайте мобильное приложение МегаФон

2 стора

Скачивайте мобильное приложение МегаФон

3 стора

Скачивайте мобильное приложение МегаФон

Кнопка

На белом фоне

Скачивайте мобильное приложение МегаФон

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

Скачивайте мобильное приложение МегаФон

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

Скачивайте мобильное приложение МегаФонпо ссылке

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

Скачивайте мобильное приложение МегаФон

Скачивайте мобильное приложение МегаФон
по ссылке