NumbersBox

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

Примеры и код

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

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

Минимальное количество 3 карточки

В свойствах карточек title и subtitle поддерживается спецсимволы (например, &nbsp, &thinsp).


      <NumbersBox
          items={[
              {
                  title: '76&thinsp;%',
                  subtitle: 'компаний увеличили продажи',

              },
              {
                  title: '27&thinsp;%',
                  subtitle: 'средний рост конверсии с&nbsp;сайта в&nbsp;звонок',
              },
              {
                  title: '76&thinsp;%',
                  subtitle: 'в среднем сократилось число пропущенных звонков',
              }
          ]}
      />

Уменьшенный размер Subtitle (стиль h5)


      <NumbersBox
          subtitleSize='small'
          items={[1, 2, 3, 4].map(({ title, subtitle }) => ({
              title: '76&thinsp;%',
              subtitle: 'компаний увеличили продажи',
          }))}
      />

Если карточек больше 4, они выстраиваются в карусель


      <NumbersBox
          items={[1, 2, 3, 4, 5].map(({ title, subtitle }) => ({
              title: '76&thinsp;%',
              subtitle: 'компаний увеличили продажи',
          }))}
      />

Фоны карточек

Shadow


      <NumbersBox
          background="shadow"
          items={[1, 2, 3, 4].map(({ title, subtitle }) => ({
              title: '76&thinsp;%',
              subtitle: 'компаний увеличили продажи',
          }))}
      />

Stroke


      <NumbersBox
          background="stroke"
          items={[1, 2, 3, 4].map(({ title, subtitle }) => ({
              title: '76&thinsp;%',
              subtitle: 'компаний увеличили продажи',
          }))}
      />

Gray


      <NumbersBox
          background="gray"
          items={[1, 2, 3, 4].map(({ title, subtitle }) => ({
              title: '76&thinsp;%',
              subtitle: 'компаний увеличили продажи',
          }))}
      />

White


      <div style={{ backgroundColor: 'var(--spbSky0)', padding: '40px 80px' }}>
          <NumbersBox
              background="white"
              carouselGradientColor='spbSky0'
              items={[1, 2, 3, 4, 5, 6].map(({ title, subtitle }) => ({
                  title: '76&thinsp;%',
                  subtitle: 'компаний увеличили продажи',
              }))}
              subtitleSize='small'
          />
      </div>

None


      <NumbersBox
          background="none"
          items={[1, 2, 3, 4].map(({ title, subtitle }) => ({
              title: '76&thinsp;%',
              subtitle: 'компаний увеличили продажи',
          }))}
      />

Возможные цвета

Night


      <NumbersBox
          titleColor="night"
          items={[1, 2, 3].map(({ title, subtitle }) => ({
              title: '76&thinsp;%',
              subtitle: 'компаний увеличили продажи',
          }))}
      />

Berry


      <NumbersBox
          titleColor="berry"
          items={[1, 2, 3].map(({ title, subtitle }) => ({
              title: '76&thinsp;%',
              subtitle: 'компаний увеличили продажи',
          }))}
      />

Flamingo


      <NumbersBox
          titleColor="flamingo"
          items={[1, 2, 3].map(({ title, subtitle }) => ({
              title: '76&thinsp;%',
              subtitle: 'компаний увеличили продажи',
          }))}
      />

Prop name	Type	Default	Description
items*	CardDataType[]		Список карточек. Минимальное количество 3 карточки
background	BackgroundType	shadow	Визуальный эффект фона для карточки
titleColor	TitleColorType	default	Цвет текста заголовка карточки
subtitleSize	SubtitleSizeType	medium	Размер дополнительного текста карточки
carouselNavTheme	NavThemeType		Тема навигации для карусели
carouselGradientColor	GradientThemeType		Цвет градиента для карусели
className	string		Дополнительный css класс для корневого элемента
classes	{ root?: string; card?: string; }		Дополнительные css классы для корневого и внутренних элементов
dataAttrs	{ root?: Record<string, string>; card?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам
rootRef	Ref<HTMLDivElement>		Ссылка на элемент

type CardDataType = {
    title: string;
    subtitle: string;
};

type BackgroundType = 'shadow' | 'stroke' | 'gray' | 'white' | 'none';

type TitleColorType = 'default' | 'night' | 'berry' | 'flamingo';

type SubtitleSizeType = 'small' | 'medium';

type NavThemeType = 'light' |'green';

type GradientThemeType = 'default' | 'green' | 'black' | 'spbSky0' | 'spbSky1' | 'spbSky2';