logo
English

导航菜单

Documents

ImageRow

Introduction

The ImageRow component is used to display a row of images in a clean and efficient way. Built on top of the Container component, it supports rich background configurations. It’s specifically designed for horizontal image display scenarios, supporting rich styling effects and responsive design.

Tip: For pages with many images, prefer lazy loading for non-critical items. Only mark above-the-fold, user-critical items as eager to avoid delaying the window load event.

If you need more customization for the internal items (e.g. custom card content, complex hover interactions, async loading placeholders), please use the more general-purpose ScrollRow component and render each item via its slot.

Cases

产品图片 1
产品图片 1

精美产品展示

自然风景 1
自然风景 1

自然风光

人物肖像 1
人物肖像 1

人物肖像

产品图片 2
产品图片 2

产品细节

自然风景 2
自然风景 2

城市景观

人物肖像 2
人物肖像 2

专业形象

Props

background

Background color type, supports all Tailwind background colors and opacity variants.

主色背景图片 1
主色背景图片 1
主色背景图片 2
主色背景图片 2
主色背景图片 3
主色背景图片 3
次色背景图片 1
次色背景图片 1
次色背景图片 2
次色背景图片 2
次色背景图片 3
次色背景图片 3
成功色背景图片 1
成功色背景图片 1
成功色背景图片 2
成功色背景图片 2
成功色背景图片 3
成功色背景图片 3
警告色背景图片 1
警告色背景图片 1
警告色背景图片 2
警告色背景图片 2
警告色背景图片 3
警告色背景图片 3 
---



