logo
简体中文

导航菜单

文档

ScrollRow

简介

ScrollRow 是一个通用的横向可滚动容器组件，不限定子内容类型，提供左右导航按钮、间距控制以及可访问性支持。

案例

Props

background

背景色，支持组件库预设的所有背景色与透明度变体。

---



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

追加的自定义类名。

---



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 预设尺寸。

---



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

容器高度，来自组件库的 Height 预设尺寸。

---



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

外边距，来自组件库的 Margin 预设尺寸。

---



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

内边距，来自组件库的 Padding 预设尺寸。

---



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

容器圆角，来自组件库的 Rounded 预设尺寸。

---



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

导航按钮滚动步长，可选值：'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

是否显示左右导航按钮，默认 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

容器宽度，来自组件库的 Size 预设尺寸。

---



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

放置任意需要横向排列和滚动的子内容。

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>

搜索