PromoBadge

import { PromoBadge } from '@megafon/ui-core';

Примеры и код

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

Цвета

<PromoBadge color="sky">Новое</PromoBadge>
<PromoBadge color="flamingo">Хит сезона</PromoBadge>
<PromoBadge color="berry">Популярное</PromoBadge>
<PromoBadge color="night">Выбор пользователей</PromoBadge>
<PromoBadge color="brand-purple">VIP</PromoBadge>
<PromoBadge color="brand-purple-20">По интересам</PromoBadge>
<PromoBadge color="gradient-purple">SuperOffer</PromoBadge>

Размеры

<PromoBadge color="sky">Новое</PromoBadge>
<PromoBadge color="flamingo" size="small">Хит сезона</PromoBadge>

Prop name	Type	Default	Description
color	PromoBadgeColorsType		Цвет промо-бэйджа
size	PromoBadgeSizeType	medium	Размер промо-бэйджа
type	PromoBadgeTypesType	hit	DEPRECATED Тип промо-бэйджа (Используйте проп `color`)
className	string		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string>; }		Дополнительные data-атрибуты к внутренним элементам

PriceBadge

import { PriceBadge } from '@megafon/ui-core';

Примеры и код

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

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

<PriceBadge>Базовый бейдж</PriceBadge>

Размеры бейджа

<PriceBadge size="big"><div style={{ width: "350px"}}>Большой бейдж</div></PriceBadge>
<PriceBadge size="small" subTitle="с дополнительным текстом">Маленький бейдж (по умолчанию)</PriceBadge>

Дополнительный текст

<PriceBadge size="big" subTitle="с дополнительным текстом">Большой бейдж</PriceBadge>
<PriceBadge subTitle="Дополнительный текст">Маленький бейдж доп. текст не выводит</PriceBadge>

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

<PriceBadge theme='grey'>Серая тема</PriceBadge>
<PriceBadge theme='orange'>Оранжевая тема</PriceBadge>
<PriceBadge theme='green'>Зелёная тема</PriceBadge>
<PriceBadge theme='red'>Красная тема</PriceBadge>
  <div style={{ padding: '5px', background: '#333', borderRadius: '3px' }}>
  <PriceBadge theme='light'>Светлая тема</PriceBadge>
  </div>
<PriceBadge theme='dark'>Темная тема</PriceBadge>
<PriceBadge theme='purple'>Фиолетовая тема</PriceBadge>

Иконки

Цвет иконки зависит от цветовой темы бейджа.

<PriceBadge theme='grey' iconType='timer'>Иконка таймера</PriceBadge>
<PriceBadge theme='orange' iconType='price'>Иконка рубля</PriceBadge>
<PriceBadge theme='green' iconType='check'>Иконка галочки</PriceBadge>
<PriceBadge theme='red' iconType='attention'>Иконка восклицательного знака</PriceBadge>
<PriceBadge theme='grey' iconType='info'>Иконка информации</PriceBadge>
<PriceBadge theme='green' iconType='profile'>Иконка профиля</PriceBadge>

Адаптивность

На десктопе размер бейджа будет увеличен, на мобильном устройстве - стандартного размера.

<PriceBadge theme='green' isAdaptive>Адаптивный бейдж</PriceBadge>

Prop name	Type	Default	Description
isAdaptive	boolean	false	Адаптивный режим
iconType	PriceBadgeIconType	timer	Тип иконки
theme	PriceBadgeThemeType	grey	Цветовая тема
className	string		Дополнительный класс корневого элемента
size	PriseBadgeSizeType	small	Размер бейджа
subTitle	string		Дополнительный текст (только для size="big")
dataAttrs	{ root?: Record<string, string>; }		Дополнительные data-атрибуты к внутренним элементам

TimerBadge

import { TimerBadge } from '@megafon/ui-core';

Примеры и код

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

Демо-данныеimport { add } from 'date-fns';
 
const date = new Date();
 
const someDaysBeforeEnd = add(date, { days: 6, hours: 1 });
const someDaysAndHoursBeforeEnd = add(date, { days: 6, hours: 4 });
const someHoursAndMinutesBeforeEnd = add(date, { hours: 5, minutes: 25 });
const someHoursBeforeEnd = add(date, { hours: 5, minutes: 1 });
const someMinutesBeforeEnd = add(date, { minutes: 40 });
const someSecondsBeforeEnd = add(date, { seconds: 59 });
const someMonthsBeforeEnd = add(date, { months: 3 });

Изначально таймер отображается в режиме даты, после пересечения границы countdownStart (по умолчанию это одни сутки) таймер переключается в режим обратного отсчёта.

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

Режим даты

<TimerBadge expirationDate={someMonthsBeforeEnd} />

Режим обратного отсчёта

<TimerBadge expirationDate={someHoursBeforeEnd} />

Дополнительный текст перед таймером

Режим даты

<TimerBadge expirationDate={someMonthsBeforeEnd} hasPrefix/>

Режим обратного отсчёта

<TimerBadge expirationDate={someHoursBeforeEnd} hasPrefix/>

Кастомный дополнительный текст

Режим даты

