Image3
A component that displays three images with the center image upright and side images tilted, creating a dynamic visual effect.
Case
Props
background
Sets the background color of the container. For detailed usage, refer to the Container component.
---
/**
* @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
Custom CSS class name for adding additional styles.
images
Image data array, must contain three images, each containing src, alt and other properties.
rounded
Image border radius, optional values: none, sm, md, lg, xl, 2xl, 3xl, full.
shadow
Image shadow, optional values: 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
Image spacing, optional values: 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" />
Error Handling
When the number of images passed is not exactly 3, the component will display an error view to prompt the user.
⚠️
图片数量错误
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} />