Partners

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

Примеры и код

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

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

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

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

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

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

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

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

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