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} />