astro
products
Products
Introduction
The Products component is a container for ProductCard, used to display multiple product cards. The component automatically adjusts its layout based on the parent container size, ensuring that product cards are neatly arranged at any viewport size. It supports both grid and list layouts, and provides various configuration options to suit different scenarios.
Features
- Responsive Layout - Automatically adapts to parent container size for optimal display on different devices
- Flexible Configuration - Provides multiple layout options, spacing settings, and alignment methods
- Unified Display - Ensures visual consistency of all product cards with equal height options
- Performance Optimization - Supports lazy loading and pagination for displaying large numbers of products
Examples
Props
cardSize
Card size, applied to all ProductCard components.
---
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
Whether to center items, controls whether all cards in grid layout are centered.
---
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
Custom class name for adding additional styles.
---
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
Column configuration, can be a fixed number or responsive object.
---
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
Maximum number of lines for description text, applied to all ProductCard components.
---
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
Whether to enable equal height cards, ensuring all cards have consistent height.
---
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
Card spacing, controls the spacing between product cards.
---
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
Layout type, supports both grid and list layout modes.
---
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
Vertical margin, controls the top and bottom margin of the Products component.
---
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
Product data array, containing all product information to be displayed.
---
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
Whether to show container border, controls the border display of the Products component container.
---
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} />