PageHeroPRO
用法
PageHero 组件将您的内容包裹在 Container 中，同时保持全宽灵活性，方便添加背景颜色、图片或图案。它提供了一种灵活的方式，可以在默认插槽中展示内容和插图。
极致的 Vue UI 库
标题
使用 title prop 设置英雄区域的标题。
极致的 Vue UI 库
<template>
<UPageHero title="Ultimate Vue UI library" />
</template>
描述
使用 description prop 设置英雄区域的描述。
极致的 Vue UI 库
<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 prop 设置英雄区域的头条文本。
极致的 Vue UI 库
<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 列表。
<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 prop 更改默认插槽的排列方向。默认为 vertical。
<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 反转默认插槽的排列方向。
<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
Props
| Prop | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应该渲染为的元素或组件。 |
orientation |
|
|
reverse |
|
反转默认插槽的顺序。 |
title |
| |
description |
| |
links |
在描述下方显示 Button 列表。
| |
headline |
| |
ui |
|
插槽
| 插槽 | 类型 |
|---|---|
默认 |
|
顶部 |
|
底部 |
|
headline |
|
title |
|
description |
|
links |
|
主题
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: '',
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',
links: 'mt-10 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'
}
}
}
}
}
})
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: '',
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',
links: 'mt-10 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'
}
}
}
}
}
})
]
})
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: '',
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',
links: 'mt-10 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'
}
}
}
}
}
})
]
})