O componente PageFeature é usado pelo componente PageSection para exibir recursos.
Use a prop title para definir o título do recurso.
<template>
<NPageFeature title="Theme" />
</template>
Use a prop description para definir a descrição do recurso.
<template>
<NPageFeature
title="Theme"
description="Customize Nitro UI with your own colors, fonts, and more."
/>
</template>
Use a prop icon para definir o ícone do recurso.
<template>
<NPageFeature
title="Theme"
description="Customize Nitro UI with your own colors, fonts, and more."
icon="i-lucide-swatch-book"
/>
</template>
Você pode passar qualquer propriedade do componente <NuxtLink>, como to, target, rel, etc.
<template>
<NPageFeature
title="Theme"
description="Customize Nitro UI with your own colors, fonts, and more."
icon="i-lucide-swatch-book"
to="/docs/getting-started/theme/design-system"
target="_blank"
/>
</template>
Use a prop orientation para alterar a orientação do recurso. O padrão é horizontal.
<template>
<NPageFeature
orientation="vertical"
title="Theme"
description="Customize Nitro UI with your own colors, fonts, and more."
icon="i-lucide-swatch-book"
/>
</template>
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
icon | anyThe icon displayed next to the title when | |
title | string | |
description | string | |
orientation | 'horizontal' | "horizontal" | "vertical"The orientation of the page feature. |
to | string | it | et | |
target | null | "_blank" | "_parent" | "_self" | "_top" | string & {} | |
ui | { root?: SlotClass; wrapper?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; title?: SlotClass; description?: SlotClass; } |
| Slot | Type |
|---|---|
leading | { ui: object; } |
title | {} |
description | {} |
default | {} |
export default defineAppConfig({
ui: {
pageFeature: {
slots: {
root: 'relative rounded-sm',
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'
}
},
to: {
true: {
root: [
'outline-primary/25 has-focus-visible:outline-3',
'transition'
]
}
},
title: {
true: {
description: 'mt-1'
}
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
pageFeature: {
slots: {
root: 'relative rounded-sm',
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'
}
},
to: {
true: {
root: [
'outline-primary/25 has-focus-visible:outline-3',
'transition'
]
}
},
title: {
true: {
description: 'mt-1'
}
}
}
}
}
})
]
})