ProductCard

Introduction

The ProductCard component is used to display product information, including product name, image, description, App Store link, and product website link. The component features a card design with hover effects and provides links to product-related pages.

Examples

示例产品 product image

示例产品

这是一款功能强大的示例产品，为用户提供优质体验。

import { ProductCard } from '@coffic/cosy-ui';

<ProductCard
  title="产品名称"
  description="产品描述信息"
  price="¥99.00"
  image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500"
  href="/products/1"
/>

Props

appStoreUrl

App Store link URL for redirecting to the App Store application page.

示例产品 product image

示例产品

这是一款功能强大的示例产品，为用户提供优质体验。

import { ProductCard } from '@coffic/cosy-ui';

<ProductCard
  title="产品名称"
  description="产品描述信息"
  price="¥99.00"
  image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500"
  href="/products/1"
/>

buttonLayout

Button layout direction, supporting horizontal (row) and vertical (column) layouts.

示例产品 product image

示例产品

这是一款功能强大的示例产品，为用户提供优质体验。

import { ProductCard } from '@coffic/cosy-ui';

<ProductCard
  title="产品名称"
  description="产品描述信息"
  price="¥99.00"
  image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500"
  href="/products/1"
/>

class

Custom CSS class name for overriding default styles.

示例产品 product image

示例产品

这是一款功能强大的示例产品，为用户提供优质体验。

import { ProductCard } from '@coffic/cosy-ui';

<ProductCard
  title="产品名称"
  description="产品描述信息"
  price="¥99.00"
  image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500"
  href="/products/1"
/>

description

Product description text, supporting multi-line display.

示例产品 product image

示例产品

这是一款功能强大的示例产品，为用户提供优质体验。

import { ProductCard } from '@coffic/cosy-ui';

<ProductCard
  title="产品名称"
  description="产品描述信息"
  price="¥99.00"
  image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500"
  href="/products/1"
/>

descriptionLines

Maximum display lines for description text, with overflow content being truncated.

默认行数限制 product image

默认行数限制

默认情况下，描述文本会根据卡片尺寸自动限制行数。例如中等尺寸(md)卡片默认显示3行文本。这段文本很长，但只会显示前几行，其余部分会被截断。

自定义行数限制 product image

自定义行数限制

通过设置descriptionLines=2，可以将描述文本限制为最多显示2行。这段文本很长，但只会显示2行，其余部分会被截断。

---
import { ProductCard, getExampleImage } from '@coffic/cosy-ui';
---

<div class="cosy:grid cosy:grid-cols-2 cosy:gap-4">
  <ProductCard
    size="md"
    name="默认行数限制"
    image={getExampleImage({ width: 300, height: 200 })}
    description="默认情况下，描述文本会根据卡片尺寸自动限制行数。例如中等尺寸(md)卡片默认显示3行文本。这段文本很长，但只会显示前几行，其余部分会被截断。"
    productUrl="https://example.com/product3"
  />
  <ProductCard
    size="md"
    descriptionLines={2}
    name="自定义行数限制"
    image={getExampleImage({ width: 300, height: 200 })}
    description="通过设置descriptionLines=2，可以将描述文本限制为最多显示2行。这段文本很长，但只会显示2行，其余部分会被截断。"
    productUrl="https://example.com/product4"
  />
</div>

equalHeight

Whether to enable equal height cards, ensuring consistent height for all cards in grid layouts.

产品一 product image

产品一

这是一段很短的产品描述。

产品二 product image

产品二

这是一段较长的产品描述，包含更多详细信息，可能会导致卡片高度增加。使用equalHeight属性可以确保所有卡片高度一致。

访问官网 App Store

---
import { ProductCard, getExampleImage } from '@coffic/cosy-ui';
---

<div class="cosy:grid cosy:grid-cols-2 cosy:gap-4">
  <ProductCard
    equalHeight
    size="md"
    name="产品一"
    image={getExampleImage({ width: 300, height: 200 })}
    description="这是一段很短的产品描述。"
    productUrl="https://example.com/product1"
  />
  <ProductCard
    equalHeight
    size="md"
    name="产品二"
    image={getExampleImage({ width: 300, height: 200 })}
    description="这是一段较长的产品描述，包含更多详细信息，可能会导致卡片高度增加。使用equalHeight属性可以确保所有卡片高度一致。"
    productUrl="https://example.com/product2"
    appStoreUrl="https://apps.apple.com/app/product2"
  />
</div>

githubButtonText

Display text for the GitHub button.

示例产品 product image

示例产品

这是一款功能强大的示例产品，为用户提供优质体验。

import { ProductCard } from '@coffic/cosy-ui';

<ProductCard
  title="产品名称"
  description="产品描述信息"
  price="¥99.00"
  image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500"
  href="/products/1"
/>

githubUrl

GitHub repository link URL.

示例产品 product image

示例产品

这是一款功能强大的示例产品，为用户提供优质体验。

