CardScroll
Компонент для создания горизонтально прокручиваемых списков Card.
Отвечает за ширину карточки и прокрутку при переполнении. Обеспечивает гибкую настройку базовой разметки.
Связанные компоненты:
Размер карточек
Свойство size задаёт ширину каждой карточки и накладывает определённые ограничения на её пропорции.
Соблюдение пропорций осуществляется самостоятельно
(например, с помощью компонента AspectRatio, как в примере выше).
| Размер | Пропорции | Особенности |
|---|---|---|
s | высота 66% (≈1:1.5) от ширины | Компактные элементы |
m | высота 42% (≈1:2.38) от ширины | Универсальный размер |
l | высота 29% (≈1:3.45) от ширины | Широкие элементы |
false | Авто | Ширина определяется контентом |
Управление видимостью стрелок
В реализации CardScroll используется компонент HorizontalScroll.
Поэтому для управления видимостью стрелок можно использовать свойство showArrows компонента HorizontalScroll:
Доступность (a11y)
- По умолчанию используется семантический список (
<ul>). - Для несписочных структур меняйте тег через свойство
CardsListComponent.
Свойства и методы
| Свойство | Описание |
|---|---|
CardsListComponent | ElementType<any, keyof IntrinsicElements>Позволяет поменять тег используемый для обертки над карточками. По умолчанию: ul |
Component | ElementType<any, keyof IntrinsicElements>По умолчанию: - |
getRootRef | Ref<HTMLDivElement>По умолчанию: - |
nextButtonTestId | stringПередает атрибут По умолчанию: - |
padding | booleanДобавляет отступы по краям слева и справа. По умолчанию: false |
prevButtonTestId | stringПередает атрибут По умолчанию: - |
showArrows | boolean | "always"Показывать ли стрелки. По умолчанию: true |
size | false | "s" | "m" | "l"При По умолчанию: s |