Перейти к содержимому

CoreScrollRow

Живой MDC-рендер и исходник для копирования.

Живой рендер

Так ContentRenderer отрисует этот контент на реальной странице.

Горизонтальная прокрутка ряда: карточки, галереи, теги. Дети слота рендерятся как есть — в MDC работает без кода; label даёт ряду доступное имя.

Ряд из карточек

CoreButtonCoreCardCoreChipCoreBadgeCoreAvatarCoreSkeletonCoreAlertCoreAccordionCoreInputCoreSelectCoreCheckboxCoreSwitchCoreTabsCoreSliderCoreModalCoreDrawerCorePopoverCoreTooltipCoreDataTableCoreFormCoreKbdCoreProgressCoreRatingCoreAmount

Ряд с изображением

Команда D2N

Команда d2n

Логотип D2N

Бренд d2n

OG-баннер D2N

Баннер d2n

Коллектив D2N

Коллектив d2n

Исходник (MDC)

Тот же код текстом — скопируйте в свой контент как есть.
MDC
Горизонтальная прокрутка ряда: карточки, галереи, теги. Дети слота рендерятся как есть — в MDC работает без кода; `label` даёт ряду доступное имя.

### Ряд из карточек

::core-scroll-row{label="Галерея компонентов" camera-class="gap-2"}
  :core-chip{label="CoreButton"}
  :core-chip{label="CoreCard"}
  :core-chip{label="CoreChip"}
  :core-chip{label="CoreBadge"}
  :core-chip{label="CoreAvatar"}
  :core-chip{label="CoreSkeleton"}
  :core-chip{label="CoreAlert"}
  :core-chip{label="CoreAccordion"}
  :core-chip{label="CoreInput"}
  :core-chip{label="CoreSelect"}
  :core-chip{label="CoreCheckbox"}
  :core-chip{label="CoreSwitch"}
  :core-chip{label="CoreTabs"}
  :core-chip{label="CoreSlider"}
  :core-chip{label="CoreModal"}
  :core-chip{label="CoreDrawer"}
  :core-chip{label="CorePopover"}
  :core-chip{label="CoreTooltip"}
  :core-chip{label="CoreDataTable"}
  :core-chip{label="CoreForm"}
  :core-chip{label="CoreKbd"}
  :core-chip{label="CoreProgress"}
  :core-chip{label="CoreRating"}
  :core-chip{label="CoreAmount"}
::

### Ряд с изображением

::core-scroll-row{label="Фото команды" camera-class="gap-3"}
  ::core-card{style="width: 24rem"}
    ::core-card-content
    ![Команда D2N](/images/d2n-team.jpg)

    Команда d2n
    ::
  ::

  ::core-card{style="width: 24rem"}
    ::core-card-content
    ![Логотип D2N](/images/brand-logo.svg)

    Бренд d2n
    ::
  ::

  ::core-card{style="width: 24rem"}
    ::core-card-content
    ![OG-баннер D2N](/images/og-image.png)

    Баннер d2n
    ::
  ::

  ::core-card{style="width: 24rem"}
    ::core-card-content
    ![Коллектив D2N](/images/d2n-team.jpg)

    Коллектив d2n
    ::
  ::
::