ImageRow
简介
ImageRow 组件用于展示一行图片，基于 Container 组件构建，支持丰富的背景配置。专门用于水平排列的图片展示场景，支持丰富的样式效果和响应式设计。
提示：当页面包含大量图片时，请为非关键图片使用懒加载（lazy），仅对首屏关键项使用 eager，避免延迟页面 window load 完成时间。
如果你需要对内部 item 的结构与交互做更多自定义（例如自定义卡片内容、复杂悬浮交互、异步加载占位等），建议使用更通用的 ScrollRow 组件，通过插槽自由渲染每个子项。
案例
精美产品展示
自然风光
人物肖像
产品细节
城市景观
专业形象
Props
background
背景色类型，支持所有 Tailwind 背景色和透明度变体。
---
/**
* @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
是否显示边框，设置为 true 时会在容器周围添加边框。
---
/**
* @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
自定义 CSS 类名，用于添加额外的样式。
containerRounded
容器圆角，可选值：none、sm、md、lg、xl、2xl、3xl、full。
---
/**
* @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
图片间距，可选值：none、xs、sm、md、lg、xl。
---
/**
* @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），可选值：none、3xs、2xs、xs、sm、md、lg、xl、2xl、3xl、4xl、5xl、6xl、screen、auto、full。
---
/**
* @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
悬停效果，可选值：none、scale、brightness、blur。
---
/**
* @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
图片数组，每个图片项包含源地址、替代文本等信息。支持两种常见方式：
- 直接传入字符串 URL（如 CDN 链接或站点内路径）
- 使用
import导入本地资源，再将导入结果赋值给images[i].src
产品展示
自然风光
人物肖像
---
/**
* @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
外边距大小，可选值：none、xs、sm、md、lg、xl、2xl、3xl、4xl、5xl、6xl。
---
/**
* @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
内边距大小，可选值：none、sm、md、lg、xl、2xl、3xl、4xl。
---
/**
* @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
图片圆角，可选值：none、sm、md、lg、xl、2xl、3xl、full。
---
/**
* @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
图片阴影，可选值：none、sm、md、lg、xl、2xl。
---
/**
* @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
是否显示左右导航按钮，设置为 true 时会在图片行两侧显示前进/后退按钮。
---
/**
* @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
容器宽度，可选值：xs、sm、md、lg、xl、full。
---
/**
* @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），可选值：none、3xs、2xs、xs、sm、md、lg、xl、2xl、3xl、4xl、5xl、6xl、screen、auto、full。
---
/**
* @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" />