Products
Products 组件是 ProductCard 的容器集合，用于展示多个产品卡片。支持网格和列表两种布局模式，并提供多种配置选项以适应不同场景需求。
基础用法
---
/**
* @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} />
网格布局
---
/**
* @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}
/>
列表布局
---
/**
* @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} />
自定义卡片尺寸和间距
---
/**
* @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} />