PromoBadge

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

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

Цвета

<PromoBadge color="system-blue">Новое</PromoBadge>
<PromoBadge color="warm-red">Хит сезона</PromoBadge>
<PromoBadge color="137c">Популярное</PromoBadge>
<PromoBadge color="reflex-blue">Выбор пользователей</PromoBadge>
<PromoBadge color="brand-purple">VIP</PromoBadge>
<PromoBadge color="brand-purple-20">По интересам</PromoBadge>
<PromoBadge color="gradient-purple">SuperOffer</PromoBadge>

<PromoBadge color="system-blue">Новое</PromoBadge>
<PromoBadge color="warm-red">Хит сезона</PromoBadge>
<PromoBadge color="137c">Популярное</PromoBadge>
<PromoBadge color="reflex-blue">Выбор пользователей</PromoBadge>
<PromoBadge color="brand-purple">VIP</PromoBadge>
<PromoBadge color="brand-purple-20">По интересам</PromoBadge>
<PromoBadge color="gradient-purple">SuperOffer</PromoBadge>

PriceBadge

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

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

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

Базовый бейдж

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

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

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

Большой бейдж

Маленький бейдж (по умолчанию)

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

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

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

Большой бейдж

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

Маленький бейдж доп. текст не выводит

<PriceBadge size="big" subTitle="с дополнительным текстом">
  Большой бейдж
</PriceBadge>
<PriceBadge 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>
<PriceBadge theme="light">Светлая тема</PriceBadge>
<PriceBadge theme="dark">Темная тема</PriceBadge>
<PriceBadge theme="purple">Темная тема</PriceBadge>

<PriceBadge theme="grey">Серая тема</PriceBadge>
<PriceBadge theme="orange">Оранжевая тема</PriceBadge>
<PriceBadge theme="green">Зелёная тема</PriceBadge>
<PriceBadge theme="red">Красная тема</PriceBadge>
<PriceBadge theme="light">Светлая тема</PriceBadge>
<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="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>

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

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 (по умолчанию это одни сутки) таймер переключается в режим обратного отсчёта.

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

Режим даты

14 августа 2024

<TimerBadge expirationDate={someMonthsBeforeEnd} />

<TimerBadge expirationDate={someMonthsBeforeEnd} />

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

14 мая 2024

<TimerBadge expirationDate={someHoursBeforeEnd} />

<TimerBadge expirationDate={someHoursBeforeEnd} />

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

Режим даты

Воспользуйтесь до 14 августа 2024

<TimerBadge expirationDate={someMonthsBeforeEnd} hasPrefix />

<TimerBadge expirationDate={someMonthsBeforeEnd} hasPrefix />

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

Воспользуйтесь до 14 мая 2024

<TimerBadge expirationDate={someHoursBeforeEnd} hasPrefix />

<TimerBadge expirationDate={someHoursBeforeEnd} hasPrefix />

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

Режим даты

Действительно до 14 августа 2024

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

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

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

Воспользуйтесь до 14 мая 2024

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

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

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

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

Меньше часа

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

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

Воспользуйтесь до 14 мая 2024

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

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

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

Воспользуйтесь до 14 мая 2024

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

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

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

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

Воспользуйтесь до 20 мая 2024

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

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

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

Время действия истекло

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

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

CounterBadge

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

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

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

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

/36

/100

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

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

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

1/5

8/30

25/100

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

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

Иконка

По умолчанию

30/120

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

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

Кастомная

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

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

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

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

30/120

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

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

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

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

/365

89/100

/120

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

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

NotificationBadge

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

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

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

24 сообщения

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

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