---
description: Компонент для создания горизонтально прокручиваемых списков Card.
tags: card
---

<Overview group="layout">

# CardScroll [tag:component]

Компонент для создания горизонтально прокручиваемых списков [`Card`](/components/card).
Отвечает за ширину карточки и прокрутку при переполнении. Обеспечивает гибкую настройку базовой разметки.

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

- [Card](/components/card)
- [ContentCard](/components/content-card)

</Overview>

import { BlockWrapper } from '@/components/wrappers';

{/* @example-description: Горизонтальный скролл карточек размера `s` с единым соотношением сторон. */}
<Playground Wrapper={BlockWrapper}>
  ```jsx
  <CardScroll size="s">
    <Card mode="shadow">
      <AspectRatio ratio={100 / 66}>
        <div />
      </AspectRatio>
    </Card>
    <Card mode="shadow">
      <AspectRatio ratio={100 / 66}>
        <div />
      </AspectRatio>
    </Card>
    <Card mode="shadow">
      <AspectRatio ratio={100 / 66}>
        <div />
      </AspectRatio>
    </Card>
    <Card mode="shadow">
      <AspectRatio ratio={100 / 66}>
        <div />
      </AspectRatio>
    </Card>
  </CardScroll>
  ```
</Playground>

## Размер карточек

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

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

## Управление видимостью стрелок

В реализации `CardScroll` используется компонент [`HorizontalScroll`](/components/horizontal-scroll).
Поэтому для управления видимостью стрелок можно использовать свойство `showArrows` компонента `HorizontalScroll`:

{/* @example-description: `CardScroll` c постоянно видимыми стрелками навигации через `showArrows="always"`. */}
<Playground Wrapper={BlockWrapper}>
  ```jsx
  <CardScroll size="m" showArrows="always">
    <Card mode="shadow">
      <AspectRatio ratio={100 / 42}>
        <div />
      </AspectRatio>
    </Card>
    <Card mode="shadow">
      <AspectRatio ratio={100 / 42}>
        <div />
      </AspectRatio>
    </Card>
    <Card mode="shadow">
      <AspectRatio ratio={100 / 42}>
        <div />
      </AspectRatio>
    </Card>
    <Card mode="shadow">
      <AspectRatio ratio={100 / 42}>
        <div />
      </AspectRatio>
    </Card>
  </CardScroll>
  ```
</Playground>

## Доступность (a11y) [#a11y]

- По умолчанию используется семантический список (`<ul>`).
- Для несписочных структур меняйте тег через свойство `CardsListComponent`.

## Свойства и методы [#api]

| Свойство | Тип | По умолчанию | Описание |
| --- | --- | --- | --- |
| `CardsListComponent` | `ElementType<any, keyof IntrinsicElements>` | `ul` | Позволяет поменять тег используемый для обертки над карточками. |
| `Component` | `ElementType<any, keyof IntrinsicElements>` | `-` |  |
| `getRootRef` | `Ref<HTMLDivElement>` | `-` |  |
| `nextButtonTestId` | `string` | `-` | **Deprecated**: Since 8.0.0. Вместо этого используйте `slotProps={ nextArrow: { 'data-testid': ... } }`. Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении следующего элемента. |
| `padding` | `boolean` | `false` | Добавляет отступы по краям слева и справа. |
| `prevButtonTestId` | `string` | `-` | **Deprecated**: Since 8.0.0. Вместо этого используйте `slotProps={ prevArrow: { 'data-testid': ... } }`. Передает атрибут `data-testid` для кнопки прокрутки горизонтального скролла в направлении предыдущего элемента. |
| `showArrows` | `boolean \| "always"` | `true` | Показывать ли стрелки. |
| `size` | `false \| "s" \| "m" \| "l"` | `s` | При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах. |