页面英雄区

GitHub

一个用于您页面的响应式英雄区。

用法

PageHero 组件将您的内容包装在 Container 中，同时保持全宽度灵活性，方便添加背景颜色、图像或图案。它提供了一种灵活的方式来显示带有默认插槽中插图的内容。

终极 Vue UI 库

一个 Nuxt/Vue 集成的 UI 库，提供一套丰富、样式完善、无障碍且高度可定制的组件，用于构建现代 Web 应用程序。

标题

使用 title 属性来设置 hero 的标题。

title

终极 Vue UI 库

<template>
  <UPageHero title="Ultimate Vue UI library" />
</template>

描述

使用 description 属性来设置 hero 的描述。

description

终极 Vue UI 库

一个 Nuxt/Vue 集成的 UI 库，提供一套丰富、样式完善、无障碍且高度可定制的组件，用于构建现代 Web 应用程序。

<template>
  <UPageHero
    title="Ultimate Vue UI library"
    description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
  />
</template>

标题行

使用 headline 属性来设置 hero 的副标题。

headline

新发布

终极 Vue UI 库

一个 Nuxt/Vue 集成的 UI 库，提供一套丰富、样式完善、无障碍且高度可定制的组件，用于构建现代 Web 应用程序。

<template>
  <UPageHero
    title="Ultimate Vue UI library"
    description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
    headline="New release"
  />
</template>

链接

使用 links prop 在描述下方显示一个 Button 列表。

终极 Vue UI 库

一个 Nuxt/Vue 集成的 UI 库，提供一套丰富、样式完善、无障碍且高度可定制的组件，用于构建现代 Web 应用程序。

开始使用了解更多

<script setup lang="ts">
const links = ref([
  {
    label: 'Get started',
    to: '/docs/getting-started',
    icon: 'i-lucide-square-play'
  },
  {
    label: 'Learn more',
    to: '/docs/getting-started/theme/design-system',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UPageHero
    title="Ultimate Vue UI library"
    description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
    :links="links"
  />
</template>

Orientation

使用 orientation prop 来更改默认插槽的布局方向。默认为 vertical。

orientation

新发布

终极 Vue UI 库

一个 Nuxt/Vue 集成的 UI 库，提供一套丰富、样式完善、无障碍且高度可定制的组件，用于构建现代 Web 应用程序。

开始使用了解更多

<script setup lang="ts">
const links = ref([
  {
    label: 'Get started',
    to: '/docs/getting-started',
    icon: 'i-lucide-square-play'
  },
  {
    label: 'Learn more',
    to: '/docs/getting-started/theme/design-system',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UPageHero
    title="Ultimate Vue UI library"
    description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
    headline="New release"
    orientation="horizontal"
    :links="links"
  >
    <img
      src="/blocks/image4.png"
      alt="App screenshot"
      class="rounded-lg shadow-2xl ring ring-default"
    />
  </UPageHero>
</template>

反转

使用 reverse prop 反转默认插槽的方向。

orientation

reverse

新发布

终极 Vue UI 库

一个 Nuxt/Vue 集成的 UI 库，提供一套丰富、样式完善、无障碍且高度可定制的组件，用于构建现代 Web 应用程序。

开始使用了解更多

<script setup lang="ts">
const links = ref([
  {
    label: 'Get started',
    to: '/docs/getting-started',
    icon: 'i-lucide-square-play'
  },
  {
    label: 'Learn more',
    to: '/docs/getting-started/theme/design-system',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UPageHero
    title="Ultimate Vue UI library"
    description="A Nuxt/Vue-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications."
    headline="New release"
    orientation="horizontal"
    reverse
    :links="links"
  >
    <img
      src="/blocks/image4.png"
      alt="App screenshot"
      class="rounded-lg shadow-2xl ring ring-default"
    />
  </UPageHero>
</template>

API

属性

属性	默认值	类型
`as`	`'div'`	`any` 此组件应渲染为的元素或组件。
`headline`		`string`
`title`		`string`
`description`		`string`
`links`		`ButtonProps[]` 在描述下方显示一个 Button 列表。 `{ size: 'xl' }`
`orientation`	`'vertical'`	`"vertical" \| "horizontal"` Page hero 的方向。
`reverse`	`false`	`boolean` 反转默认插槽的顺序。
`ui`		`{ root?: ClassNameValue; container?: ClassNameValue; wrapper?: ClassNameValue; header?: ClassNameValue; headline?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; links?: ClassNameValue; }`

插槽

插槽	类型
`top`	`{}`
`页头`	`{}`
`headline`	`{}`
`title`	`{}`
`description`	`{}`
`主体`	`{}`
`页脚`	`{}`
`links`	`{}`
`default`	`{}`
`bottom`	`{}`

主题

app.config.ts

export default defineAppConfig({
  ui: {
    pageHero: {
      slots: {
        root: 'relative isolate',
        container: 'flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24',
        wrapper: '',
        header: '',
        headline: 'mb-4',
        title: 'text-5xl sm:text-7xl text-pretty tracking-tight font-bold text-highlighted',
        description: 'text-lg sm:text-xl/8 text-muted',
        body: 'mt-10',
        footer: 'mt-10',
        links: 'flex flex-wrap gap-x-6 gap-y-3'
      },
      variants: {
        orientation: {
          horizontal: {
            container: 'lg:grid-cols-2 lg:items-center',
            description: 'text-pretty'
          },
          vertical: {
            container: '',
            headline: 'justify-center',
            wrapper: 'text-center',
            description: 'text-balance',
            links: 'justify-center'
          }
        },
        reverse: {
          true: {
            wrapper: 'order-last'
          }
        },
        headline: {
          true: {
            headline: 'font-semibold text-primary flex items-center gap-1.5'
          }
        },
        title: {
          true: {
            description: 'mt-6'
          }
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pageHero: {
          slots: {
            root: 'relative isolate',
            container: 'flex flex-col lg:grid py-24 sm:py-32 lg:py-40 gap-16 sm:gap-y-24',
            wrapper: '',
            header: '',
            headline: 'mb-4',
            title: 'text-5xl sm:text-7xl text-pretty tracking-tight font-bold text-highlighted',
            description: 'text-lg sm:text-xl/8 text-muted',
            body: 'mt-10',
            footer: 'mt-10',
            links: 'flex flex-wrap gap-x-6 gap-y-3'
          },
          variants: {
            orientation: {
              horizontal: {
                container: 'lg:grid-cols-2 lg:items-center',
                description: 'text-pretty'
              },
              vertical: {
                container: '',
                headline: 'justify-center',
                wrapper: 'text-center',
                description: 'text-balance',
                links: 'justify-center'
              }
            },
            reverse: {
              true: {
                wrapper: 'order-last'
              }
            },
            headline: {
              true: {
                headline: 'font-semibold text-primary flex items-center gap-1.5'
              }
            },
            title: {
              true: {
                description: 'mt-6'
              }
            }
          }
        }
      }
    })
  ]
})

更新日志

5cb65— 特性：导入 @nuxt/ui-pro 组件

PageHeader

响应式的页面标题。

PageLinks

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