Card
Mostrar el contenido en una tarjeta con un encabezado, cuerpo y pie de página.
xph0000xUso
Utilice las ranuras header, default y footer para añadir contenido a la tarjeta.
<template>
<UCard>
<template #header>
<Placeholder class="h-8" />
</template>
<Placeholder class="h-32" />
<template #footer>
<Placeholder class="h-8" />
</template>
</UCard>
</template>Archivo de la etiqueta: badge{label="4.7+" class="align-text-top"}
Utilice el prop title para establecer el título de la cabecera de la tarjeta.
Card with title
<template>
<UCard title="Card with title" class="w-full">
<Placeholder class="h-32" />
</UCard>
</template>Descripción: badge{label="4.7+" class="align-text-top"}
Utilice el prop description para establecer la descripción del encabezado de la tarjeta.
Card with description
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<template>
<UCard
title="Card with description"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
class="w-full"
>
<Placeholder class="h-32" />
</UCard>
</template>Variante
Utilice el prop variant para cambiar la variante de la tarjeta.
<template>
<UCard variant="subtle">
<template #header>
<Placeholder class="h-8" />
</template>
<Placeholder class="h-32" />
<template #footer>
<Placeholder class="h-8" />
</template>
</UCard>
</template>API (Edición española)
Accesorios
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
title | string | |
description | string | |
variant | 'outline' | "solid" | "outline" | "soft" | "subtle" |
ui | { root?: SlotClass; header?: SlotClass; title?: SlotClass; description?: SlotClass; body?: SlotClass; footer?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
header | {} |
title | {} |
description | {} |
default | {} |
footer | {} |
Temas
app.config.ts
export default defineAppConfig({
ui: {
card: {
slots: {
root: 'rounded-lg overflow-hidden',
header: 'p-4 sm:px-6',
title: 'text-highlighted font-semibold',
description: 'mt-1 text-muted text-sm',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'
},
variants: {
variant: {
solid: {
root: 'bg-inverted text-inverted',
title: 'text-inverted',
description: 'text-dimmed'
},
outline: {
root: 'bg-default ring ring-default divide-y divide-default'
},
soft: {
root: 'bg-elevated/50 divide-y divide-default'
},
subtle: {
root: 'bg-elevated/50 ring ring-default divide-y divide-default'
}
}
},
defaultVariants: {
variant: 'outline'
}
}
}
})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: {
card: {
slots: {
root: 'rounded-lg overflow-hidden',
header: 'p-4 sm:px-6',
title: 'text-highlighted font-semibold',
description: 'mt-1 text-muted text-sm',
body: 'p-4 sm:p-6',
footer: 'p-4 sm:px-6'
},
variants: {
variant: {
solid: {
root: 'bg-inverted text-inverted',
title: 'text-inverted',
description: 'text-dimmed'
},
outline: {
root: 'bg-default ring ring-default divide-y divide-default'
},
soft: {
root: 'bg-elevated/50 divide-y divide-default'
},
subtle: {
root: 'bg-elevated/50 ring ring-default divide-y divide-default'
}
}
},
defaultVariants: {
variant: 'outline'
}
}
}
})
]
})Changelog (Edición española)
No recent changes