astro
products
Products
简介
Products 组件是 ProductCard 的容器集合，用于展示多个产品卡片。组件会自动根据父容器大小调整布局，确保在任何视口大小下都能整齐排列产品卡片。支持网格和列表两种布局模式，并提供多种配置选项以适应不同场景需求。
特性
- 响应式布局 - 自动适应父容器大小，在不同设备上呈现最佳效果
- 灵活配置 - 提供多种布局选项、间距设置和对齐方式
- 统一展示 - 确保所有产品卡片视觉一致，提供等高选项
- 性能优化 - 支持懒加载和分页显示大量产品
案例
Props
cardSize
卡片尺寸，应用于所有 ProductCard。
---
import { getProductImage, Products } from "@coffic/cosy-ui";
const products = [
{
name: "产品1",
image: getProductImage({ width: 400, height: 300, tag: "product1" }),
description: "这是产品1的描述",
productUrl: "https://product1.com",
},
{
name: "产品2",
image: getProductImage({ width: 400, height: 300, tag: "product2" }),
description: "这是产品2的描述",
appStoreUrl: "https://apps.apple.com/app/product2",
},
];
---
<Products products={products} cardSize="sm" />
centerItems
是否居中显示，控制网格布局中所有卡片是否居中显示。
---
import { getProductImage, Products } from "@coffic/cosy-ui";
const products = [
{
name: "产品1",
image: getProductImage({ width: 400, height: 300, tag: "product1" }),
description: "这是产品1的描述",
productUrl: "https://product1.com",
},
{
name: "产品2",
image: getProductImage({ width: 400, height: 300, tag: "product2" }),
description: "这是产品2的描述",
appStoreUrl: "https://apps.apple.com/app/product2",
},
];
---
<Products products={products} centerItems={true} />
class
自定义类名，用于添加额外的样式。
---
import { getProductImage, Products } from "@coffic/cosy-ui";
const products = [
{
name: "产品1",
image: getProductImage({ width: 400, height: 300, tag: "product1" }),
description: "这是产品1的描述",
productUrl: "https://product1.com",
},
{
name: "产品2",
image: getProductImage({ width: 400, height: 300, tag: "product2" }),
description: "这是产品2的描述",
appStoreUrl: "https://apps.apple.com/app/product2",
},
];
---
<Products products={products} class="custom-products" />
columns
列数配置，可以为固定数字或响应式对象。
---
import { getProductImage, Products } from "@coffic/cosy-ui";
const products = [
{
name: "产品1",
image: getProductImage({ width: 400, height: 300, tag: "product1" }),
description: "这是产品1的描述",
productUrl: "https://product1.com",
},
{
name: "产品2",
image: getProductImage({ width: 400, height: 300, tag: "product2" }),
description: "这是产品2的描述",
appStoreUrl: "https://apps.apple.com/app/product2",
},
{
name: "产品3",
image: getProductImage({ width: 400, height: 300, tag: "product3" }),
description: "这是产品3的描述",
productUrl: "https://product3.com",
},
];
---
<Products products={products} columns={{ base: 1, sm: 2, md: 3 }} />
descriptionLines
描述文本的最大行数，应用于所有 ProductCard。
---
import { getProductImage, Products } from "@coffic/cosy-ui";
const products = [
{
name: "产品1",
image: getProductImage({ width: 400, height: 300, tag: "product1" }),
description:
"这是产品1的详细描述，包含更多信息以便展示描述行数限制的效果。",
productUrl: "https://product1.com",
},
{
name: "产品2",
image: getProductImage({ width: 400, height: 300, tag: "product2" }),
description:
"这是产品2的详细描述，同样包含更多信息以便展示描述行数限制的效果。",
appStoreUrl: "https://apps.apple.com/app/product2",
},
];
---
<Products products={products} descriptionLines={2} />
equalHeight
是否启用等高卡片，确保所有卡片高度一致。
---
import { getProductImage, Products } from "@coffic/cosy-ui";
const products = [
{
name: "产品1",
image: getProductImage({ width: 400, height: 300, tag: "product1" }),
description: "这是产品1的简短描述",
productUrl: "https://product1.com",
},
{
name: "产品2",
image: getProductImage({ width: 400, height: 300, tag: "product2" }),
description:
"这是产品2的详细描述，包含更多信息以便展示等高卡片的效果。这个描述比较长，用来测试等高功能。",
appStoreUrl: "https://apps.apple.com/app/product2",
},
];
---
<Products products={products} equalHeight={true} />
gap
卡片间距，控制产品卡片之间的间距大小。
---
import { getProductImage, Products } from "@coffic/cosy-ui";
const products = [
{
name: "产品1",
image: getProductImage({ width: 400, height: 300, tag: "product1" }),
description: "这是产品1的描述",
productUrl: "https://product1.com",
},
{
name: "产品2",
image: getProductImage({ width: 400, height: 300, tag: "product2" }),
description: "这是产品2的描述",
appStoreUrl: "https://apps.apple.com/app/product2",
},
];
---
<Products products={products} gap="lg" />
layout
布局类型，支持网格和列表两种布局模式。
---
import { getProductImage, Products } from "@coffic/cosy-ui";
const products = [
{
name: "产品1",
image: getProductImage({ width: 400, height: 300, tag: "product1" }),
description: "这是产品1的描述",
productUrl: "https://product1.com",
},
{
name: "产品2",
image: getProductImage({ width: 400, height: 300, tag: "product2" }),
description: "这是产品2的描述",
appStoreUrl: "https://apps.apple.com/app/product2",
},
];
---
<Products products={products} layout="list" />
margin
上下外边距，控制 Products 组件整体的上下外边距。
---
import { getProductImage, Products } from "@coffic/cosy-ui";
const products = [
{
name: "产品1",
image: getProductImage({ width: 400, height: 300, tag: "product1" }),
description: "这是产品1的描述",
productUrl: "https://product1.com",
},
{
name: "产品2",
image: getProductImage({ width: 400, height: 300, tag: "product2" }),
description: "这是产品2的描述",
appStoreUrl: "https://apps.apple.com/app/product2",
},
];
---
<Products products={products} margin="lg" />
products
产品数据数组，包含所有要展示的产品信息。
---
import { getProductImage, Products } from "@coffic/cosy-ui";
const products = [
{
name: "产品1",
image: getProductImage({ width: 400, height: 300, tag: "product1" }),
description: "这是产品1的描述",
productUrl: "https://product1.com",
},
{
name: "产品2",
image: getProductImage({ width: 400, height: 300, tag: "product2" }),
description: "这是产品2的描述",
appStoreUrl: "https://apps.apple.com/app/product2",
},
{
name: "产品3",
image: getProductImage({ width: 400, height: 300, tag: "product3" }),
description: "这是产品3的描述",
productUrl: "https://product3.com",
},
];
---
<Products products={products} />
showBorder
是否显示容器边框，控制 Products 组件整体容器的边框显示。
---
import { getProductImage, Products } from "@coffic/cosy-ui";
const products = [
{
name: "产品1",
image: getProductImage({ width: 400, height: 300, tag: "product1" }),
description: "这是产品1的描述",
productUrl: "https://product1.com",
},
{
name: "产品2",
image: getProductImage({ width: 400, height: 300, tag: "product2" }),
description: "这是产品2的描述",
appStoreUrl: "https://apps.apple.com/app/product2",
},
];
---
<Products products={products} showBorder={true} />