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} />
显示容器边框
---
/**
* @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} />
设置上下外边距
---
/**
* @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>