Products
基础用法
最基本的产品集合展示，自动根据屏幕尺寸调整布局
<Products
products={[
{
name: "产品1",
image: "/images/products/product1.jpg",
description: "这是一款功能强大的示例产品，为用户提供优质体验。",
productUrl: "https://example.com/product1"
},
{
name: "产品2",
image: "/images/products/product2.jpg",
description: "另一款出色的产品，具有创新功能和直观界面。",
productUrl: "https://example.com/product2"
}
]}
/>网格布局
使用网格布局展示产品，并自定义列数
<Products
layout="grid"
columns={{ base: 1, sm: 2, md: 3, lg: 4 }}
products={[
{
name: "产品1",
image: "/images/products/product1.jpg",
description: "这是一款功能强大的示例产品，为用户提供优质体验。",
productUrl: "https://example.com/product1"
},
{
name: "产品2",
image: "/images/products/product2.jpg",
description: "另一款出色的产品，具有创新功能和直观界面。",
productUrl: "https://example.com/product2"
},
{
name: "产品3",
image: "/images/products/product3.jpg",
description: "第三款优秀产品，满足用户多样化需求。",
productUrl: "https://example.com/product3"
}
]}
/>列表布局
使用列表布局垂直展示产品
<Products
layout="list"
products={[
{
name: "产品1",
image: "/images/products/product1.jpg",
description: "这是一款功能强大的示例产品，为用户提供优质体验。",
productUrl: "https://example.com/product1"
},
{
name: "产品2",
image: "/images/products/product2.jpg",
description: "另一款出色的产品，具有创新功能和直观界面。",
productUrl: "https://example.com/product2"
}
]}
/>自定义卡片尺寸和间距
通过设置卡片尺寸和间距，调整产品展示效果
<Products
cardSize="sm"
gap="lg"
products={[
{
name: "产品1",
image: "/images/products/product1.jpg",
description: "这是一款功能强大的示例产品，为用户提供优质体验。",
productUrl: "https://example.com/product1"
},
{
name: "产品2",
image: "/images/products/product2.jpg",
description: "另一款出色的产品，具有创新功能和直观界面。",
productUrl: "https://example.com/product2"
},
{
name: "产品3",
image: "/images/products/product3.jpg",
description: "第三款优秀产品，满足用户多样化需求。",
productUrl: "https://example.com/product3"
},
{
name: "产品4",
image: "/images/products/product4.jpg",
description: "第四款精品，提供卓越性能和用户体验。",
productUrl: "https://example.com/product4"
}
]}
/>