Products
The Products component is a container for ProductCard, used to display multiple product cards. It supports both grid and list layouts, and provides various configuration options to suit different scenarios.
Basic Usage
---
/**
* @component ProductsBasic
* @description Products 组件基础用法示例
*/
import { Products } from '@coffic/cosy-ui';
const products = [
{
name: '产品1',
image: 'https://picsum.photos/200/140?random=1',
description: '产品1描述',
productUrl: 'https://product1.com',
},
{
name: '产品2',
image: 'https://picsum.photos/200/140?random=2',
description: '产品2描述',
appStoreUrl: 'https://apps.apple.com/app/product2',
},
];
---
<Products products={products} />
Grid Layout
---
/**
* @component ProductsGrid
* @description Products 组件网格布局示例
*/
import { Products } from '@coffic/cosy-ui';
const products = [
{
name: '产品1',
image: 'https://picsum.photos/200/140?random=1',
description: '产品1描述',
productUrl: 'https://product1.com',
},
{
name: '产品2',
image: 'https://picsum.photos/200/140?random=2',
description: '产品2描述',
appStoreUrl: 'https://apps.apple.com/app/product2',
},
{
name: '产品3',
image: 'https://picsum.photos/200/140?random=3',
description: '产品3描述',
productUrl: 'https://product3.com',
},
{
name: '产品4',
image: 'https://picsum.photos/200/140?random=4',
description: '产品4描述',
appStoreUrl: 'https://apps.apple.com/app/product4',
},
];
---
<Products
layout="grid"
columns={{ base: 1, sm: 2, md: 3, lg: 4 }}
products={products}
/>
List Layout
---
/**
* @component ProductsList
* @description Products 组件列表布局示例
*/
import { Products } from '@coffic/cosy-ui';
const products = [
{
name: '产品1',
image: 'https://picsum.photos/200/140?random=1',
description: '产品1描述',
productUrl: 'https://product1.com',
},
{
name: '产品2',
image: 'https://picsum.photos/200/140?random=2',
description: '产品2描述',
appStoreUrl: 'https://apps.apple.com/app/product2',
},
];
---
<Products layout="list" products={products} />
Custom Card Size and Spacing
---
/**
* @component ProductsCustom
* @description Products 组件自定义卡片尺寸和间距示例
*/
import { Products } from '@coffic/cosy-ui';
const products = [
{
name: '产品1',
image: 'https://picsum.photos/200/140?random=1',
description: '产品1描述',
productUrl: 'https://product1.com',
},
{
name: '产品2',
image: 'https://picsum.photos/200/140?random=2',
description: '产品2描述',
appStoreUrl: 'https://apps.apple.com/app/product2',
},
];
---
<Products cardSize="sm" gap="lg" products={products} />
Show Container Border
---
/**
* @component ProductsWithBorder
* @description Products 组件带容器边框示例
*/
import { Products } from '@coffic/cosy-ui';
const products = [
{
name: '产品1',
image: 'https://picsum.photos/200/140?random=1',
description: '产品1描述',
productUrl: 'https://product1.com',
},
{
name: '产品2',
image: 'https://picsum.photos/200/140?random=2',
description: '产品2描述',
appStoreUrl: 'https://apps.apple.com/app/product2',
},
{
name: '产品3',
image: 'https://picsum.photos/200/140?random=3',
description: '产品3描述',
githubUrl: 'https://github.com/product3',
},
];
---
<Products products={products} showBorder={true} />
Set Vertical Margin
---
/**
* @component ProductsWithMargin
* @description Products 组件带外边距示例
*/
import { Products } from '@coffic/cosy-ui';
const products = [
{
name: '产品1',
image: 'https://picsum.photos/200/140?random=1',
description: '产品1描述',
productUrl: 'https://product1.com',
},
{
name: '产品2',
image: 'https://picsum.photos/200/140?random=2',
description: '产品2描述',
appStoreUrl: 'https://apps.apple.com/app/product2',
},
{
name: '产品3',
image: 'https://picsum.photos/200/140?random=3',
description: '产品3描述',
githubUrl: 'https://github.com/product3',
},
];
---
<div class="cosy:bg-base-100 cosy:p-4">
<h3 class="cosy:text-lg cosy:font-bold cosy:mb-4">上方内容</h3>
<Products products={products} margin="lg" />
<h3 class="cosy:text-lg cosy:font-bold cosy:mt-4">下方内容</h3>
</div>