PageCardPRO
一个预设样式的卡片组件，显示标题、描述和可选链接。
用法
PageCard 组件提供了一种灵活的方式，可以在默认插槽中以插图的形式展示卡片内容。
Tailwind CSS
Nuxt UI v3 集成了最新的 Tailwind CSS v4，带来了显著的改进。
标题
使用 title 属性来设置卡片的标题。
Tailwind CSS
<template>
<UPageCard title="Tailwind CSS" />
</template>
描述
使用 description 属性来设置卡片的描述。
Tailwind CSS
Nuxt UI v3 集成了最新的 Tailwind CSS v4，带来了显著的改进。
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI v3 integrates with latest Tailwind CSS v4, bringing significant improvements."
/>
</template>
Icon
使用 icon 属性来设置卡片的图标。
Tailwind CSS
Nuxt UI v3 集成了最新的 Tailwind CSS v4，带来了显著的改进。
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI v3 integrates with latest Tailwind CSS v4, bringing significant improvements."
icon="i-simple-icons-tailwindcss"
/>
</template>
Link
您可以传递<NuxtLink>组件属性，例如 to、target、rel 等。
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI v3 integrates with latest Tailwind CSS v4, bringing significant improvements."
icon="i-simple-icons-tailwindcss"
to="https://tailwind.org.cn/docs/v4-beta"
target="_blank"
/>
</template>
变体
使用 variant 属性来更改卡片的样式。
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI v3 integrates with latest Tailwind CSS v4, bringing significant improvements."
icon="i-simple-icons-tailwindcss"
to="https://tailwind.org.cn/docs/v4-beta"
target="_blank"
variant="soft"
/>
</template>
在使用
solid 变体时，你可以将 light 或 dark 类应用于 links 插槽，以反转颜色。方向
使用 orientation 属性更改默认插槽的方向。默认为 vertical。
Tailwind CSS
Nuxt UI v3 集成了最新的 Tailwind CSS v4，带来了显著的改进。
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI v3 integrates with latest Tailwind CSS v4, bringing significant improvements."
icon="i-simple-icons-tailwindcss"
orientation="horizontal"
>
<img src="/tailwindcss-v4.svg" alt="Tailwind CSS" class="w-full" />
</UPageCard>
</template>
反转
使用 reverse prop 反转默认插槽的方向。
Tailwind CSS
Nuxt UI v3 集成了最新的 Tailwind CSS v4，带来了显著的改进。
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI v3 integrates with latest Tailwind CSS v4, bringing significant improvements."
icon="i-simple-icons-tailwindcss"
orientation="horizontal"
reverse
>
<img src="/tailwindcss-v4.svg" alt="Tailwind CSS" class="w-full" />
</UPageCard>
</template>
高亮显示
使用 highlight 和 highlight-color 属性可以在卡片周围显示高亮边框。
Tailwind CSS
Nuxt UI v3 集成了最新的 Tailwind CSS v4，带来了显著的改进。
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI v3 integrates with latest Tailwind CSS v4, bringing significant improvements."
icon="i-simple-icons-tailwindcss"
orientation="horizontal"
highlight
highlight-color="primary"
>
<img src="/tailwindcss-v4.svg" alt="Tailwind CSS" class="w-full" />
</UPageCard>
</template>
聚光灯效果
使用 spotlight 和 spotlight-color 属性可以显示一个聚光灯效果，该效果会跟随鼠标光标并悬停时高亮边框。
当使用
to 属性时，聚光灯效果将取代悬停效果。最好将其与 outline 变体一起使用。Tailwind CSS
Nuxt UI v3 集成了最新的 Tailwind CSS v4，带来了显著的改进。
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI v3 integrates with latest Tailwind CSS v4, bringing significant improvements."
icon="i-simple-icons-tailwindcss"
orientation="horizontal"
spotlight
spotlight-color="primary"
>
<img src="/tailwindcss-v4.svg" alt="Tailwind CSS" class="w-full" />
</UPageCard>
</template>
你还可以通过使用
--spotlight-color 和 --spotlight-size CSS 变量来定制颜色和大小<template>
<UPageCard spotlight class="[--spotlight-color:var(--ui-error)] [--spotlight-size:200px]" />
</template>
示例
作为用户评价
在 header 或 footer 插槽中使用 User 组件，可以使卡片看起来像一个用户评价。
<script setup lang="ts">
const testimonial = ref({
user: {
name: 'Evan You',
description: 'Author of Vue.js and Vite',
avatar: {
src: 'https://avatars.githubusercontent.com/u/499550?v=4',
alt: 'Evan You'
}
},
quote: '“Nuxt on Cloudflare infra with minimal effort - this is huge!”'
})
</script>
<template>
<UPageCard :description="testimonial.quote" class="w-60">
<template #footer>
<UUser v-bind="testimonial.user" />
</template>
</UPageCard>
</template>
你可以使用
PageColumns 组件以多列布局显示多个 PageCard。API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
图标 |
显示在标题上方的图标。 | |
title |
| |
description |
| |
orientation |
|
页面卡片的方向。 |
reverse |
|
反转默认插槽的顺序。 |
高亮 |
在页面卡片周围显示一条线。 | |
highlightColor |
|
|
spotlight |
显示一个聚光灯效果，该效果会跟随鼠标光标并悬停时高亮边框。 | |
spotlightColor |
|
|
variant |
|
|
过渡到 |
| |
target |
| |
ui |
|
插槽
| 插槽 | 类型 |
|---|---|
页头 |
|
主体 |
|
前置 |
|
title |
|
description |
|
页脚 |
|
默认 |
|
主题
app.config.ts
export default defineAppConfig({
uiPro: {
pageCard: {
slots: {
root: 'relative flex rounded-lg',
spotlight: 'absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90',
container: 'relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6',
wrapper: 'flex flex-col flex-1 items-start',
header: 'mb-4',
body: 'flex-1',
footer: 'pt-4 mt-auto',
leading: 'inline-flex items-center mb-2.5',
leadingIcon: 'size-5 shrink-0 text-primary',
title: 'text-base text-pretty font-semibold text-highlighted',
description: 'text-[15px] text-pretty'
},
variants: {
orientation: {
horizontal: {
container: 'lg:grid-cols-2 lg:items-center'
},
vertical: {
container: ''
}
},
reverse: {
true: {
wrapper: 'lg:order-last'
}
},
variant: {
solid: {
root: 'bg-inverted text-inverted',
title: 'text-inverted',
description: 'text-dimmed'
},
outline: {
root: 'bg-default ring ring-default',
description: 'text-muted'
},
soft: {
root: 'bg-elevated/50',
description: 'text-toned'
},
subtle: {
root: 'bg-elevated/50 ring ring-default',
description: 'text-toned'
},
ghost: {
description: 'text-muted'
},
naked: {
container: 'p-0 sm:p-0',
description: 'text-muted'
}
},
to: {
true: {
root: [
'transition'
]
}
},
title: {
true: {
description: 'mt-1'
}
},
highlight: {
true: {
root: 'ring-2'
}
},
highlightColor: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
spotlight: {
true: {
root: '[--spotlight-size:400px] before:absolute before:-inset-px before:pointer-events-none before:rounded-[inherit] before:bg-[radial-gradient(var(--spotlight-size)_var(--spotlight-size)_at_calc(var(--spotlight-x,0px))_calc(var(--spotlight-y,0px)),var(--spotlight-color),transparent_70%)]'
}
},
spotlightColor: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
}
},
compoundVariants: [
{
variant: 'solid',
to: true,
class: {
root: 'hover:bg-inverted/90'
}
},
{
variant: 'outline',
to: true,
class: {
root: 'hover:bg-elevated/50'
}
},
{
variant: 'soft',
to: true,
class: {
root: 'hover:bg-elevated'
}
},
{
variant: 'subtle',
to: true,
class: {
root: 'hover:bg-elevated'
}
},
{
variant: 'subtle',
to: true,
highlight: false,
class: {
root: 'hover:ring-accented'
}
},
{
variant: 'ghost',
to: true,
class: {
root: 'hover:bg-elevated/50'
}
},
{
highlightColor: 'primary',
highlight: true,
class: {
root: 'ring-primary'
}
},
{
highlightColor: 'neutral',
highlight: true,
class: {
root: 'ring-inverted'
}
},
{
spotlightColor: 'primary',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-primary)]'
}
},
{
spotlightColor: 'secondary',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-secondary)]'
}
},
{
spotlightColor: 'success',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-success)]'
}
},
{
spotlightColor: 'info',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-info)]'
}
},
{
spotlightColor: 'warning',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-warning)]'
}
},
{
spotlightColor: 'error',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-error)]'
}
},
{
spotlightColor: 'neutral',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-bg-inverted)]'
}
}
],
defaultVariants: {
variant: 'outline',
highlightColor: 'primary',
spotlightColor: 'primary'
}
}
}
})
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: {
pageCard: {
slots: {
root: 'relative flex rounded-lg',
spotlight: 'absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90',
container: 'relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6',
wrapper: 'flex flex-col flex-1 items-start',
header: 'mb-4',
body: 'flex-1',
footer: 'pt-4 mt-auto',
leading: 'inline-flex items-center mb-2.5',
leadingIcon: 'size-5 shrink-0 text-primary',
title: 'text-base text-pretty font-semibold text-highlighted',
description: 'text-[15px] text-pretty'
},
variants: {
orientation: {
horizontal: {
container: 'lg:grid-cols-2 lg:items-center'
},
vertical: {
container: ''
}
},
reverse: {
true: {
wrapper: 'lg:order-last'
}
},
variant: {
solid: {
root: 'bg-inverted text-inverted',
title: 'text-inverted',
description: 'text-dimmed'
},
outline: {
root: 'bg-default ring ring-default',
description: 'text-muted'
},
soft: {
root: 'bg-elevated/50',
description: 'text-toned'
},
subtle: {
root: 'bg-elevated/50 ring ring-default',
description: 'text-toned'
},
ghost: {
description: 'text-muted'
},
naked: {
container: 'p-0 sm:p-0',
description: 'text-muted'
}
},
to: {
true: {
root: [
'transition'
]
}
},
title: {
true: {
description: 'mt-1'
}
},
highlight: {
true: {
root: 'ring-2'
}
},
highlightColor: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
spotlight: {
true: {
root: '[--spotlight-size:400px] before:absolute before:-inset-px before:pointer-events-none before:rounded-[inherit] before:bg-[radial-gradient(var(--spotlight-size)_var(--spotlight-size)_at_calc(var(--spotlight-x,0px))_calc(var(--spotlight-y,0px)),var(--spotlight-color),transparent_70%)]'
}
},
spotlightColor: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
}
},
compoundVariants: [
{
variant: 'solid',
to: true,
class: {
root: 'hover:bg-inverted/90'
}
},
{
variant: 'outline',
to: true,
class: {
root: 'hover:bg-elevated/50'
}
},
{
variant: 'soft',
to: true,
class: {
root: 'hover:bg-elevated'
}
},
{
variant: 'subtle',
to: true,
class: {
root: 'hover:bg-elevated'
}
},
{
variant: 'subtle',
to: true,
highlight: false,
class: {
root: 'hover:ring-accented'
}
},
{
variant: 'ghost',
to: true,
class: {
root: 'hover:bg-elevated/50'
}
},
{
highlightColor: 'primary',
highlight: true,
class: {
root: 'ring-primary'
}
},
{
highlightColor: 'neutral',
highlight: true,
class: {
root: 'ring-inverted'
}
},
{
spotlightColor: 'primary',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-primary)]'
}
},
{
spotlightColor: 'secondary',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-secondary)]'
}
},
{
spotlightColor: 'success',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-success)]'
}
},
{
spotlightColor: 'info',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-info)]'
}
},
{
spotlightColor: 'warning',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-warning)]'
}
},
{
spotlightColor: 'error',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-error)]'
}
},
{
spotlightColor: 'neutral',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-bg-inverted)]'
}
}
],
defaultVariants: {
variant: 'outline',
highlightColor: 'primary',
spotlightColor: 'primary'
}
}
}
})
]
})
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: {
pageCard: {
slots: {
root: 'relative flex rounded-lg',
spotlight: 'absolute inset-0 rounded-[inherit] pointer-events-none bg-default/90',
container: 'relative flex flex-col flex-1 lg:grid gap-x-8 gap-y-4 p-4 sm:p-6',
wrapper: 'flex flex-col flex-1 items-start',
header: 'mb-4',
body: 'flex-1',
footer: 'pt-4 mt-auto',
leading: 'inline-flex items-center mb-2.5',
leadingIcon: 'size-5 shrink-0 text-primary',
title: 'text-base text-pretty font-semibold text-highlighted',
description: 'text-[15px] text-pretty'
},
variants: {
orientation: {
horizontal: {
container: 'lg:grid-cols-2 lg:items-center'
},
vertical: {
container: ''
}
},
reverse: {
true: {
wrapper: 'lg:order-last'
}
},
variant: {
solid: {
root: 'bg-inverted text-inverted',
title: 'text-inverted',
description: 'text-dimmed'
},
outline: {
root: 'bg-default ring ring-default',
description: 'text-muted'
},
soft: {
root: 'bg-elevated/50',
description: 'text-toned'
},
subtle: {
root: 'bg-elevated/50 ring ring-default',
description: 'text-toned'
},
ghost: {
description: 'text-muted'
},
naked: {
container: 'p-0 sm:p-0',
description: 'text-muted'
}
},
to: {
true: {
root: [
'transition'
]
}
},
title: {
true: {
description: 'mt-1'
}
},
highlight: {
true: {
root: 'ring-2'
}
},
highlightColor: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
spotlight: {
true: {
root: '[--spotlight-size:400px] before:absolute before:-inset-px before:pointer-events-none before:rounded-[inherit] before:bg-[radial-gradient(var(--spotlight-size)_var(--spotlight-size)_at_calc(var(--spotlight-x,0px))_calc(var(--spotlight-y,0px)),var(--spotlight-color),transparent_70%)]'
}
},
spotlightColor: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
}
},
compoundVariants: [
{
variant: 'solid',
to: true,
class: {
root: 'hover:bg-inverted/90'
}
},
{
variant: 'outline',
to: true,
class: {
root: 'hover:bg-elevated/50'
}
},
{
variant: 'soft',
to: true,
class: {
root: 'hover:bg-elevated'
}
},
{
variant: 'subtle',
to: true,
class: {
root: 'hover:bg-elevated'
}
},
{
variant: 'subtle',
to: true,
highlight: false,
class: {
root: 'hover:ring-accented'
}
},
{
variant: 'ghost',
to: true,
class: {
root: 'hover:bg-elevated/50'
}
},
{
highlightColor: 'primary',
highlight: true,
class: {
root: 'ring-primary'
}
},
{
highlightColor: 'neutral',
highlight: true,
class: {
root: 'ring-inverted'
}
},
{
spotlightColor: 'primary',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-primary)]'
}
},
{
spotlightColor: 'secondary',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-secondary)]'
}
},
{
spotlightColor: 'success',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-success)]'
}
},
{
spotlightColor: 'info',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-info)]'
}
},
{
spotlightColor: 'warning',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-warning)]'
}
},
{
spotlightColor: 'error',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-error)]'
}
},
{
spotlightColor: 'neutral',
spotlight: true,
class: {
root: '[--spotlight-color:var(--ui-bg-inverted)]'
}
}
],
defaultVariants: {
variant: 'outline',
highlightColor: 'primary',
spotlightColor: 'primary'
}
}
}
})
]
})