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={fourItems} radius="rounded" />
</ContentArea>

<ContentArea>
  <Partners items={fourItems} radius="rounded" />
</ContentArea>

<ContentArea>
  <Partners items={eightItemsWithoutHref} radius="rounded" />
</ContentArea>

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

<ContentArea>
  <Partners items={twelveItems} radius="rounded" />
</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[]		Список логотипов
radius	"default" \| "rounded" \| undefined	default	Радиус границы логотипов
onNextClick	((index: number) => void) \| undefined		Обработчик клика по стрелке вперед (должен быть обернут в useCallback)
onPrevClick	((index: number) => void) \| undefined		Обработчик клика по стрелке назад (должен быть обернут в useCallback)
onChange	((currentIndex: number, previousIndex: number, slidesPerView?: number \| "auto" \| undefined) => void) \| undefined		Обработчик смены слайда (должен быть обернут в useCallback)