Partners

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

Особенности использования

Рекомендуется размещать количество партнеров от 2 штук.

Демо данныеconst items = [
    {
        href: '#',
        src: 'image.png',
    },
    {
        src: 'image.png',
    },
];

<ContentArea>
  <Partners items={fourItems} background="shadow" />
</ContentArea>

<ContentArea>
  <Partners items={fourItems} background="outline" />
</ContentArea>

<ContentArea>
  <Partners items={fourItems} background="white" />
</ContentArea>

<ContentArea>
  <Partners items={fourItems} background="gray" />
</ContentArea>

<ContentArea>
  <Partners items={twoItems} background="shadow" />
</ContentArea>

<ContentArea>
  <Partners items={threeItems} background="shadow" />
</ContentArea>

<ContentArea>
  <Partners items={fourItems} background="shadow" />
</ContentArea>

<ContentArea>
  <Partners items={fiveItems} background="shadow" />
</ContentArea>

<ContentArea>
  <Partners items={sixItems} background="shadow" />
</ContentArea>

<ContentArea>
  <Partners items={sevenItems} background="shadow" />
</ContentArea>

<ContentArea>
  <Partners items={fourItems} />
</ContentArea>

<ContentArea>
  <Partners items={eightItemsWithoutHref} />
</ContentArea>

Режим карусели включается автоматически, если количество логотипов больше 8.

<ContentArea>
  <Partners items={twelveItems} />
</ContentArea>

Prop name	Type	Default	Description
dataAttrs	{ root?: Record<string, string> \| undefined; item?: Record<string, string> \| undefined; } \| undefined		Дополнительные data атрибуты к внутренним элементам
rootRef	Ref<HTMLDivElement> \| undefined		Ссылка на корневой элемент
classes	{ root?: string \| undefined; itemClass?: string \| undefined; slide?: string \| undefined; } \| undefined		Дополнительные классы для корневого и внутренних элементов
className	string \| undefined		Дополнительный класс корневого элемента
items*	ItemType[]		Список логотипов
background	BackgroundType \| undefined	shadow	Фон карточки
onNextClick	((index: number) => void) \| undefined		Обработчик клика по стрелке вперед (должен быть обернут в useCallback)
onPrevClick	((index: number) => void) \| undefined		Обработчик клика по стрелке назад (должен быть обернут в useCallback)
onChange	((currentIndex: number, previousIndex: number, slidesPerView?: number \| "auto" \| undefined) => void) \| undefined		Обработчик смены слайда (должен быть обернут в useCallback)