落地页英雄
为您的着陆页提供一个响应式英雄。
用法
该 LandingHero 组件会将您的内容包装在 容器 中，但包装器占据屏幕的全部宽度，因此您可以轻松更改背景。
使用 title 和 description 道具来定制英雄的内容。
将您的愿景变为现实
与我们一起见证您的梦想成真。
<template>
<ULandingHero
title="Turn Your Vision into Reality"
description="Watch your dreams materialize before your eyes with us."
/>
</template>
使用 links 道具在描述下方添加一些 按钮。
将您的愿景变为现实
与我们一起见证您的梦想成真。
<template>
<ULandingHero
title="Turn Your Vision into Reality"
description="Watch your dreams materialize before your eyes with us."
:links="[{ label: 'Get Started', icon: 'i-heroicons-rocket-launch', size: 'lg' }, { label: 'Learn more', trailing-icon: 'i-heroicons-arrow-small-right', color: 'gray', size: 'lg' }]"
/>
</template>
您可以在默认插槽中添加任何您想要的内容，例如使用 MDC 组件（使用 @nuxt/content 时）添加图像或代码块。
您可以将 orientation 道具的值从 vertical 更改为 horizontal，以将插槽放置在英雄的右侧（这将在全屏显示中呈现得更好）。
您可以使用 #headline 插槽在标题上方添加 徽章、按钮 或任何您想要的内容。
<template>
<ULandingHero
title="Supercharged GitHub experience"
description="Work in real-time with your team on open-source and private repositories, all in one place. Working on GitHub issues and notifications has never been that fun."
orientation="vertical"
:links="[{ label: 'Continue with GitHub', icon: 'i-simple-icons-github', color: 'gray', size: 'lg' }]"
>
<template #headline>
<UButton
color="gray"
to="https://volta.net/changelog"
label="See what's new in v1.17.0"
trailing-icon="i-heroicons-arrow-right"
size="xs"
class="rounded-full"
/>
</template>
<template #default>
<img
src="https://picsum.photos/640/360"
class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
/>
</template>
</ULandingHero>
</template>
您也可以使用 #title、#description 和 #links 插槽来定制英雄的内容。当使用 @nuxt/content 时，这在您的内容具有 HTML 时会非常有用。
content/index.yml
navigation: false
hero:
title: The <span class="text-primary">Building Blocks</span> for<br>Modern Web Apps
description: 'Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentation, blogs, changelog, dashboards or entire SaaS products.'
links:
- label: Get Started
to: /pro/getting-starated
size: lg
icon: i-heroicons-rocket-launch
- label: Buy now
to: /pro/pricing
color: gray
icon: i-heroicons-ticket
size: lg
我们在这里使用
.yml 文件作为示例，但您可以使用 @nuxt/content 支持的任何格式，如 .md 或 .json。pages/index.vue
<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>
<template>
<ULandingHero :links="page.hero.links">
<template #title>
<span v-html="page.hero.title" />
</template>
<template #description>
<span v-html="page.hero.description" />
</template>
</ULandingHero>
</template>
您可以使用 #top 和 #bottom 插槽在容器的上方和下方添加内容，这在添加一些绝对定位的 svg 时很有用，例如。
插槽
顶部
{}
标题
{}
标题
{}
描述
{}
链接
{}
默认
{}
底部
{}
道具
标题
字符串
未定义描述
字符串
未定义方向
"vertical" | "horizontal"
"vertical"ui
任何
{}链接
(Button & { click?: (...args: any[]) => void; })[]
[]配置
{
wrapper: 'py-24 sm:py-32 md:py-40 relative',
container: 'gap-16 sm:gap-y-24 flex flex-col',
base: 'text-center',
headline: 'mb-10',
title: 'text-5xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-7xl',
description: 'mt-6 text-lg tracking-tight text-gray-600 dark:text-gray-300',
links: 'mt-10 flex flex-wrap justify-center gap-x-6 gap-y-3'
}