CardScroll

Компонент для создания горизонтально прокручиваемых списков Card. Отвечает за ширину карточки и прокрутку при переполнении. Обеспечивает гибкую настройку базовой разметки.

Связанные компоненты:

Загружается...

Свойство size задаёт ширину каждой карточки и накладывает определённые ограничения на её пропорции. Соблюдение пропорций осуществляется самостоятельно (например, с помощью компонента AspectRatio, как в примере выше).

РазмерПропорцииОсобенности
sвысота 66% (≈1:1.5) от шириныКомпактные элементы
mвысота 42% (≈1:2.38) от шириныУниверсальный размер
lвысота 29% (≈1:3.45) от шириныШирокие элементы
falseАвтоШирина определяется контентом

В реализации CardScroll используется компонент HorizontalScroll. Поэтому для управления видимостью стрелок можно использовать свойство showArrows компонента HorizontalScroll:

Загружается...
  • По умолчанию используется семантический список (<ul>).
  • Для несписочных структур меняйте тег через свойство CardsListComponent.
СвойствоОписание
CardsListComponentElementType<any, keyof IntrinsicElements>

Позволяет поменять тег используемый для обертки над карточками.

По умолчанию: ul
ComponentElementType<any, keyof IntrinsicElements>
По умолчанию: -
getRootRefRef<HTMLDivElement>
По умолчанию: -
nextButtonTestIdstring

Передает атрибут data-testid для кнопки прокрутки горизонтального скролла в направлении следующего элемента.

По умолчанию: -
paddingboolean

Добавляет отступы по краям слева и справа.

По умолчанию: false
prevButtonTestIdstring

Передает атрибут data-testid для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента.

По умолчанию: -
showArrowsboolean | "always"

Показывать ли стрелки.

По умолчанию: true
sizefalse | "s" | "m" | "l"

При size=false ширина Card будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.

По умолчанию: s