ButtonBanner

import { ButtonBanner } from '@megafon/ui-shared';

Примеры и код
Свойства и методы

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

<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
/>

<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
/>

Ссылка в кнопке

<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  buttonUrl="#"
  buttonTarget="_blank"
/>

<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  buttonUrl="#"
  buttonTarget="_blank"
/>

Цвета кнопки

<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  buttonColor="green"
/>
<br />
<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  buttonColor="purple"
/>

<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  buttonColor="green"
/>
<br />
<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  buttonColor="purple"
/>

Изображение

При наличии изображения кнопка автоматически располагается под текстом
Изображение автоматически центрируется и масштабируется по наименьшей высоте или ширине своего контейнера
Высота контейнера изображения зависит от высоты баннера (на мобильных разрешениях высота контейнера фиксированная)
Части изображения, вышедшие за пределы контейнера, обрезаются

По умолчанию

<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  imageUrl={image}
  buttonText="Выбрать тариф"
/>

<ButtonBanner
  title="Текст не более 70 символов"
  text="Текстовое описание не должно превышать 150 символов."
  imageUrl={image}
  buttonText="Выбрать тариф"
/>

Масштабирование

<ButtonBanner
  title='Тип масштабирования изображения - "cover"'
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  imageScaling="cover"
  imageUrl={image}
/>
<br />
<ButtonBanner
  title='Тип масштабирования изображения - "contain"'
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  imageScaling="contain"
  imageUrl={image}
/>

<ButtonBanner
  title='Тип масштабирования изображения - "cover"'
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  imageScaling="cover"
  imageUrl={image}
/>
<br />
<ButtonBanner
  title='Тип масштабирования изображения - "contain"'
  text="Текстовое описание не должно превышать 150 символов."
  buttonText="Выбрать тариф"
  imageScaling="contain"
  imageUrl={image}
/>

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 = '<b>Текстовое</b> <font color="#731982">описание</font> не<br>должно <a href="https://moscow.megafon.ru">превышать</a> 150&nbspсимволов.';

<ButtonBanner title={htmlTitle} text={htmlText} buttonText="Выбрать тариф" />

<ButtonBanner title={htmlTitle} text={htmlText} buttonText="Выбрать тариф" />

ButtonBanner

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

Текст не более 70 символов

Ссылка в кнопке

Текст не более 70 символов

Цвета кнопки

Текст не более 70 символов

Текст не более 70 символов

Изображение

По умолчанию

Текст не более 70 символов

Масштабирование

Тип масштабирования изображения - "cover"

Тип масштабирования изображения - "contain"

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

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

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