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 |