导航

ProductCard 产品卡片

ProductCard 组件用于展示产品信息，包括产品名称、图片、描述、App Store链接和产品官网链接。组件采用卡片式设计，支持悬停效果，并提供链接到产品相关页面的功能。

特性

🎨 多种尺寸：支持 xs、sm、md、lg、xl 五种预设尺寸
🎯 灵活布局：支持水平和垂直按钮布局
🌟 自定义阴影：提供 none、sm、md、lg、xl 五种阴影样式
📏 等高卡片：支持在网格布局中保持统一高度
📝 文本控制：可控制描述文本的最大显示行数
🔗 多链接支持：支持产品官网、App Store、GitHub 等多种链接
🎭 悬停效果：提供平滑的悬停动画和阴影变化

基础用法

示例产品 product image

示例产品

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

<ProductCard
  name="示例产品"
  image={getExampleImage({ width: 300, height: 200 })}
  description="这是一款功能强大的示例产品，为用户提供优质体验。"
  productUrl="https://example.com/product"
/>

尺寸选项

ProductCard 支持五种预设尺寸，适应不同的展示需求：

超小尺寸产品 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>

阴影样式

通过 shadow 属性可以自定义卡片的阴影效果：

大阴影产品 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"
/>

等高卡片

在网格布局中使用 equalHeight 属性可以确保所有卡片高度一致：

产品一 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>

描述文本控制

使用 descriptionLines 属性可以控制描述文本的最大显示行数：

默认行数限制 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>

API 参考

Props

属性	类型	默认值	描述
`name`	`string`	-	产品名称（必填）
`image`	`ImageSource`	-	产品图片（必填）
`description`	`string`	-	产品描述（必填）
`appStoreUrl`	`string`	-	App Store链接
`productUrl`	`string`	-	产品官网链接
`githubUrl`	`string`	-	GitHub仓库链接
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	卡片尺寸
`primaryButtonText`	`string`	`'访问官网'`	主按钮文本
`secondaryButtonText`	`string`	`'App Store'`	次按钮文本
`githubButtonText`	`string`	`'GitHub'`	GitHub按钮文本
`buttonLayout`	`'row' \| 'column'`	`'row'`	按钮布局方向
`equalHeight`	`boolean`	`false`	是否启用等高卡片
`descriptionLines`	`number`	-	描述文本的最大行数
`shadow`	`'none' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	卡片阴影样式
`class`	`string`	-	自定义类名

尺寸说明

尺寸	宽度	高度	适用场景
`xs`	200px	280px	密集布局，列表展示
`sm`	250px	360px	小尺寸展示
`md`	320px	450px	标准展示（默认）
`lg`	400px	550px	突出显示
`xl`	500px	650px	特色产品展示

阴影样式

样式	描述
`none`	无阴影，简洁风格
`sm`	小阴影，轻微立体感
`md`	中等阴影（默认）
`lg`	大阴影，突出显示
`xl`	超大阴影，强烈立体感

使用示例

基础产品卡片

<ProductCard
  name="产品名称"
  image="/images/products/product1.jpg"
  description="产品简短描述文本"
  productUrl="https://product-website.com"
/>

包含App Store链接

<ProductCard
  name="产品名称"
  image="/images/products/product1.jpg"
  description="产品简短描述文本"
  appStoreUrl="https://apps.apple.com/app/product"
  productUrl="https://product-website.com"
/>

自定义尺寸和阴影

<ProductCard
  size="lg"
  shadow="xl"
  name="突出显示的产品"
  image="/images/products/product1.jpg"
  description="使用大尺寸和大阴影突出显示的产品"
  productUrl="https://product-website.com"
/>

网格布局中的等高卡片

<div class="cosy:gap-4 cosy:grid cosy:grid-cols-3">
  <ProductCard
    equalHeight
    name="产品1"
    image="/images/products/product1.jpg"
    description="产品描述文本"
  />
  <ProductCard
    equalHeight
    name="产品2"
    image="/images/products/product2.jpg"
    description="另一个产品的描述"
  />
</div>

垂直按钮布局

<ProductCard
  buttonLayout="column"
  name="产品名称"
  image="/images/products/product1.jpg"
  description="产品描述"
  appStoreUrl="https://apps.apple.com/app/product"
  productUrl="https://product-website.com"
  githubUrl="https://github.com/product"
/>

控制描述行数

<ProductCard
  descriptionLines={2}
  name="产品名称"
  image="/images/products/product1.jpg"
  description="这是一个很长的产品描述，可能会超过两行，但会被截断显示"
  productUrl="https://product-website.com"
/>