logo
简体中文

导航菜单

文档

astro
hero

Hero

简介

Hero 组件是一个全屏的展示区域，通常用于网站的首页或重要页面的顶部。它提供了一个引人注目的视觉区域，可以包含标题、描述、图片和行动按钮。

组件特性：

  • 支持多种内容对齐方式（左对齐、居中、右对齐）
  • 提供丰富的背景样式（纯色、渐变色、背景图片）
  • 支持图片展示，可设置不同位置
  • 提供多种遮罩效果，改善文本可读性
  • 支持毛玻璃效果，为文字区域添加半透明背景和模糊效果
  • 支持自定义内容插槽
  • 响应式设计，适配不同屏幕尺寸

案例

欢迎使用我们的产品

这是一个简短的描述，介绍产品的主要特点和价值。

开始使用了解更多

Props

align

内容对齐方式，支持左对齐、居中和右对齐。

左对齐标题

这是左对齐的 Hero 区域，内容靠左显示。

开始使用

居中对齐标题

这是居中对齐的 Hero 区域，内容居中显示。

开始使用

右对齐标题

这是右对齐的 Hero 区域，内容靠右显示。

开始使用
---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="左对齐标题"
  description="这是左对齐的 Hero 区域，内容靠左显示。"
  align="left"
  links={[{ text: '开始使用', href: '/getting-started' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="居中对齐标题"
  description="这是居中对齐的 Hero 区域，内容居中显示。"
  align="center"
  links={[{ text: '开始使用', href: '/getting-started' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="右对齐标题"
  description="这是右对齐的 Hero 区域，内容靠右显示。"
  align="right"
  links={[{ text: '开始使用', href: '/getting-started' }]}
/>

background

背景色类型，支持所有预设背景色和透明度变体，以及渐变色背景。

纯色背景

这个例子使用了纯色背景样式。

了解更多

主色背景

使用主色作为背景的 Hero 区域。

开始使用

次要色背景

使用次要色作为背景的 Hero 区域。

开始使用

强调色背景

使用强调色作为背景的 Hero 区域。

开始使用

成功色背景

使用成功色作为背景的 Hero 区域。

开始使用

警告色背景

使用警告色作为背景的 Hero 区域。

开始使用

错误色背景

使用错误色作为背景的 Hero 区域。

开始使用

主色透明度背景

使用主色透明度作为背景的 Hero 区域。

开始使用

成功色透明度背景

使用成功色透明度作为背景的 Hero 区域。

开始使用

强调色透明度背景

使用强调色透明度作为背景的 Hero 区域。

开始使用

渐变色背景

这个例子使用了渐变色背景样式。

了解更多

天空渐变

gradient-sky: 天空蓝紫渐变背景

了解更多

日落渐变

gradient-sunset: 日落橙红渐变背景

了解更多

森林渐变

gradient-forest: 森林绿渐变背景

了解更多

海洋渐变

gradient-ocean: 海洋蓝绿渐变背景

了解更多

山脉渐变

gradient-mountain: 山脉灰蓝渐变背景

了解更多

花瓣渐变

gradient-flower: 花瓣粉紫渐变背景

了解更多

西瓜渐变

gradient-watermelon: 西瓜绿粉红渐变背景

了解更多

柠檬渐变

gradient-lemon: 柠檬黄渐变背景

了解更多

葡萄渐变

gradient-grape: 葡萄紫渐变背景

了解更多

蓝莓渐变

gradient-blueberry: 蓝莓蓝渐变背景

了解更多

芒果渐变

gradient-mango: 芒果黄橙渐变背景

了解更多

奇异果渐变

gradient-kiwi: 奇异果绿渐变背景

了解更多

火龙果渐变

gradient-pitaya: 火龙果粉绿渐变背景

了解更多

香蕉渐变

gradient-banana: 香蕉黄渐变背景

了解更多
---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="纯色背景"
  description="这个例子使用了纯色背景样式。"
  background="plain"
  links={[{ text: '了解更多', href: '/about', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="主色背景"
  description="使用主色作为背景的 Hero 区域。"
  background="primary"
  links={[{ text: '开始使用', href: '/getting-started' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="次要色背景"
  description="使用次要色作为背景的 Hero 区域。"
  background="secondary"
  links={[{ text: '开始使用', href: '/getting-started' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="强调色背景"
  description="使用强调色作为背景的 Hero 区域。"
  background="accent"
  links={[{ text: '开始使用', href: '/getting-started' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="成功色背景"
  description="使用成功色作为背景的 Hero 区域。"
  background="success"
  links={[{ text: '开始使用', href: '/getting-started' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="警告色背景"
  description="使用警告色作为背景的 Hero 区域。"
  background="warning"
  links={[{ text: '开始使用', href: '/getting-started' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="错误色背景"
  description="使用错误色作为背景的 Hero 区域。"
  background="error"
  links={[{ text: '开始使用', href: '/getting-started' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="主色透明度背景"
  description="使用主色透明度作为背景的 Hero 区域。"
  background="primary/20"
  links={[{ text: '开始使用', href: '/getting-started' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="成功色透明度背景"
  description="使用成功色透明度作为背景的 Hero 区域。"
  background="success/30"
  links={[{ text: '开始使用', href: '/getting-started' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="强调色透明度背景"
  description="使用强调色透明度作为背景的 Hero 区域。"
  background="accent/50"
  links={[{ text: '开始使用', href: '/getting-started' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="渐变色背景"
  description="这个例子使用了渐变色背景样式。"
  background="gradient"
  links={[{ text: '了解更多', href: '/about', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="天空渐变"
  description="gradient-sky: 天空蓝紫渐变背景"
  background="gradient-sky"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="日落渐变"
  description="gradient-sunset: 日落橙红渐变背景"
  background="gradient-sunset"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="森林渐变"
  description="gradient-forest: 森林绿渐变背景"
  background="gradient-forest"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="海洋渐变"
  description="gradient-ocean: 海洋蓝绿渐变背景"
  background="gradient-ocean"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="山脉渐变"
  description="gradient-mountain: 山脉灰蓝渐变背景"
  background="gradient-mountain"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="花瓣渐变"
  description="gradient-flower: 花瓣粉紫渐变背景"
  background="gradient-flower"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="西瓜渐变"
  description="gradient-watermelon: 西瓜绿粉红渐变背景"
  background="gradient-watermelon"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="柠檬渐变"
  description="gradient-lemon: 柠檬黄渐变背景"
  background="gradient-lemon"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="葡萄渐变"
  description="gradient-grape: 葡萄紫渐变背景"
  background="gradient-grape"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="蓝莓渐变"
  description="gradient-blueberry: 蓝莓蓝渐变背景"
  background="gradient-blueberry"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="芒果渐变"
  description="gradient-mango: 芒果黄橙渐变背景"
  background="gradient-mango"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="奇异果渐变"
  description="gradient-kiwi: 奇异果绿渐变背景"
  background="gradient-kiwi"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="火龙果渐变"
  description="gradient-pitaya: 火龙果粉绿渐变背景"
  background="gradient-pitaya"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="香蕉渐变"
  description="gradient-banana: 香蕉黄渐变背景"
  background="gradient-banana"
  links={[{ text: '了解更多', href: '#', variant: 'primary' }]}
/>

backgroundImage

背景图片的URL，添加背景图片可以使Hero区域更加吸引人。

背景图片

使用背景图片增强视觉效果。

了解更多

使用导入背景图片的Hero

这是一个使用导入背景图片资源的Hero组件示例，享受Astro的图片优化功能。

开始使用
---



import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---

<Hero
  title="背景图片"
  description="使用背景图片增强视觉效果。"
  backgroundImage={getLandscapeImage({
    width: 800,
    height: 400,
    provider: 'picsum',
  })}
  backgroundOverlay="dark"
  links={[{ text: '了解更多', href: '/about', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
import heroImage from "@/assets/hero.png";
---

<Hero
  title="使用导入背景图片的Hero"
  description="这是一个使用导入背景图片资源的Hero组件示例，享受Astro的图片优化功能。"
  backgroundImage={heroImage}
  backgroundOverlay="dark"
  overlayOpacity={0.2}
  links={[{ text: '开始使用', href: '#', variant: 'primary' }]}
/>

backgroundOverlay

背景图片上的遮罩，可以添加不同的遮罩效果来改善文本可读性。

背景图片

使用背景图片增强视觉效果。

了解更多

使用导入背景图片的Hero

这是一个使用导入背景图片资源的Hero组件示例，享受Astro的图片优化功能。

开始使用
---



import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---

<Hero
  title="背景图片"
  description="使用背景图片增强视觉效果。"
  backgroundImage={getLandscapeImage({
    width: 800,
    height: 400,
    provider: 'picsum',
  })}
  backgroundOverlay="dark"
  links={[{ text: '了解更多', href: '/about', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
import heroImage from "@/assets/hero.png";
---

<Hero
  title="使用导入背景图片的Hero"
  description="这是一个使用导入背景图片资源的Hero组件示例，享受Astro的图片优化功能。"
  backgroundImage={heroImage}
  backgroundOverlay="dark"
  overlayOpacity={0.2}
  links={[{ text: '开始使用', href: '#', variant: 'primary' }]}
/>

description

标题下方的描述文本，用于提供更详细的信息说明。

欢迎使用我们的产品

这是一个简短的描述，介绍产品的主要特点和价值。

开始使用了解更多
---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="欢迎使用我们的产品"
  description="这是一个简短的描述，介绍产品的主要特点和价值。"
  links={[
    { text: '开始使用', href: '/getting-started', variant: 'primary' },
    { text: '了解更多', href: '/about', variant: 'secondary' },
  ]}
/>

glassmorphism

是否启用毛玻璃效果，为文字区域添加半透明背景和模糊效果，提高文字可读性。

产品展示

查看我们的最新产品，体验卓越的品质和服务。

立即购买了解更多

产品展示

查看我们的最新产品，体验卓越的品质和服务。

立即购买了解更多
---



import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---

<Hero
  title="产品展示"
  description="查看我们的最新产品，体验卓越的品质和服务。"
  backgroundImage={getLandscapeImage({
    width: 1920,
    height: 1080,
    tag: 'hero-bg',
  })}
  backgroundOverlay="dark"
  glassmorphism={false}
  links={[
    { text: '立即购买', href: '/buy', variant: 'primary' },
    { text: '了解更多', href: '/about', variant: 'secondary' },
  ]}
/>

---



import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---

<Hero
  title="产品展示"
  description="查看我们的最新产品，体验卓越的品质和服务。"
  backgroundImage={getLandscapeImage({
    width: 1920,
    height: 1080,
    tag: 'hero-bg',
  })}
  glassmorphism={true}
  textBackground="glass"
  links={[
    { text: '立即购买', href: '/buy', variant: 'primary' },
    { text: '了解更多', href: '/about', variant: 'secondary' },
  ]}
/>

image

可选的图片配置，通过添加图片使Hero区域更加生动。

示例图片

带图片的Hero

这是一个带有图片的Hero组件示例。

查看详情
导入的示例图片

使用导入图片的Hero

这是一个使用导入图片资源的Hero组件示例，支持 Astro 的图片优化功能。

查看详情
---



import { getExampleImage, Hero } from "@coffic/cosy-ui";

const image = {
	src: getExampleImage({ width: 400, height: 300, provider: "picsum" }),
	alt: "示例图片",
};
---

<Hero
  title="带图片的Hero"
  description="这是一个带有图片的Hero组件示例。"
  image={image}
  links={[{ text: '查看详情', href: '#', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
import heroImage from "@/assets/hero.png";

const image = {
	src: heroImage,
	alt: "导入的示例图片",
};
---

<Hero
  title="使用导入图片的Hero"
  description="这是一个使用导入图片资源的Hero组件示例，支持 Astro 的图片优化功能。"
  image={image}
  links={[{ text: '查看详情', href: '#', variant: 'primary' }]}
/>

imagePosition

图片位置，图片可以设置在不同位置（右侧、左侧、顶部、底部）。

示例图片

带图片的Hero

这是一个带有图片的Hero组件示例。

查看详情
导入的示例图片

使用导入图片的Hero

这是一个使用导入图片资源的Hero组件示例，支持 Astro 的图片优化功能。

查看详情
---



import { getExampleImage, Hero } from "@coffic/cosy-ui";

const image = {
	src: getExampleImage({ width: 400, height: 300, provider: "picsum" }),
	alt: "示例图片",
};
---

<Hero
  title="带图片的Hero"
  description="这是一个带有图片的Hero组件示例。"
  image={image}
  links={[{ text: '查看详情', href: '#', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
import heroImage from "@/assets/hero.png";

const image = {
	src: heroImage,
	alt: "导入的示例图片",
};
---

<Hero
  title="使用导入图片的Hero"
  description="这是一个使用导入图片资源的Hero组件示例，支持 Astro 的图片优化功能。"
  image={image}
  links={[{ text: '查看详情', href: '#', variant: 'primary' }]}
/>

链接按钮数组，用于引导用户进行下一步操作。

带自定义按钮的Hero

这是一个带有自定义按钮的Hero组件示例。

---



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

<Hero
  title="带自定义按钮的Hero"
  description="这是一个带有自定义按钮的Hero组件示例。"
  links={[]}>
  <div slot="app" class="cosy:flex cosy:gap-4">
    <Button variant="primary">主要操作</Button>
    <Button variant="secondary">次要操作</Button>
  </div>
</Hero>

overlayOpacity

遮罩的不透明度，用于控制背景遮罩的透明度。

背景图片

使用背景图片增强视觉效果。

了解更多

使用导入背景图片的Hero

这是一个使用导入背景图片资源的Hero组件示例，享受Astro的图片优化功能。

开始使用
---



import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---

<Hero
  title="背景图片"
  description="使用背景图片增强视觉效果。"
  backgroundImage={getLandscapeImage({
    width: 800,
    height: 400,
    provider: 'picsum',
  })}
  backgroundOverlay="dark"
  links={[{ text: '了解更多', href: '/about', variant: 'primary' }]}
/>

---



import { Hero } from "@coffic/cosy-ui";
import heroImage from "@/assets/hero.png";
---

<Hero
  title="使用导入背景图片的Hero"
  description="这是一个使用导入背景图片资源的Hero组件示例，享受Astro的图片优化功能。"
  backgroundImage={heroImage}
  backgroundOverlay="dark"
  overlayOpacity={0.2}
  links={[{ text: '开始使用', href: '#', variant: 'primary' }]}
/>

textBackground

文字区域背景类型，当启用毛玻璃效果时，可以选择不同的背景样式。

产品展示

查看我们的最新产品，体验卓越的品质和服务。

立即购买了解更多

产品展示

查看我们的最新产品，体验卓越的品质和服务。

立即购买了解更多

产品展示

查看我们的最新产品，体验卓越的品质和服务。

立即购买了解更多

产品展示

查看我们的最新产品，体验卓越的品质和服务。

立即购买了解更多
---



import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---

<Hero
  title="产品展示"
  description="查看我们的最新产品，体验卓越的品质和服务。"
  backgroundImage={getLandscapeImage({
    width: 1920,
    height: 1080,
    tag: 'hero-bg',
  })}
  glassmorphism={true}
  textBackground="none"
  links={[
    { text: '立即购买', href: '/buy', variant: 'primary' },
    { text: '了解更多', href: '/about', variant: 'secondary' },
  ]}
/>

---



import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---

<Hero
  title="产品展示"
  description="查看我们的最新产品，体验卓越的品质和服务。"
  backgroundImage={getLandscapeImage({
    width: 1920,
    height: 1080,
    tag: 'hero-bg',
  })}
  glassmorphism={true}
  textBackground="glass"
  links={[
    { text: '立即购买', href: '/buy', variant: 'primary' },
    { text: '了解更多', href: '/about', variant: 'secondary' },
  ]}
/>

---



import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---

<Hero
  title="产品展示"
  description="查看我们的最新产品，体验卓越的品质和服务。"
  backgroundImage={getLandscapeImage({
    width: 1920,
    height: 1080,
    tag: 'hero-bg',
  })}
  glassmorphism={true}
  textBackground="solid"
  links={[
    { text: '立即购买', href: '/buy', variant: 'primary' },
    { text: '了解更多', href: '/about', variant: 'secondary' },
  ]}
/>

---



import { getLandscapeImage, Hero } from "@coffic/cosy-ui";
---

<Hero
  title="产品展示"
  description="查看我们的最新产品，体验卓越的品质和服务。"
  backgroundImage={getLandscapeImage({
    width: 1920,
    height: 1080,
    tag: 'hero-bg',
  })}
  glassmorphism={true}
  textBackground="gradient"
  links={[
    { text: '立即购买', href: '/buy', variant: 'primary' },
    { text: '了解更多', href: '/about', variant: 'secondary' },
  ]}
/>

title

Hero 区域的主标题，用于吸引用户注意并传达核心信息。

欢迎使用我们的产品

这是一个简短的描述，介绍产品的主要特点和价值。

开始使用了解更多
---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="欢迎使用我们的产品"
  description="这是一个简短的描述，介绍产品的主要特点和价值。"
  links={[
    { text: '开始使用', href: '/getting-started', variant: 'primary' },
    { text: '了解更多', href: '/about', variant: 'secondary' },
  ]}
/>

Slots

app

自定义内容插槽，用于在 Hero 区域中添加交互式演示、图表或其他自定义内容。

带自定义内容的 Hero

使用 app slot 可以添加自定义内容，如交互式演示、图表等。

交互式演示

这是一个自定义的演示区域，可以放置任何内容。

查看文档
---



import { Hero } from "@coffic/cosy-ui";
---

<Hero
  title="带自定义内容的 Hero"
  description="使用 app slot 可以添加自定义内容，如交互式演示、图表等。"
  links={[{ text: '查看文档', href: '/docs' }]}>
  <div
    slot="app"
    style="background: white; padding: 2rem; border-radius: 0.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
    <h3 style="margin: 0 0 1rem 0; color: #1f2937; font-size: 1.25rem;">
      交互式演示
    </h3>
    <p style="margin: 0 0 1rem 0; color: #6b7280;">
      这是一个自定义的演示区域，可以放置任何内容。
    </p>
    <button
      style="background: #3b82f6; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem; border: none; cursor: pointer;">
      开始演示
    </button>
  </div>
</Hero>

搜索