PageHero专业版

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

用法

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

终极 Vue UI 库

一个集成了 Nuxt/Vue 的 UI 库，提供一套功能丰富、风格完整、可访问且高度可定制的组件，用于构建现代 Web 应用程序。

标题

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

终极 Vue UI 库

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

描述

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

终极 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 的标题。

新发布

终极 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 属性在描述下方显示 Button 列表。

终极 Vue UI 库

一个集成了 Nuxt/Vue 的 UI 库，提供一套功能丰富、风格完整、可访问且高度可定制的组件，用于构建现代 Web 应用程序。
开始使用了解更多
<script setup lang="ts">
const links = ref([
  {
    label: 'Get started',
    to: '/getting-started',
    icon: 'i-lucide-square-play'
  },
  {
    label: 'Learn more',
    to: '/getting-started/theme',
    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 属性更改默认插槽的方向。默认为 vertical。

新发布

终极 Vue UI 库

一个集成了 Nuxt/Vue 的 UI 库，提供一套功能丰富、风格完整、可访问且高度可定制的组件，用于构建现代 Web 应用程序。
开始使用了解更多
<script setup lang="ts">
const links = ref([
  {
    label: 'Get started',
    to: '/getting-started',
    icon: 'i-lucide-square-play'
  },
  {
    label: 'Learn more',
    to: '/getting-started/theme',
    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="https://ui.nuxtjs.org.cn/templates/dashboard1.png"
      alt="App screenshot"
      class="rounded-lg shadow-2xl ring ring-default"
    />
  </UPageHero>
</template>

反转

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

新发布

终极 Vue UI 库

一个集成了 Nuxt/Vue 的 UI 库，提供一套功能丰富、风格完整、可访问且高度可定制的组件，用于构建现代 Web 应用程序。
开始使用了解更多
<script setup lang="ts">
const links = ref([
  {
    label: 'Get started',
    to: '/getting-started',
    icon: 'i-lucide-square-play'
  },
  {
    label: 'Learn more',
    to: '/getting-started/theme',
    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="https://ui.nuxtjs.org.cn/templates/dashboard1.png"
      alt="App screenshot"
      class="rounded-lg shadow-2xl ring ring-default"
    />
  </UPageHero>
</template>

API

属性

属性默认值类型
as

'div'

any

此组件应渲染为的元素或组件。

标题

string

标题

string

描述

string

links

ButtonProps[]

在描述下方显示一个 Button 列表。 { size: 'xl' }

方向

'vertical'

"horizontal" | "vertical"

页面英雄组件的方向。

反向

false

boolean

反转默认插槽的顺序。

ui

{ root?: ClassNameValue; container?: ClassNameValue; wrapper?: ClassNameValue; header?: ClassNameValue; headline?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; links?: ClassNameValue; }

插槽

插槽类型
顶部

{}

页头

{}

标题

{}

标题

{}

描述

{}

主体

{}

页脚

{}

links

{}

默认

{}

底部

{}

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    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({
      uiPro: {
        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 uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        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'
              }
            }
          }
        }
      }
    })
  ]
})

PageHeader

一个响应式页面头部。

PageLinks

页面中显示链接的列表。