CardsOnBackground

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

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


      <CardsOnBackground
          items={[
              {
                  "title": "Title",
                  "description": "Description text must be short and easy to understand",
                  "imageSrc": image.src,
                  "button": {
                      "title": "Подключить",
                      "href": "#"
                  },
                  "extraButton": {
                      "title": "Подробнее",
                      "href": "#"
                  }
              },
              {
                  "title": "Title",
                  "description": "В тексте может быть <a href=#>ссылка</a>",
                  "imageSrc": image.src,
                  "extraButton": {
                      "title": "Подробнее",
                      "href": "#"
                  }
              },
              {
                  "title": "Title",
                  "description": "Карточка может являться ссылкой в случае, когда нет кнопок",
                  "imageSrc": image.src,
                  "href": "#"
              }
          ]}
      />

Цвет фона

Показать код

<DemoWrapper showColorSelector count={3}>
      {({ background, items }) => (
          <CardsOnBackground
              background={background}
              items={items}
      />
      )}
  </DemoWrapper>

Варианты отображения

Грид сетка

Показать код

<DemoWrapper showCountSelector>
      {({ items }) => (
          <CardsOnBackground
              background="gray"
              items={items}
      />
      )}
  </DemoWrapper>

Карусель

Показать код

<DemoWrapper count={6}>
      {({ items }) => (
          <CardsOnBackground
              hasCarousel
              background="gray"
              items={items}
      />
      )}
  </DemoWrapper>

Выравнивание одиночной карточки по центру

Показать код


      <CardsOnBackground
          singleCardAlign="center"
          items={[
              {
                  "title": "Title",
                  "description": "Description text must be short and easy to understand",
                  "imageSrc": image.src,
                  "button": {
                      "title": "Подключить",
                      "href": "#"
                  },
                  "extraButton": {
                      "title": "Подробнее",
                      "href": "#"
                  }
              }
          ]}
      />

Выравнивание внутреннего содержимого карточек

Показать код


      <CardsOnBackground
          hasCarousel
          items={[
              {
                  "title": "Title text must be here",
                  "imageSrc": image.src,
                  "button": {
                      "title": "Подключить",
                      "href": "#"
                  },
                  "extraButton": {
                      "title": "Подробнее",
                      "href": "#"
                  }
              },
              {
                  "title": "Title text must be here",
                  "description": "Description text must be short and easy to understand. Description text must be short and easy to understand",
                  "imageSrc": image.src,
                  "button": {
                      "title": "Подключить",
                      "href": "#"
                  },
                  "extraButton": {
                      "title": "Подробнее",
                      "href": "#"
                  }
              },
              {
                  "title": "Title text must be here",
                  "description": "Description text must be short and easy to understand",
                  "imageSrc": image.src,
                  "extraButton": {
                      "title": "Подробнее",
                      "href": "#"
                  }
              },
              {
                  "title": "Title text must be here. Title text must be here",
                  "description": "Description text must be short and easy to understand",
                  "imageSrc": image.src
              },
              {
                  "title": "Title text must be here",
                  "imageSrc": image.src,
                  "button": {
                      "title": "Подключить",
                      "href": "#"
                  }
              }
          ]}
      />

Показать код


      <CardsOnBackground
          items={[
              {
                  "title": "Title text must be here",
                  "description": "Description text must be short and easy to understand. Description text must be short and easy to understand",
                  "imageSrc": image.src,
                  "extraButton": {
                      "title": "Подробнее",
                      "href": "#"
                  }
              },
              {
                  "title": "Title text must be here",
                  "imageSrc": image.src,
                  "extraButton": {
                      "title": "Подробнее",
                      "href": "#"
                  }
              },
              {
                  "title": "Title text must be here. Title text must be here",
                  "description": "Description text must be short and easy to understand",
                  "imageSrc": image.src
              }
          ]}
      />

Prop name	Type	Default	Description
items*	CardDataType[]		Карточки. Минимальное количество 2 карточки
background	BackgroundColorType \| undefined	gray	Цвет фона карточек
hasCarousel	boolean \| undefined	false	Выстраивать карточки в карусель
singleCardAlign	SingleCardAlignType \| undefined	left	Выравнивание одиночной карточки
className	string \| undefined		Дополнительный класс для компонента
classes	{ root?: string \| undefined; item?: string \| undefined; itemTitle?: string \| undefined; itemButton?: string \| undefined; itemExtraButton?: string \| undefined; } \| undefined	{}	Дополнительные классы для внутренних элементов
dataAttrs	{ root?: Record<string, string> \| undefined; grid?: Record<string, string> \| undefined; item?: Record<string, string> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
onCarouselChange	((currentIndex: number, previousIndex: number, slidesPerView?: number \| "auto" \| undefined) => void) \| undefined		Обработчик смены слайда карусели
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на корневой элемент

type TargetType = '_self' | '_blank' | '_parent' | '_top';

type ButtonType = {
    /** Название */
    title: string;
    /** Ссылка */
    href?: string;
    /** Атрибут ссылки target */
    target?: TargetType;
    /** Атрибут ссылки rel */
    rel?: string;
    /** Обработчик клика */
    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
};

type CardDataType = {
    /** Заголовок */
    title: string;
    /** Текст-описание */
    description?: string;
    /** Изображение */
    imageSrc: string;
    /** Значение тега alt для изображения */
    imageAlt?: string;
    /** Кнопка */
    button?: ButtonType;
    /** Дополнительная кнопка */
    extraButton?: ButtonType;
    /** Ссылка */
    href?: string;
    /** Атрибут ссылки target */
    target?: TargetType;
    /** Атрибут ссылки rel */
    rel?: string;
};

type BackgroundColorType = 'gray' | 'green' | 'blue' | 'violet';

type SingleCardAlignType = 'left' | 'center';