logo
简体中文

导航菜单

文档

astro
product
hero
item
apple-style
display

ProductHero

简介

ProductHero 组件用于展示单个产品的详细信息，采用苹果风格的大图展示设计。支持左右交替布局、标签数组、价格显示和操作按钮。适用于产品详情页、产品展示页面等场景。

组件特性：

  • 大图展示 - 突出产品图片，采用高质量大图展示
  • 交替布局 - 支持左右交替布局，增加视觉层次
  • 信息层次 - 清晰的信息层次：标签、标题、描述、价格、按钮
  • 苹果风格 - 采用苹果官网的简洁、优雅设计风格
  • 响应式设计 - 在不同设备上都能良好展示

案例

新品

极简手机

纯净体验，回归本质

¥6,999

极简手机

Props

align

布局对齐方式，支持 left（左对齐，默认）和 right（右对齐）。

极简手机

纯净体验，回归本质

极简手机

极简手机

纯净体验，回归本质

极简手机
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  align="left"
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  align="right"
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

background

背景色类型，使用预定义的背景色类型，如 ‘primary’, ‘base-200’, ‘gradient-sky’ 等，默认为 ‘base-100’。

极简手机

纯净体验，回归本质

极简手机

极简手机

纯净体验，回归本质

极简手机

极简手机

纯净体验，回归本质

极简手机
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  background="base-100"
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  background="base-200"
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  background="primary/10"
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

class

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

极简手机

纯净体验，回归本质

极简手机

极简手机

纯净体验，回归本质

极简手机
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";

// 示例产品数据
const product = {
	name: "极简手机",
	description: "纯净体验，回归本质",
	image: getProductImage({
		width: 800,
		height: 600,
		tag: "minimal-phone",
		provider: "picsum",
	}),
	price: "¥6,999",
	isNew: true,
};
---

<div style="border: 2px solid #3b82f6; border-radius: 0.5rem; padding: 1rem;">
  <ProductHero
    name={product.name}
    description={product.description}
    image={product.image}
    price={product.price}
    isNew={product.isNew}
    buyNowText="立即购买"
    learnMoreText="了解更多"
    newLabelText="新品"
  />
</div>

description

产品描述，必填属性。

极简手机

纯净体验，回归本质

极简手机

极简手机

纯净体验，回归本质。采用最新技术，提供无与伦比的用户体验，让科技回归本质。

极简手机
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质。采用最新技术，提供无与伦比的用户体验，让科技回归本质。"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

image

产品图片，必填属性。支持 ImageSource 类型。

极简手机

纯净体验，回归本质

极简手机

极简手机

纯净体验，回归本质

极简手机
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'smart-watch',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

labels

标签数组，传入一个或多个字符串作为标签。

新品
热卖

极简手机

纯净体验，回归本质

¥6,999

极简手机
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'labels-demo',
    provider: 'picsum',
  })}
  highlight="¥6,999"
  labels={['新品', '热卖']}
/>

name

产品名称，必填属性。

极简手机

纯净体验，回归本质

极简手机

极简手机 Pro Max

纯净体验，回归本质

极简手机 Pro Max
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机 Pro Max"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'minimal-phone',
    provider: 'picsum',
  })}
  price="¥6,999"
  isNew={true}
  buyNowText="立即购买"
  learnMoreText="了解更多"
  newLabelText="新品"
/>

highlight

高亮文案（如价格、宣传语等），可选属性；未提供时隐藏该行。

新品

极简手机

纯净体验，回归本质

¥6,999

极简手机
---



import { getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'highlight-demo',
    provider: 'picsum',
  })}
  highlight="¥6,999"
  labels={['新品']}
/>

Slots

actions

自定义操作区内容（如按钮组），渲染在描述与图片下方。

热卖

极简手机

纯净体验，回归本质

¥5,999

极简手机
---



import { Button, getProductImage, ProductHero } from "@coffic/cosy-ui";
---

<ProductHero
  name="极简手机"
  description="纯净体验，回归本质"
  image={getProductImage({
    width: 800,
    height: 600,
    tag: 'actions-demo',
    provider: 'picsum',
  })}
  labels={['热卖']}
  highlight="¥5,999">
  <div slot="actions" style="display:flex; gap: 1rem;">
    <Button variant="primary">立即购买</Button>
    <Button variant="outline">了解更多</Button>
  </div>
</ProductHero>

搜索