/**
 * @component ImageRowBackgroundPrimary
 * @description ImageRow 组件主色背景示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "主色背景图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "主色背景图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "主色背景图片 3",
	},
];
---

<ImageRow images={images} background="primary/50" padding="md" />

---



/**
 * @component ImageRowBackgroundSecondary
 * @description ImageRow 组件次色背景示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "次色背景图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "次色背景图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "次色背景图片 3",
	},
];
---

<ImageRow images={images} background="secondary/30" padding="md" />

---



/**
 * @component ImageRowBackgroundSuccess
 * @description ImageRow 组件成功色背景示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "成功色背景图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "成功色背景图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "成功色背景图片 3",
	},
];
---

<ImageRow images={images} background="success/20" padding="md" />

---



/**
 * @component ImageRowBackgroundWarning
 * @description ImageRow 组件警告色背景示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "警告色背景图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "警告色背景图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "警告色背景图片 3",
	},
];
---

<ImageRow images={images} background="warning/20" padding="md" />

border

Whether to show border, adds border around container when set to true.

有边框图片 1
有边框图片 1
有边框图片 2
有边框图片 2
有边框图片 3
有边框图片 3
无边框图片 1
无边框图片 1
无边框图片 2
无边框图片 2
无边框图片 3
无边框图片 3 
---



/**
 * @component ImageRowBorderTrue
 * @description ImageRow 组件有边框示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "有边框图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "有边框图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "有边框图片 3",
	},
];
---

<ImageRow images={images} border={true} padding="md" />

---



/**
 * @component ImageRowBorderFalse
 * @description ImageRow 组件无边框示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "无边框图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "无边框图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "无边框图片 3",
	},
];
---

<ImageRow images={images} border={false} padding="md" />

class

Custom CSS class name for adding additional styles.

containerRounded

Container border radius, optional values: none, sm, md, lg, xl, 2xl, 3xl, full.

图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3 
---



/**
 * @component ImageRowContainerRoundedNone
 * @description ImageRow 组件无容器圆角示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow
  images={images}
  containerRounded="none"
  gap="sm"
  shadow="sm"
  background="base-200/20"
  padding="md"
/>

---



/**
 * @component ImageRowContainerRoundedSm
 * @description ImageRow 组件小容器圆角示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow
  images={images}
  containerRounded="sm"
  gap="sm"
  shadow="sm"
  background="info/20"
  padding="md"
/>

---



/**
 * @component ImageRowContainerRoundedMd
 * @description ImageRow 组件中等容器圆角示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow
  images={images}
  containerRounded="md"
  gap="sm"
  shadow="sm"
  background="success/20"
  padding="md"
/>

---



/**
 * @component ImageRowContainerRoundedLg
 * @description ImageRow 组件大容器圆角示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow
  images={images}
  containerRounded="lg"
  gap="sm"
  shadow="sm"
  background="warning/20"
  padding="md"
/>

---



/**
 * @component ImageRowContainerRoundedXl
 * @description ImageRow 组件超大容器圆角示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow
  images={images}
  containerRounded="xl"
  gap="sm"
  shadow="sm"
  background="error/20"
  padding="md"
/>

gap

Image spacing, optional values: none, xs, sm, md, lg, xl.

图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3 
---



/**
 * @component ImageRowGapNone
 * @description ImageRow 组件无间距示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 150 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 150, height: 150 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 150, height: 150 }),
		alt: "图片 3",
	},
];
---

<ImageRow images={images} gap="none" rounded="md" shadow="sm" />

---



/**
 * @component ImageRowGapSmall
 * @description ImageRow 组件小间距示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 150 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 150, height: 150 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 150, height: 150 }),
		alt: "图片 3",
	},
];
---

<ImageRow images={images} gap="xs" rounded="md" shadow="sm" />

---



/**
 * @component ImageRowGapMedium
 * @description ImageRow 组件中等间距示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 150 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 150, height: 150 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 150, height: 150 }),
		alt: "图片 3",
	},
];
---

<ImageRow images={images} gap="md" rounded="md" shadow="sm" />

---



/**
 * @component ImageRowGapLarge
 * @description ImageRow 组件大间距示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 150 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 150, height: 150 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 150, height: 150 }),
		alt: "图片 3",
	},
];
---

<ImageRow images={images} gap="xl" rounded="md" shadow="sm" />

height

Container height (directly passed through to the inner Container), optional values: none, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, screen, auto, full.

示例图片 1
示例图片 1
示例图片 2
示例图片 2
示例图片 3
示例图片 3
示例图片 1
示例图片 1
示例图片 2
示例图片 2
示例图片 3
示例图片 3
示例图片 1
示例图片 1
示例图片 2
示例图片 2
示例图片 3
示例图片 3
示例图片 1
示例图片 1
示例图片 2
示例图片 2
示例图片 3
示例图片 3 
---



/**
 * @component ImageRowHeightNone
 * @description ImageRow 高度 none 示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{ src: getProductImage({ width: 200, height: 150 }), alt: "示例图片 1" },
	{ src: getLandscapeImage({ width: 200, height: 150 }), alt: "示例图片 2" },
	{ src: getAvatarImage({ width: 200, height: 150 }), alt: "示例图片 3" },
];
---

<ImageRow images={images} height="none" background="primary/10" padding="md" />

---



/**
 * @component ImageRowHeightMd
 * @description ImageRow 高度 md 示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{ src: getProductImage({ width: 200, height: 150 }), alt: "示例图片 1" },
	{ src: getLandscapeImage({ width: 200, height: 150 }), alt: "示例图片 2" },
	{ src: getAvatarImage({ width: 200, height: 150 }), alt: "示例图片 3" },
];
---

<ImageRow images={images} height="md" background="primary/10" padding="md" />

---



/**
 * @component ImageRowHeightLg
 * @description ImageRow 高度 lg 示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{ src: getProductImage({ width: 200, height: 150 }), alt: "示例图片 1" },
	{ src: getLandscapeImage({ width: 200, height: 150 }), alt: "示例图片 2" },
	{ src: getAvatarImage({ width: 200, height: 150 }), alt: "示例图片 3" },
];
---

<ImageRow images={images} height="lg" background="primary/10" padding="md" />

---



/**
 * @component ImageRowHeightFull
 * @description ImageRow 高度 full 示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{ src: getProductImage({ width: 200, height: 150 }), alt: "示例图片 1" },
	{ src: getLandscapeImage({ width: 200, height: 150 }), alt: "示例图片 2" },
	{ src: getAvatarImage({ width: 200, height: 150 }), alt: "示例图片 3" },
];
---

<ImageRow images={images} height="full" background="primary/10" padding="md" />

hover

Hover effects, optional values: none, scale, brightness, blur.

图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3 
---



/**
 * @component ImageRowHoverNone
 * @description ImageRow 组件无悬停效果示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow images={images} hover="none" gap="sm" rounded="md" shadow="sm" />

---



/**
 * @component ImageRowHoverScale
 * @description ImageRow 组件缩放悬停效果示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow images={images} hover="scale" gap="sm" rounded="md" shadow="sm" />

---



/**
 * @component ImageRowHoverBrightness
 * @description ImageRow 组件亮度悬停效果示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({
			width: 200,
			height: 200,
			tag: "hover-brightness-1",
		}),
		alt: "图片 1",
	},
	{
		src: getProductImage({
			width: 200,
			height: 200,
			tag: "hover-brightness-2",
		}),
		alt: "图片 2",
	},
	{
		src: getProductImage({
			width: 200,
			height: 200,
			tag: "hover-brightness-3",
		}),
		alt: "图片 3",
	},
];
---

<ImageRow
  images={images}
  layout="grid"
  columns={3}
  hover="brightness"
  gap="sm"
  rounded="md"
  shadow="sm"
/>

---



/**
 * @component ImageRowHoverBlur
 * @description ImageRow 组件模糊悬停效果示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow images={images} hover="blur" gap="sm" rounded="md" shadow="sm" />

images

Array of images. Each item includes source and alt text. Two common ways are supported:

  • Pass string URLs directly (CDN or site paths)
  • Import local assets via import and assign the imported value to images[i].src
产品图片 1
产品图片 1
自然风景 1
自然风景 1
人物肖像 1
人物肖像 1
产品图片 1
产品图片 1

产品展示

自然风景 1
自然风景 1

自然风光

人物肖像 1
人物肖像 1

人物肖像

产品图片 1
产品图片 1
自然风景 1
自然风景 1
人物肖像 1
人物肖像 1
本地图片 1
本地图片 1
本地图片 2
本地图片 2
本地图片 3
本地图片 3 
---



/**
 * @component ImageRowImagesBasic
 * @description ImageRow 组件 images 属性基础示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "产品图片 1",
	},
	{
		src: getLandscapeImage({ width: 200, height: 200 }),
		alt: "自然风景 1",
	},
	{
		src: getAvatarImage({ width: 200, height: 200 }),
		alt: "人物肖像 1",
	},
];
---

<ImageRow images={images} gap="sm" rounded="md" shadow="sm" />

---



/**
 * @component ImageRowImagesWithCaption
 * @description ImageRow 组件 images 属性带标题示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "产品图片 1",
		caption: "产品展示",
	},
	{
		src: getLandscapeImage({ width: 200, height: 200 }),
		alt: "自然风景 1",
		caption: "自然风光",
	},
	{
		src: getAvatarImage({ width: 200, height: 200 }),
		alt: "人物肖像 1",
		caption: "人物肖像",
	},
];
---

<ImageRow images={images} gap="sm" rounded="md" shadow="sm" />

---



/**
 * @component ImageRowImagesWithSize
 * @description ImageRow 组件 images 属性带尺寸示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "产品图片 1",
		width: 200,
		height: 200,
		loading: "lazy" as const,
	},
	{
		src: getLandscapeImage({ width: 200, height: 200 }),
		alt: "自然风景 1",
		width: 200,
		height: 200,
		loading: "lazy" as const,
	},
	{
		src: getAvatarImage({ width: 200, height: 200 }),
		alt: "人物肖像 1",
		width: 200,
		height: 200,
		loading: "eager" as const,
	},
];
---

<ImageRow images={images} gap="sm" rounded="md" shadow="sm" />

---



import { ImageRow } from "@coffic/cosy-ui";
import Image1 from "@/assets/book.png";
import Image2 from "@/assets/hero.png";
import Image3 from "@/assets/logo.png";

const images = [
	{ src: Image1, alt: "本地图片 1" },
	{ src: Image2, alt: "本地图片 2" },
	{ src: Image3, alt: "本地图片 3" },
];
---

<ImageRow
  images={images}
  gap="md"
  rounded="md"
  shadow="sm"
  hover="scale"
  background="base-200"
  padding="lg"
  width="lg"
/>

margin

Outer margin size, optional values: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl.

无外边距图片 1
无外边距图片 1
无外边距图片 2
无外边距图片 2
无外边距图片 3
无外边距图片 3
小外边距图片 1
小外边距图片 1
小外边距图片 2
小外边距图片 2
小外边距图片 3
小外边距图片 3
中等外边距图片 1
中等外边距图片 1
中等外边距图片 2
中等外边距图片 2
中等外边距图片 3
中等外边距图片 3
大外边距图片 1
大外边距图片 1
大外边距图片 2
大外边距图片 2
大外边距图片 3
大外边距图片 3 
---



/**
 * @component ImageRowMarginNone
 * @description ImageRow 组件无外边距示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "无外边距图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "无外边距图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "无外边距图片 3",
	},
];
---

<ImageRow images={images} margin="none" background="primary/50" padding="md" />

---



/**
 * @component ImageRowMarginSm
 * @description ImageRow 组件小外边距示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "小外边距图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "小外边距图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "小外边距图片 3",
	},
];
---

<ImageRow images={images} margin="sm" background="primary/50" padding="md" />

---



/**
 * @component ImageRowMarginMd
 * @description ImageRow 组件中等外边距示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "中等外边距图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "中等外边距图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "中等外边距图片 3",
	},
];
---

<ImageRow images={images} margin="md" background="primary/50" padding="md" />

---



/**
 * @component ImageRowMarginLg
 * @description ImageRow 组件大外边距示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "大外边距图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "大外边距图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "大外边距图片 3",
	},
];
---

<ImageRow images={images} margin="lg" background="primary/50" padding="md" />

padding

Inner padding size, optional values: none, sm, md, lg, xl, 2xl, 3xl, 4xl.

无内边距图片 1
无内边距图片 1
无内边距图片 2
无内边距图片 2
无内边距图片 3
无内边距图片 3
小内边距图片 1
小内边距图片 1
小内边距图片 2
小内边距图片 2
小内边距图片 3
小内边距图片 3
中等内边距图片 1
中等内边距图片 1
中等内边距图片 2
中等内边距图片 2
中等内边距图片 3
中等内边距图片 3
大内边距图片 1
大内边距图片 1
大内边距图片 2
大内边距图片 2
大内边距图片 3
大内边距图片 3 
---



/**
 * @component ImageRowPaddingNone
 * @description ImageRow 组件无内边距示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "无内边距图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "无内边距图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "无内边距图片 3",
	},
];
---

<ImageRow images={images} padding="none" background="primary/50" />

---



/**
 * @component ImageRowPaddingSm
 * @description ImageRow 组件小内边距示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "小内边距图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "小内边距图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "小内边距图片 3",
	},
];
---

<ImageRow images={images} padding="sm" background="primary/50" />

---



/**
 * @component ImageRowPaddingMd
 * @description ImageRow 组件中等内边距示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "中等内边距图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "中等内边距图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "中等内边距图片 3",
	},
];
---

<ImageRow images={images} padding="md" background="primary/50" />

---



/**
 * @component ImageRowPaddingLg
 * @description ImageRow 组件大内边距示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "大内边距图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "大内边距图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "大内边距图片 3",
	},
];
---

<ImageRow images={images} padding="lg" background="primary/50" />

rounded

Image border radius, optional values: none, sm, md, lg, xl, 2xl, 3xl, full.

图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3 
---



/**
 * @component ImageRowRoundedNone
 * @description ImageRow 组件无圆角示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow images={images} rounded="none" gap="sm" shadow="sm" />

---



/**
 * @component ImageRowRoundedMedium
 * @description ImageRow 组件中等圆角示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow images={images} rounded="md" gap="sm" shadow="sm" />

---



/**
 * @component ImageRowRoundedLarge
 * @description ImageRow 组件大圆角示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow images={images} rounded="xl" gap="sm" shadow="sm" />

---



/**
 * @component ImageRowRoundedFull
 * @description ImageRow 组件圆形示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow images={images} rounded="full" gap="sm" shadow="sm" />

shadow

Image shadow, optional values: none, sm, md, lg, xl, 2xl.

图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3 
---



/**
 * @component ImageRowShadowNone
 * @description ImageRow 组件无阴影示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow images={images} shadow="none" gap="sm" rounded="md" />

---



/**
 * @component ImageRowShadowSmall
 * @description ImageRow 组件小阴影示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow images={images} shadow="sm" gap="sm" rounded="md" />

---



/**
 * @component ImageRowShadowMedium
 * @description ImageRow 组件中等阴影示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow images={images} shadow="md" gap="sm" rounded="md" />

---



/**
 * @component ImageRowShadowLarge
 * @description ImageRow 组件大阴影示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
];
---

<ImageRow images={images} shadow="xl" gap="sm" rounded="md" />

showNavigation

Whether to show left/right navigation buttons, displays previous/next buttons on both sides of the image row when set to true.

图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 4
图片 4
图片 5
图片 5
图片 6
图片 6
图片 1
图片 1
图片 2
图片 2
图片 3
图片 3
图片 4
图片 4
图片 5
图片 5
图片 6
图片 6 
---



/**
 * @component ImageRowNavigationDisabled
 * @description ImageRow 组件禁用导航按钮示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 4",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 5",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 6",
	},
];
---

<ImageRow
  images={images}
  showNavigation={false}
  gap="sm"
  shadow="sm"
  background="base-200/20"
  padding="md"
/>

---



/**
 * @component ImageRowNavigationEnabled
 * @description ImageRow 组件启用导航按钮示例
 */
