页面英雄区
一个用于您页面的响应式英雄区。
用法
PageHero 组件将您的内容包裹在容器中，同时保持全宽的灵活性，便于添加背景颜色、图像或图案。它提供了一种灵活的方式来在默认插槽中显示带有插图的内容。
终极 Vue UI 库
一个 Nuxt/Vue 集成的 UI 库，提供了一套丰富的完全样式化、可访问且高度可定制的组件，用于构建现代 Web 应用程序。
标题
使用 title 属性设置英雄标题。
终极 Vue UI 库
<template>
<UPageHero title="Ultimate Vue UI library" />
</template>
描述
使用 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 属性设置英雄标题。
新版本发布
终极 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 列表。
<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。
<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 反转默认插槽的方向。
<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[]在描述下方显示一个按钮列表。
| |
orientation | 'vertical' | "horizontal" | "vertical"页面英雄的方向。 |
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'
}
}
}
}
}
})
]
})