<TimerBadge expirationDate={someMonthsBeforeEnd} hasPrefix expirationDateText="Действительно до"/>

Режим обратного отсчёта

<TimerBadge expirationDate={someHoursBeforeEnd} hasPrefix countdownText="Срок действия истечёт через"/>

Форматы отображения обратного отсчёта

Оставшееся время    Отображаемый формат 
  > 1 дня             дн / дн + ч       
  > 1 часа            ч  / ч + мин      
  < 1 часа            мин           
  < 1 минуты          сек

Меньше часа

Когда времени остается меньше часа, у иконки появляется тень.

Через одну минуту после последнего обновления страницы демо не будет соответствовать своему описанию. Для корректного отображения необходимо обновить страницу.

<TimerBadge expirationDate={someMinutesBeforeEnd} hasPrefix countdownText="Осталось несколько минут:"/>
<TimerBadge expirationDate={someSecondsBeforeEnd} hasPrefix countdownText="Осталось несколько секунд:"/>

Больше часа, меньше дня

<TimerBadge expirationDate={someHoursBeforeEnd} hasPrefix countdownText="Осталось несколько часов:"/>
<TimerBadge expirationDate={someHoursAndMinutesBeforeEnd} hasPrefix countdownText="Осталось меньше суток:"/>

Больше одного дня

Установлено кастомное время начала обратного отсчёта

<TimerBadge countdownStart={604800} expirationDate={someDaysBeforeEnd} hasPrefix countdownText="Осталось несколько дней:"/>
<TimerBadge countdownStart={604800} expirationDate={someDaysAndHoursBeforeEnd} hasPrefix countdownText="Осталось меньше недели:"/>

Время истекло

<TimerBadge expirationDate={new Date()}/>

Prop name	Type	Default	Description
expirationDate*	Date		Дата окончания таймера
countdownStart	number	86400	Граница переключения в режим обратного отсчёта, в секундах
hasPrefix	boolean	false	Отображение дополнительного текста
countdownText	string	Закончится через	Текст перед таймером в режиме обратного отсчета. Появляется при hasPrefix=true.
expirationDateText	string	Воспользуйтесь до	Текст перед таймером в режиме даты. Появляется при hasPrefix=true.
className	string		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string>; text?: Record<string, string>; timer?: Record<string, string>; iconContainer?: Record<string, string>; }		Дополнительные data-атрибуты к внутренним элементам

CounterBadge

import { CounterBadge } from '@megafon/ui-core';

Примеры и код

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

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

Общее количество

<CounterBadge totalCount={8} />
<CounterBadge totalCount={36} />
<CounterBadge totalCount={100} />

Лимитированное количество

<CounterBadge currentValue={1} totalCount={5} />
<CounterBadge currentValue={8} totalCount={30} />
<CounterBadge currentValue={25} totalCount={100} />

Иконка

По умолчанию

<CounterBadge totalCount={5} hasIcon />
<CounterBadge currentValue={30} totalCount={120} hasIcon />

Кастомная

<CounterBadge totalCount={5} hasIcon customIcon={<CustomIcon style={{ fill: '#999999'}} />} />

Цветовая тема

Светло-голубая (sky20, sky) - по умолчанию
Фиолетовая (Brand Purple 20, Brand Purple)

<CounterBadge colorTheme="light-blue" currentValue={30} totalCount={120} hasIcon />
<CounterBadge colorTheme="purple" currentValue={30} totalCount={120} hasIcon />

Адаптивность

На десктопе размер бейджа будет увеличен, на мобильном устройстве - стандартного размера.

<CounterBadge totalCount={5} isAdaptive />
<CounterBadge totalCount={365} isAdaptive />
<CounterBadge currentValue={89} totalCount={100} isAdaptive />
<CounterBadge totalCount={120} hasIcon isAdaptive />

Prop name	Type	Default	Description
currentValue*	number		Текущее значение
totalCount	number		Максимальное значение
hasIcon	boolean	false	Наличие иконки
customIcon	Element		Кастомная иконка
colorTheme	CounterBadgeColorThemeType	light-blue	Цветовая тема
isAdaptive	boolean	false	Адаптивный режим
className	string		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string>; }		Дополнительные data-атрибуты к внутренним элементам

NotificationBadge

import { NotificationBadge } from '@megafon/ui-core';

Примеры и код

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

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

<NotificationBadge autoWidth>24 сообщения</NotificationBadge>
<NotificationBadge>2</NotificationBadge>
<NotificationBadge size="medium">2</NotificationBadge>
<NotificationBadge size="small" />
<NotificationBadge theme="red" autoWidth>24 сообщения</NotificationBadge>
<NotificationBadge theme="red">2</NotificationBadge>
<NotificationBadge theme="red" size="medium">2</NotificationBadge>
<NotificationBadge theme="red" size="small" />

Prop name	Type	Default	Description
theme	NotificationBadgeThemeType	green	Цветовая тема
size	NotificationBadgeSizeType	big	Размер бейджа
autoWidth	boolean	false	Ширина по размеру содержимого
className	string		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string>; }		Дополнительные data-атрибуты к внутренним элементам