import { getProductImage, ImageRow } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 1",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 2",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 3",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 4",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 5",
	},
	{
		src: getProductImage({ width: 200, height: 200 }),
		alt: "图片 6",
	},
];
---

<ImageRow
  images={images}
  showNavigation={true}
  gap="sm"
  shadow="sm"
  background="primary/20"
  padding="md"
/>

width

Container width, optional values: xs, sm, md, lg, xl, full.

小宽度图片 1
小宽度图片 1
小宽度图片 2
小宽度图片 2
小宽度图片 3
小宽度图片 3
中等宽度图片 1
中等宽度图片 1
中等宽度图片 2
中等宽度图片 2
中等宽度图片 3
中等宽度图片 3
大宽度图片 1
大宽度图片 1
大宽度图片 2
大宽度图片 2
大宽度图片 3
大宽度图片 3
全宽度图片 1
全宽度图片 1
全宽度图片 2
全宽度图片 2
全宽度图片 3
全宽度图片 3 
---



/**
 * @component ImageRowWidthSm
 * @description ImageRow 组件小宽度示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "小宽度图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "小宽度图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "小宽度图片 3",
	},
];
---

<ImageRow images={images} width="sm" background="primary/50" padding="md" />

---



/**
 * @component ImageRowWidthMd
 * @description ImageRow 组件中等宽度示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "中等宽度图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "中等宽度图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "中等宽度图片 3",
	},
];
---

<ImageRow images={images} width="md" background="primary/50" padding="md" />

---



/**
 * @component ImageRowWidthLg
 * @description ImageRow 组件大宽度示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "大宽度图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "大宽度图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "大宽度图片 3",
	},
];
---

<ImageRow images={images} width="lg" background="primary/50" padding="md" />

---



/**
 * @component ImageRowWidthFull
 * @description ImageRow 组件全宽度示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 150, height: 100 }),
		alt: "全宽度图片 1",
	},
	{
		src: getLandscapeImage({ width: 150, height: 100 }),
		alt: "全宽度图片 2",
	},
	{
		src: getAvatarImage({ width: 150, height: 100 }),
		alt: "全宽度图片 3",
	},
];
---

<ImageRow images={images} width="full" background="primary/50" padding="md" />

height

Container height (directly passed through to the inner Container), optional values: none, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, screen, auto, full.

示例图片 1
示例图片 1
示例图片 2
示例图片 2
示例图片 3
示例图片 3
示例图片 1
示例图片 1
示例图片 2
示例图片 2
示例图片 3
示例图片 3
示例图片 1
示例图片 1
示例图片 2
示例图片 2
示例图片 3
示例图片 3
示例图片 1
示例图片 1
示例图片 2
示例图片 2
示例图片 3
示例图片 3 
---



/**
 * @component ImageRowHeightNone
 * @description ImageRow 高度 none 示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{ src: getProductImage({ width: 200, height: 150 }), alt: "示例图片 1" },
	{ src: getLandscapeImage({ width: 200, height: 150 }), alt: "示例图片 2" },
	{ src: getAvatarImage({ width: 200, height: 150 }), alt: "示例图片 3" },
];
---

<ImageRow images={images} height="none" background="primary/10" padding="md" />

---



/**
 * @component ImageRowHeightMd
 * @description ImageRow 高度 md 示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{ src: getProductImage({ width: 200, height: 150 }), alt: "示例图片 1" },
	{ src: getLandscapeImage({ width: 200, height: 150 }), alt: "示例图片 2" },
	{ src: getAvatarImage({ width: 200, height: 150 }), alt: "示例图片 3" },
];
---

<ImageRow images={images} height="md" background="primary/10" padding="md" />

---



/**
 * @component ImageRowHeightLg
 * @description ImageRow 高度 lg 示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{ src: getProductImage({ width: 200, height: 150 }), alt: "示例图片 1" },
	{ src: getLandscapeImage({ width: 200, height: 150 }), alt: "示例图片 2" },
	{ src: getAvatarImage({ width: 200, height: 150 }), alt: "示例图片 3" },
];
---

<ImageRow images={images} height="lg" background="primary/10" padding="md" />

---



/**
 * @component ImageRowHeightFull
 * @description ImageRow 高度 full 示例
 */
import {
	getAvatarImage,
	getLandscapeImage,
	getProductImage,
	ImageRow,
} from "@coffic/cosy-ui";

const images = [
	{ src: getProductImage({ width: 200, height: 150 }), alt: "示例图片 1" },
	{ src: getLandscapeImage({ width: 200, height: 150 }), alt: "示例图片 2" },
	{ src: getAvatarImage({ width: 200, height: 150 }), alt: "示例图片 3" },
];
---

<ImageRow images={images} height="full" background="primary/10" padding="md" />

搜索