import { ProductCard } from '@coffic/cosy-ui';

<ProductCard
  title="产品名称"
  description="产品描述信息"
  price="¥99.00"
  image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500"
  href="/products/1"
/>

image

Product image, supporting multiple image source formats.

示例产品 product image

示例产品

这是一款功能强大的示例产品，为用户提供优质体验。

import { ProductCard } from '@coffic/cosy-ui';

<ProductCard
  title="产品名称"
  description="产品描述信息"
  price="¥99.00"
  image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500"
  href="/products/1"
/>

name

Product name, required property.

示例产品 product image

示例产品

这是一款功能强大的示例产品，为用户提供优质体验。

import { ProductCard } from '@coffic/cosy-ui';

<ProductCard
  title="产品名称"
  description="产品描述信息"
  price="¥99.00"
  image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500"
  href="/products/1"
/>

primaryButtonText

Display text for the primary button (product website button).

示例产品 product image

示例产品

这是一款功能强大的示例产品，为用户提供优质体验。

import { ProductCard } from '@coffic/cosy-ui';

<ProductCard
  title="产品名称"
  description="产品描述信息"
  price="¥99.00"
  image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500"
  href="/products/1"
/>

productUrl

Product website link URL.

示例产品 product image

示例产品

这是一款功能强大的示例产品，为用户提供优质体验。

import { ProductCard } from '@coffic/cosy-ui';

<ProductCard
  title="产品名称"
  description="产品描述信息"
  price="¥99.00"
  image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500"
  href="/products/1"
/>

secondaryButtonText

Display text for the secondary button (App Store button).

示例产品 product image

示例产品

这是一款功能强大的示例产品，为用户提供优质体验。

import { ProductCard } from '@coffic/cosy-ui';

<ProductCard
  title="产品名称"
  description="产品描述信息"
  price="¥99.00"
  image="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=500"
  href="/products/1"
/>

shadow

Card shadow style, providing five style options: none, sm, md, lg, xl.

大阴影产品 product image

大阴影产品

使用大阴影突出显示的产品。

无阴影产品 product image

无阴影产品

无阴影的简洁风格。

---
import { ProductCard, getExampleImage } from '@coffic/cosy-ui';
---

<ProductCard
  name="大阴影产品"
  image={getExampleImage({ width: 300, height: 200 })}
  description="使用大阴影突出显示的产品。"
  productUrl="https://example.com/product"
  shadow="lg"
/>

<ProductCard
  name="无阴影产品"
  image={getExampleImage({ width: 300, height: 200 })}
  description="无阴影的简洁风格。"
  productUrl="https://example.com/product"
  shadow="none"
/>

size

Card size, supporting five preset sizes: xs, sm, md, lg, xl.

超小尺寸产品 product image

超小尺寸产品

小巧精致的产品卡片，节省空间。

小尺寸产品 product image

小尺寸产品

紧凑型产品卡片，适合在列表中展示。

中等尺寸产品 product image

中等尺寸产品

标准产品卡片，平衡信息展示和空间占用。

大尺寸产品 product image

大尺寸产品

大尺寸产品卡片，提供更多细节和视觉吸引力，适合突出展示重要产品。

超大尺寸产品 product image

超大尺寸产品

超大尺寸产品卡片，提供最佳视觉体验和完整信息展示，适合特色产品或首页展示。

访问官网 App Store

---
import { ProductCard, getExampleImage } from '@coffic/cosy-ui';
---

<div class="cosy:flex cosy:gap-4 cosy:flex-wrap">
  <ProductCard
    size="xs"
    name="超小尺寸产品"
    image={getExampleImage({ width: 150, height: 100 })}
    description="小巧精致的产品卡片，节省空间。"
    productUrl="https://example.com/xs"
  />
  <ProductCard
    size="sm"
    name="小尺寸产品"
    image={getExampleImage({ width: 150, height: 100 })}
    description="紧凑型产品卡片，适合在列表中展示。"
    productUrl="https://example.com/sm"
  />
  <ProductCard
    size="md"
    name="中等尺寸产品"
    image={getExampleImage({ width: 300, height: 200 })}
    description="标准产品卡片，平衡信息展示和空间占用。"
    productUrl="https://example.com/md"
  />
  <ProductCard
    size="lg"
    name="大尺寸产品"
    image={getExampleImage({ width: 380, height: 253 })}
    description="大尺寸产品卡片，提供更多细节和视觉吸引力，适合突出展示重要产品。"
    productUrl="https://example.com/lg"
  />
  <ProductCard
    size="xl"
    name="超大尺寸产品"
    image={getExampleImage({ width: 480, height: 320 })}
    description="超大尺寸产品卡片，提供最佳视觉体验和完整信息展示，适合特色产品或首页展示。"
    productUrl="https://example.com/xl"
    appStoreUrl="https://apps.apple.com/app/example-xl"
  />
</div>