PageFeature 组件由 PageSection 组件用于显示特性。
使用 title prop 设置特性的标题。
<template>
<UPageFeature title="Theme" />
</template>
使用 description prop 设置特性的描述。
<template>
<UPageFeature
title="Theme"
description="Customize Nuxt UI with your own colors, fonts, and more."
/>
</template>
使用 icon prop 设置特性的图标。
<template>
<UPageFeature
title="Theme"
description="Customize Nuxt UI with your own colors, fonts, and more."
icon="i-lucide-swatch-book"
/>
</template>
您可以传递<NuxtLink>组件，例如 to、target、rel 等。
<template>
<UPageFeature
title="Theme"
description="Customize Nuxt UI with your own colors, fonts, and more."
icon="i-lucide-swatch-book"
to="/docs/getting-started/theme/design-system"
target="_blank"
/>
</template>
使用 orientation prop 更改特性的方向。默认为 horizontal。
<template>
<UPageFeature
orientation="vertical"
title="Theme"
description="Customize Nuxt UI with your own colors, fonts, and more."
icon="i-lucide-swatch-book"
/>
</template>
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
图标 |
当 | |
title |
| |
description |
| |
orientation |
|
页面特性的方向。 |
过渡到 |
| |
target |
| |
ui |
|
| 插槽 | 类型 |
|---|---|
前置 |
|
title |
|
description |
|
default |
|
export default defineAppConfig({
ui: {
pageFeature: {
slots: {
root: 'relative',
wrapper: '',
leading: 'inline-flex items-center justify-center',
leadingIcon: 'size-5 shrink-0 text-primary',
title: 'text-base text-pretty font-semibold text-highlighted',
description: 'text-[15px] text-pretty text-muted'
},
variants: {
orientation: {
horizontal: {
root: 'flex items-start gap-2.5',
leading: 'p-0.5'
},
vertical: {
leading: 'mb-2.5'
}
},
title: {
true: {
description: 'mt-1'
}
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
pageFeature: {
slots: {
root: 'relative',
wrapper: '',
leading: 'inline-flex items-center justify-center',
leadingIcon: 'size-5 shrink-0 text-primary',
title: 'text-base text-pretty font-semibold text-highlighted',
description: 'text-[15px] text-pretty text-muted'
},
variants: {
orientation: {
horizontal: {
root: 'flex items-start gap-2.5',
leading: 'p-0.5'
},
vertical: {
leading: 'mb-2.5'
}
},
title: {
true: {
description: 'mt-1'
}
}
}
}
}
})
]
})