logo
简体中文

导航菜单

文档

Image3

展示三张图片的组件，中间图片直立，两侧图片倾斜，创造动态的视觉效果。

案例

产品展示 - 左侧
产品展示 - 主图
产品展示 - 右侧

Props

background

设置容器的背景色，详细用法参考 Container 组件。

左侧图片
中间图片
右侧图片
左侧图片
中间图片
右侧图片
左侧图片
中间图片
右侧图片
---



/**
 * @component Image3BackgroundBase
 * @description Image3 组件基础背景色示例
 */
import { getProductImage, Image3 } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 250, height: 350, tag: "bg-base-left" }),
		alt: "左侧图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "bg-base-center" }),
		alt: "中间图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "bg-base-right" }),
		alt: "右侧图片",
		width: 250,
		height: 350,
	},
];
---

<Image3 images={images} background="base-100" />

---



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

const images = [
	{
		src: getProductImage({ width: 250, height: 350, tag: "bg-primary-left" }),
		alt: "左侧图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "bg-primary-center" }),
		alt: "中间图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "bg-primary-right" }),
		alt: "右侧图片",
		width: 250,
		height: 350,
	},
];
---

<Image3 images={images} background="primary" />

---



/**
 * @component Image3BackgroundAccent
 * @description Image3 组件强调色背景示例
 */
import { getProductImage, Image3 } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 250, height: 350, tag: "bg-accent-left" }),
		alt: "左侧图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "bg-accent-center" }),
		alt: "中间图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "bg-accent-right" }),
		alt: "右侧图片",
		width: 250,
		height: 350,
	},
];
---

<Image3 images={images} background="accent" />

class

自定义 CSS 类名，用于添加额外的样式。

images

图片数据数组，必须包含三张图片，每张图片包含 src、alt 等属性。

rounded

图片圆角，可选值：none、sm、md、lg、xl、2xl、3xl、full。

shadow

图片阴影，可选值：none、sm、md、lg、xl。

左侧图片
中间图片
右侧图片
左侧图片
中间图片
右侧图片
左侧图片
中间图片
右侧图片
---



/**
 * @component Image3Shadows
 * @description Image3 组件不同阴影示例
 */
import { getProductImage, Image3 } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 250, height: 350, tag: "shadow-none-left" }),
		alt: "左侧图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({
			width: 250,
			height: 350,
			tag: "shadow-none-center",
		}),
		alt: "中间图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "shadow-none-right" }),
		alt: "右侧图片",
		width: 250,
		height: 350,
	},
];
---

<Image3 images={images} shadow="none" />

---



/**
 * @component Image3Basic
 * @description Image3 组件基础示例
 */
import { getProductImage, Image3 } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 250, height: 350, tag: "image3-left" }),
		alt: "左侧图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "image3-center" }),
		alt: "中间图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "image3-right" }),
		alt: "右侧图片",
		width: 250,
		height: 350,
	},
];
---

<Image3 images={images} />

---



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

const images = [
	{
		src: getProductImage({ width: 250, height: 350, tag: "shadow-xl-left" }),
		alt: "左侧图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "shadow-xl-center" }),
		alt: "中间图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "shadow-xl-right" }),
		alt: "右侧图片",
		width: 250,
		height: 350,
	},
];
---

<Image3 images={images} shadow="xl" />

spacing

图片间距，可选值：sm、md、lg。

左侧图片
中间图片
右侧图片
左侧图片
中间图片
右侧图片
左侧图片
中间图片
右侧图片
---



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

const images = [
	{
		src: getProductImage({ width: 250, height: 350, tag: "spacing-sm-left" }),
		alt: "左侧图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "spacing-sm-center" }),
		alt: "中间图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "spacing-sm-right" }),
		alt: "右侧图片",
		width: 250,
		height: 350,
	},
];
---

<Image3 images={images} spacing="sm" />

---



/**
 * @component Image3Basic
 * @description Image3 组件基础示例
 */
import { getProductImage, Image3 } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 250, height: 350, tag: "image3-left" }),
		alt: "左侧图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "image3-center" }),
		alt: "中间图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "image3-right" }),
		alt: "右侧图片",
		width: 250,
		height: 350,
	},
];
---

<Image3 images={images} />

---



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

const images = [
	{
		src: getProductImage({ width: 250, height: 350, tag: "spacing-lg-left" }),
		alt: "左侧图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "spacing-lg-center" }),
		alt: "中间图片",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "spacing-lg-right" }),
		alt: "右侧图片",
		width: 250,
		height: 350,
	},
];
---

<Image3 images={images} spacing="lg" />

错误处理

当传递的图片数量不是3张时，组件会显示错误视图提示用户。

⚠️

图片数量错误

Image3 组件需要 exactly 3 张图片，当前提供了 0 张图片

<Image3 images=图片1图片2图片3 />
⚠️

图片数量错误

Image3 组件需要 exactly 3 张图片，当前提供了 2 张图片

<Image3 images=图片1图片2图片3 />
⚠️

图片数量错误

Image3 组件需要 exactly 3 张图片，当前提供了 4 张图片

<Image3 images=图片1图片2图片3 />
⚠️

图片数量错误

Image3 组件需要 exactly 3 张图片，当前提供了 0 张图片

<Image3 images=图片1图片2图片3 />
---



/**
 * @component Image3ErrorEmpty
 * @description Image3 组件空图片数组错误示例
 */
import { Image3 } from "@coffic/cosy-ui";

const images = [] as any;
---

<Image3 images={images} />

---



/**
 * @component Image3ErrorTooFew
 * @description Image3 组件图片数量不足错误示例
 */
import { getProductImage, Image3 } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 250, height: 350, tag: "error-few-1" }),
		alt: "图片 1",
		width: 250,
		height: 300,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "error-few-2" }),
		alt: "图片 2",
		width: 250,
		height: 300,
	},
	// 故意只提供2张图片，触发错误视图
] as any;
---

<Image3 images={images} />

---



/**
 * @component Image3ErrorTooMany
 * @description Image3 组件图片数量过多错误示例
 */
import { getProductImage, Image3 } from "@coffic/cosy-ui";

const images = [
	{
		src: getProductImage({ width: 250, height: 350, tag: "error-many-1" }),
		alt: "图片 1",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "error-many-2" }),
		alt: "图片 2",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "error-many-3" }),
		alt: "图片 3",
		width: 250,
		height: 350,
	},
	{
		src: getProductImage({ width: 250, height: 350, tag: "error-many-4" }),
		alt: "图片 4",
		width: 250,
		height: 350,
	},
	// 故意提供4张图片，触发错误视图
] as any;
---

<Image3 images={images} />

---



/**
 * @component Image3ErrorNull
 * @description Image3 组件 null 图片数组错误示例
 */
import { Image3 } from "@coffic/cosy-ui";

const images = null as any;
---

<Image3 images={images} />

搜索