Pageón
Componente de tarjeta prediseñado que muestra un título, descripción y enlace opcional.
xph0000xUso
El componente PageCard proporciona una forma flexible de mostrar el contenido en una tarjeta con una ilustración en la ranura predeterminada.
Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
Nombre
Utilice el prop title para establecer el título de la tarjeta.
Tailwind CSS
<template>
<UPageCard title="Tailwind CSS" />
</template>Descripción
Utilice el prop description para establecer la descripción de la tarjeta.
Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements."
/>
</template>Icono
Utilice el accesorio icon para configurar el icono de la tarjeta.
Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements."
icon="i-simple-icons-tailwindcss"
/>
</template>Link (en inglés)
Puede pasar cualquier propiedad del componente <NuxtLink> como to, target, rel, etc.
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements."
icon="i-simple-icons-tailwindcss"
to="https://tailwindcss.com/blog/tailwindcss-v4"
target="_blank"
/>
</template>Variante
Utilice el accesorio variant para cambiar el estilo de la tarjeta.
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements."
icon="i-simple-icons-tailwindcss"
to="https://tailwindcss.com/blog/tailwindcss-v4"
target="_blank"
variant="soft"
/>
</template>Puede aplicar la clase
light o dark a la ranura links cuando se utiliza la variante solid para invertir los colores.Orientación
Utilice el prop orientation para cambiar la orientación con la ranura predeterminada.
Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements."
icon="i-simple-icons-tailwindcss"
orientation="horizontal"
>
<img src="/tailwindcss-v4.svg" alt="Tailwind CSS" class="w-full" />
</UPageCard>
</template>Reverse (Edición española)
Utilice el prop reverse para invertir la orientación de la ranura predeterminada.
Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI integrates with latest Tailwind CSS, 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 (Edición española)
Utilice los accesorios highlight y highlight-color para mostrar un borde resaltado alrededor de la tarjeta.
Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI integrates with latest Tailwind CSS, 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 (Edición española)
Utilice los accesorios spotlight y spotlight-color para mostrar un efecto de foco que sigue el cursor del ratón y resalta los bordes al flotar.
El efecto de foco se hará cargo de los efectos de desplazamiento cuando se use un accesorio
to.Tailwind CSS
Nuxt UI integrates with latest Tailwind CSS, bringing significant improvements.
<template>
<UPageCard
title="Tailwind CSS"
description="Nuxt UI integrates with latest Tailwind CSS, 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>También puede personalizar el color y el tamaño mediante el uso de las variables CSS
--spotlight-color y --spotlight-size:<template>
<UPageCard spotlight class="[--spotlight-color:var(--ui-error)] [--spotlight-size:200px]" />
</template>
Ejemplos
Como un testimonio
Utilice el componente User en la ranura header o footer para que la tarjeta se vea como un testimonio.
“Nuxt on Cloudflare infra with minimal effort - this is huge!”
Evan You
Author of Vue.js and Vite
<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',
loading: 'lazy' as const
}
},
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>
<script setup lang="ts">
import { ref } from 'vue'
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',
loading: 'lazy' as const
}
},
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>
Puede utilizar el componente
PageColumns para mostrar varias PageCard en un diseño de varias columnas.API
Props (accesorios)
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
icon | anyThe icon displayed above the title. | |
title | string | |
description | string | |
orientation | 'vertical' | "vertical" | "horizontal"The orientation of the page card. |
reverse | false | boolean Reverse the order of the default slot. |
highlight | boolean Display a line around the page card. | |
highlightColor | 'primary' | "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" |
spotlight | boolean Display a spotlight effect that follows your mouse cursor and highlights borders on hover. | |
spotlightColor | 'primary' | "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" |
variant | 'outline' | "solid" | "outline" | "soft" | "subtle" | "ghost" | "naked" |
to | string | it | et | |
target | null | "_blank" | "_parent" | "_self" | "_top" | string | |
ui | { root?: SlotClass; spotlight?: SlotClass; container?: SlotClass; wrapper?: SlotClass; header?: SlotClass; body?: SlotClass; footer?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; title?: SlotClass; description?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
header | {} |
body | {} |
leading | { ui: object; } |
title | {} |
description | {} |
footer | {} |
default | {} |
Temas
app.config.ts
export default defineAppConfig({
ui: {
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: '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: [
'outline-primary/25 has-[>a:focus-visible]:outline-3',
'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: [
'outline',
'subtle'
],
to: true,
highlight: false,
class: {
root: 'has-[>a:focus-visible]:ring-primary'
}
},
{
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({
ui: {
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: '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: [
'outline-primary/25 has-[>a:focus-visible]:outline-3',
'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: [
'outline',
'subtle'
],
to: true,
highlight: false,
class: {
root: 'has-[>a:focus-visible]:ring-primary'
}
},
{
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'
}
}
}
})
]
})Changelog (Edición española)
No recent changes