ProductCard

简介

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

案例

示例产品 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 链接地址，用于跳转到 App Store 应用页面。

示例产品 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

按钮布局方向，支持水平（row）和垂直（column）两种布局方式。

示例产品 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

自定义 CSS 类名，用于覆盖默认样式。

示例产品 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 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

描述文本的最大显示行数，超出部分会被截断。

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

是否启用等高卡片，在网格布局中确保所有卡片高度一致。

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

GitHub 按钮的显示文本。

示例产品 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 仓库链接地址。

示例产品 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

示例产品

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

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 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

主按钮（产品官网按钮）的显示文本。

示例产品 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 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

次按钮（App Store 按钮）的显示文本。

示例产品 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

卡片阴影样式，提供 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

卡片尺寸，支持 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>