Nuxt UI v3-alpha 已发布！

试用

页面英雄

GitHub
页面上的响应式英雄。

用法

在 Page 上方使用 PageHero 组件。

<template>
  <UContainer>
    <UPageHero />

    <UPage>
      <UPageHeader />

      <UPageBody />
    </UPage>
  </UContainer>
</template>

使用 title 和 description 道具来自定义英雄。

官方支持

通过 NuxtLabs 专家和代理网络，我们为每种需求提供解决方案。
<template>
  <UPageHero
    title="Official Support"
    description="Through NuxtLabs experts and agency networks, we have a solution for every need."
  />
</template>

使用 icon 道具在标题上方添加图标。

官方支持

通过 NuxtLabs 专家和代理网络，我们为每种需求提供解决方案。
<template>
  <UPageHero
    icon="i-heroicons-lifebuoy"
    title="Official Support"
    description="Through NuxtLabs experts and agency networks, we have a solution for every need."
  />
</template>

例如，您可以在默认插槽中添加任何您想要的内容，例如使用 MDC 组件（使用 @nuxt/content 时）的图像或代码块。

您可以将 align 道具从 left 更改为 center 或 right 以将插槽定位在不同的位置。

官方支持

通过 NuxtLabs 专家和代理网络，我们为每种需求提供解决方案。
<template>
  <UPageHero
    title="Official Support"
    description="Through NuxtLabs experts and agency networks, we have a solution for every need."
    align="left"
  >
    <img
      src="https://picsum.photos/640/360"
      class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
    />
  </UPageHero>
</template>

使用 links 道具在描述下方添加一些 按钮。 当 align 道具设置为 center 时，这些按钮将在默认插槽下方呈现。

官方支持

通过 NuxtLabs 专家和代理网络，我们为每种需求提供解决方案。
<template>
  <UPageHero
    title="Official Support"
    description="Through NuxtLabs experts and agency networks, we have a solution for every need."
    align="left"
    :links="[{ label: 'Get started', color: 'black', size: 'lg' }, { label: 'Learn more', color: 'gray', size: 'lg', trailingIcon: 'i-heroicons-arrow-right-20-solid' }]"
  >
    <img
      src="https://picsum.photos/360/640"
      class="w-full rounded-md shadow-xl ring-1 ring-gray-300 dark:ring-gray-700"
    />
  </UPageHero>
</template>

您也可以使用 #title、#description 和 #links 插槽来自定义英雄的内容。 例如，当使用 @nuxt/content 时，如果您的内容包含 HTML，这将非常有用。

content/newsletter.yml
title: The Nuxt Newsletter
head.title: Nuxt Newsletter
description: 'Get the latest releases and news about Nuxt and its ecosystem with our newsletter.'
navigation: false
hero:
  title: The <span class="text-primary">Nuxt</span> Newsletter
  align: 'center'
我们在此处使用 .yml 文件作为示例，但您可以使用 @nuxt/content 支持的任何格式，例如 .md 或 .json。
pages/newsletter.vue
<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).findOne())
</script>

<template>
  <UContainer>
    <UPageHero :description="page.description" :align="page.hero.align">
      <template #title>
        <span v-html="page.hero.title" />
      </template>
    </UPageHero>

    <UPage>
      <UPageBody>
        <ULandingCTA />
      </UPageBody>
    </UPage>
  </UContainer>
</template>

插槽

图标
{}
标题
{}
描述
{}
链接
{}
默认
{}

道具

图标
字符串
未定义
标题
字符串
未定义
描述
字符串
未定义
ui
任何
{}
链接
(Button & { click?: (...args: any[]) => void; })[]
[]
对齐
"left" | "center" | "right"
"left"

配置

{
  wrapper: 'py-8 sm:py-16',
  container: 'gap-8 sm:gap-y-16',
  base: '',
  icon: {
    wrapper: 'flex mb-4',
    base: 'w-10 h-10 flex-shrink-0 text-primary'
  },
  title: 'text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl lg:text-5xl',
  description: 'mt-4 text-lg text-gray-500 dark:text-gray-400',
  links: 'mt-8 flex flex-wrap gap-x-3 gap-y-1.5'
}

PageHeader

页面上的响应式页眉。

PageLinks

在页面中显示的链接列表。