logo
English

导航菜单

Documents

ScrollRow

Introduction

ScrollRow is a general-purpose horizontally scrollable container. It does not limit the child content type and provides navigation, spacing, and accessibility support.

Example

Props

background

Background color. Supports all preset background colors and opacity variants.

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
  <PlaceHolder width="lg" height="md" background="info/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
  <PlaceHolder width="lg" height="md" background="info/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
  <PlaceHolder width="lg" height="md" background="info/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  rounded="md"
  background="primary/10"
  >
  <PlaceHolder width="lg" height="md" background="base-300" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
  <PlaceHolder width="lg" height="md" background="info/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  rounded="md"
  background="neutral/10"
  >
  <PlaceHolder width="lg" height="md" background="base-300" />
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  rounded="md"
  background="gradient"
  >
  <PlaceHolder width="lg" height="md" background="base-300" />
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

class

Additional custom class names.

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow showNavigation class="" gap="sm" padding="sm" rounded="md" background="base-300" >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>



---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  class="cosy:border cosy:border-base-300 cosy:rounded-lg"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  class="cosy:shadow-lg cosy:rounded-xl"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

gap

Gap between children. From the library’s Gap preset sizes.

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="none"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="xs"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="md"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="lg"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="xl"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

height

Container height. From the library’s Height preset sizes.

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="none"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="3xs"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="2xs"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="xs"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="sm"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="md"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="lg"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="xl"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="2xl"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="3xl"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="4xl"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="5xl"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="6xl"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="full"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="screen"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  height="auto"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

margin

Outer spacing. From the library’s Margin preset sizes.

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  margin="none"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  margin="xs"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  margin="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  margin="md"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  margin="lg"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  margin="xl"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  margin="2xl"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  margin="3xl"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  margin="4xl"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  margin="5xl"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  margin="6xl"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

padding

Inner spacing. From the library’s Padding preset sizes.

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="none"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="md"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="lg"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="xl"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="2xl"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="3xl"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="4xl"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

rounded

Container border radius. From the library’s Rounded preset sizes.

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  rounded="none"
  gap="sm"
  padding="sm"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  rounded="sm"
  gap="sm"
  padding="sm"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow showNavigation rounded="md" gap="sm" padding="sm" background="base-300" >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>



---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  rounded="lg"
  gap="sm"
  padding="sm"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  rounded="xl"
  gap="sm"
  padding="sm"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  rounded="2xl"
  gap="sm"
  padding="sm"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow showNavigation rounded="3xl" gap="sm" padding="sm" background="base-300" >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>



---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  rounded="full"
  gap="sm"
  padding="sm"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

scrollBy

Step size for navigation buttons. One of: 'item' | 'page' | number.

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  scrollBy="item"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="md" height="md" background="primary/30" />
  <PlaceHolder width="md" height="md" background="secondary/30" />
  <PlaceHolder width="md" height="md" background="accent/30" />
  <PlaceHolder width="md" height="md" background="success/30" />
  <PlaceHolder width="md" height="md" background="warning/30" />
  <PlaceHolder width="md" height="md" background="error/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow showNavigation scrollBy="page" gap="sm" padding="sm" rounded="md" background="base-300" >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>



---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  scrollBy={240}
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
  <PlaceHolder width="lg" height="md" background="error/30" />
</ScrollRow>

showNavigation

Whether to display left/right navigation buttons. Default true.

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow showNavigation={false} gap="sm" padding="sm" rounded="md" background="base-300" >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
</ScrollRow>

width

Container width. From the library’s Size preset sizes.

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  width="none"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
  <PlaceHolder width="lg" height="md" background="warning/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  width="3xs"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  width="2xs"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  width="xs"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  width="sm"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  width="md"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  width="lg"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  width="xl"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  width="2xl"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  width="3xl"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  width="4xl"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow showNavigation width="5xl" gap="sm" padding="sm" rounded="md" background="base-300" >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
</ScrollRow>



---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  width="6xl"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
</ScrollRow>

---



import { PlaceHolder, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  width="full"
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300"
  >
  <PlaceHolder width="lg" height="md" background="primary/30" />
  <PlaceHolder width="lg" height="md" background="secondary/30" />
  <PlaceHolder width="lg" height="md" background="accent/30" />
  <PlaceHolder width="lg" height="md" background="success/30" />
</ScrollRow>

Slots

default

Place any horizontally arranged and scrollable child content.

product 1
product 1
product 2
product 2
product 3
product 3
product 4
product 4
product 5
product 5 
---



import { getProductImage, Image, ScrollRow } from "@coffic/cosy-ui";
---

<ScrollRow
  showNavigation
  gap="sm"
  padding="sm"
  rounded="md"
  background="base-300">
  <div style="display:inline-block;width:240px;height:160px">
    <Image
      src={getProductImage({ width: 240, height: 160, tag: 'p1' })}
      alt="product 1"
      width={240}
      height={160}
      rounded="md"
      shadow="md"
      preview={true}
    />
  </div>
  <div style="display:inline-block;width:240px;height:160px">
    <Image
      src={getProductImage({ width: 240, height: 160, tag: 'p2' })}
      alt="product 2"
      width={240}
      height={160}
      rounded="md"
      shadow="md"
      preview={true}
    />
  </div>
  <div style="display:inline-block;width:240px;height:160px">
    <Image
      src={getProductImage({ width: 240, height: 160, tag: 'p3' })}
      alt="product 3"
      width={240}
      height={160}
      rounded="md"
      shadow="md"
      preview={true}
    />
  </div>
  <div style="display:inline-block;width:240px;height:160px">
    <Image
      src={getProductImage({ width: 240, height: 160, tag: 'p4' })}
      alt="product 4"
      width={240}
      height={160}
      rounded="md"
      shadow="md"
      preview={true}
    />
  </div>
  <div style="display:inline-block;width:240px;height:160px">
    <Image
      src={getProductImage({ width: 240, height: 160, tag: 'p5' })}
      alt="product 5"
      width={240}
      height={160}
      rounded="md"
      shadow="md"
      preview={true}
    />
  </div>
</ScrollRow>

搜索