Hero
简介
Hero 组件是一个全屏的展示区域，通常用于网站的首页或重要页面的顶部。它提供了一个引人注目的视觉区域，可以包含标题、描述、图片和行动按钮。
align
内容对齐方式，支持左对齐、居中和右对齐。
---
import { Hero } from '@coffic/cosy-ui';
---
<Hero
title="居中对齐标题"
description="这是一个居中对齐的Hero组件示例。"
align="center"
links={[
{ text: '主要操作', href: '#', variant: 'primary' },
{ text: '次要操作', href: '#', variant: 'secondary' },
]}
/>
---
import { Hero } from '@coffic/cosy-ui';
---
<Hero
title="左对齐标题"
description="这是一个左对齐的Hero组件示例。"
align="left"
links={[
{ text: '主要操作', href: '#', variant: 'primary' },
{ text: '次要操作', href: '#', variant: 'secondary' },
]}
/>
---
import { Hero } from '@coffic/cosy-ui';
---
<Hero
title="右对齐标题"
description="这是一个右对齐的Hero组件示例。"
align="right"
links={[
{ text: '主要操作', href: '#', variant: 'primary' },
{ text: '次要操作', href: '#', variant: 'secondary' },
]}
/>
background
背景样式，支持多种背景样式，包括纯色和丰富的渐变色。
---
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="这个例子使用了渐变色背景样式。"
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区域更加吸引人。
---
import { Hero } from '@coffic/cosy-ui';
import { getLandscapeImage } 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
背景图片上的遮罩，可以添加不同的遮罩效果来改善文本可读性。
---
import { Hero } from '@coffic/cosy-ui';
import { getLandscapeImage } 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
标题下方的描述文本，用于提供更详细的信息说明。
image
可选的图片配置，通过添加图片使Hero区域更加生动。
---
import { Hero } from '@coffic/cosy-ui';
import { getExampleImage } 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
图片位置，图片可以设置在不同位置（右侧、左侧、顶部、底部）。
---
import { Hero } from '@coffic/cosy-ui';
import { getExampleImage } 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' }]}
/>
links
链接按钮数组，用于引导用户进行下一步操作。
带自定义按钮的Hero
这是一个带有自定义按钮的Hero组件示例。
---
import { Hero } from '@coffic/cosy-ui';
import { Button } 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
遮罩的不透明度，用于控制背景遮罩的透明度。
---
import { Hero } from '@coffic/cosy-ui';
import { getLandscapeImage } 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' }]}
/>
title
Hero 区域的主标题，用于吸引用户注意并传达核心信息。