Blogpost zu
Ein anpassbarer Artikel, der in einer Blog-Seite angezeigt werden soll.
Bearbeiten
Die BlogPost-Komponente bietet eine flexible Möglichkeit, ein <article>-Element mit anpassbaren Inhalten wie Titel, Beschreibung, Bild usw. anzuzeigen.
Verwenden Sie die
BlogPosts-Komponente, um mehrere Blog-Posts in einem responsiven Rasterlayout anzuzeigen.Titel
Verwenden Sie die title-Prop, um den Titel des BlogPosts anzuzeigen.
Introducing Nuxt Icon v1
<template>
<UBlogPost title="Introducing Nuxt Icon v1" />
</template>Beschreibung
Verwenden Sie die description prop, um die Beschreibung des BlogPost anzuzeigen.
Introducing Nuxt Icon v1
Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects.
<template>
<UBlogPost
title="Introducing Nuxt Icon v1"
description="Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects."
/>
</template>Date (englisch)
Verwenden Sie die date-Prop, um das Datum des BlogPosts anzuzeigen.
Das Datum wird automatisch mit dem Format current locale formatiert. Sie können entweder ein
Date-Objekt oder eine Zeichenfolge übergeben.Introducing Nuxt Icon v1
Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects.
<template>
<UBlogPost
title="Introducing Nuxt Icon v1"
description="Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects."
date="2024-11-25"
/>
</template>Abzeichen
Verwenden Sie die badge-Prop, um eine Badge im BlogPost anzuzeigen.
Release
Introducing Nuxt Icon v1
Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects.
<template>
<UBlogPost
title="Introducing Nuxt Icon v1"
description="Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects."
badge="Release"
/>
</template>Sie können jede Eigenschaft der Komponente Badge übergeben, um sie anzupassen.
Release
Introducing Nuxt Icon v1
Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects.
<template>
<UBlogPost
title="Introducing Nuxt Icon v1"
description="Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects."
:badge="{
label: 'Release',
color: 'primary',
variant: 'solid'
}"
/>
</template>Bild
Verwenden Sie die image-Prop, um ein Bild im BlogPost anzuzeigen.
Wenn [
@nuxt/imagexph11xxph11xhttps://image.nuxt.com/get-started/installation) installiert ist, wird die <NuxtImg>-Komponente anstelle des nativen img-Tags verwendet.Introducing Nuxt Icon v1
Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects.
<template>
<UBlogPost
title="Introducing Nuxt Icon v1"
description="Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects."
image="https://nuxt.com/assets/blog/nuxt-icon/cover.png"
date="2024-11-25"
/>
</template>Authors (englisch)
Verwenden Sie die authors-prop, um eine Liste von User im BlogPost als Array von Objekten mit den folgenden Eigenschaften anzuzeigen:
name?: string(nicht)description?: string(nicht)avatar?: Omit<AvatarProps, 'size'>(englisch)chip?: boolean | Omit<ChipProps, 'size' | 'inset'>(englisch)size?: UserProps['size'](nicht)orientation?: UserProps['orientation'](englisch)
Sie können jede Eigenschaft der Komponente Link übergeben, z. B. to, target usw.
<script setup lang="ts">
import type { UserProps } from '@nuxt/ui'
const authors = ref<UserProps[]>([
{
name: 'Anthony Fu',
description: 'antfu7',
avatar: {
src: 'https://github.com/antfu.png',
loading: 'lazy'
},
to: 'https://github.com/antfu',
target: '_blank'
}
])
</script>
<template>
<UBlogPost
title="Introducing Nuxt Icon v1"
description="Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects."
image="https://nuxt.com/assets/blog/nuxt-icon/cover.png"
date="2024-11-25"
:authors="authors"
/>
</template><script setup lang="ts">
import { ref } from 'vue'
import type { UserProps } from '@nuxt/ui'
const authors = ref<UserProps[]>([
{
name: 'Anthony Fu',
description: 'antfu7',
avatar: {
src: 'https://github.com/antfu.png',
loading: 'lazy'
},
to: 'https://github.com/antfu',
target: '_blank'
}
])
</script>
<template>
<UBlogPost
title="Introducing Nuxt Icon v1"
description="Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects."
image="https://nuxt.com/assets/blog/nuxt-icon/cover.png"
date="2024-11-25"
:authors="authors"
/>
</template>Wenn die authors-Prop mehr als ein Element enthält, wird die AvatarGroup-Komponente verwendet.
Introducing Nuxt Icon v1
Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects.
<script setup lang="ts">
import type { UserProps } from '@nuxt/ui'
const authors = ref<UserProps[]>([
{
name: 'Anthony Fu',
description: 'antfu7',
avatar: {
src: 'https://github.com/antfu.png',
loading: 'lazy'
},
to: 'https://github.com/antfu',
target: '_blank'
},
{
name: 'Benjamin Canac',
description: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
},
to: 'https://github.com/benjamincanac',
target: '_blank'
}
])
</script>
<template>
<UBlogPost
title="Introducing Nuxt Icon v1"
description="Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects."
image="https://nuxt.com/assets/blog/nuxt-icon/cover.png"
date="2024-11-25"
:authors="authors"
/>
</template><script setup lang="ts">
import { ref } from 'vue'
import type { UserProps } from '@nuxt/ui'
const authors = ref<UserProps[]>([
{
name: 'Anthony Fu',
description: 'antfu7',
avatar: {
src: 'https://github.com/antfu.png',
loading: 'lazy'
},
to: 'https://github.com/antfu',
target: '_blank'
},
{
name: 'Benjamin Canac',
description: 'benjamincanac',
avatar: {
src: 'https://github.com/benjamincanac.png',
loading: 'lazy'
},
to: 'https://github.com/benjamincanac',
target: '_blank'
}
])
</script>
<template>
<UBlogPost
title="Introducing Nuxt Icon v1"
description="Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects."
image="https://nuxt.com/assets/blog/nuxt-icon/cover.png"
date="2024-11-25"
:authors="authors"
/>
</template>Link ist
Sie können jede Eigenschaft der Komponente <NuxtLink> übergeben, z. B. to, target, rel usw.
<template>
<UBlogPost
title="Introducing Nuxt Icon v1"
description="Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects."
image="https://nuxt.com/assets/blog/nuxt-icon/cover.png"
date="2024-11-25"
to="https://nuxt.com/blog/nuxt-icon-v1-0"
target="_blank"
/>
</template>Variant Bearbeiten
Verwenden Sie die variant-prop, um den Stil des BlogPost zu ändern.
<template>
<UBlogPost
title="Introducing Nuxt Icon v1"
description="Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects."
image="https://nuxt.com/assets/blog/nuxt-icon/cover.png"
date="2024-11-25"
to="https://nuxt.com/blog/nuxt-icon-v1-0"
target="_blank"
variant="naked"
/>
</template>Das Styling wird unterschiedlich sein, ob Sie eine
to-Stütze oder eine image zur Verfügung stellen.Orientierung.
Verwenden Sie die orientation-prop, um die BlogPost-Ausrichtung zu ändern. Standardmäßig auf vertical.
<template>
<UBlogPost
title="Introducing Nuxt Icon v1"
description="Discover Nuxt Icon v1 - a modern, versatile, and customizable icon solution for your Nuxt projects."
image="https://nuxt.com/assets/blog/nuxt-icon/cover.png"
date="2024-11-25"
to="https://nuxt.com/blog/nuxt-icon-v1-0"
target="_blank"
orientation="horizontal"
variant="outline"
/>
</template>x306xAPI
Props (nicht)
| Prop | Default | Type |
|---|---|---|
as | 'article' | anyThe element or component this component should render as. |
title | string | |
description | string | |
date | string | DateThe date of the blog post. Can be a string or a Date object. | |
badge | string | BadgePropsDisplay a badge on the blog post.
Can be a string or an object.
| |
authors | UserProps[]The authors of the blog post. | |
image | string | Partial<ImgHTMLAttributes> & { [key: string]: any; }The image of the blog post. Can be a string or an object. | |
orientation | 'vertical' | "vertical" | "horizontal"The orientation of the blog post. |
variant | 'outline' | "outline" | "soft" | "subtle" | "ghost" | "naked" |
to | string | it | et | |
target | null | "_blank" | "_parent" | "_self" | "_top" | string | |
ui | { root?: SlotClass; header?: SlotClass; body?: SlotClass; footer?: SlotClass; image?: SlotClass; title?: SlotClass; description?: SlotClass; authors?: SlotClass; avatar?: SlotClass; meta?: SlotClass; date?: SlotClass; badge?: SlotClass; } |
Slots (englisch)
| Slot | Type |
|---|---|
date | {} |
badge | {} |
title | {} |
description | {} |
authors | { ui: object; } |
header | { ui: object; } |
body | {} |
footer | {} |
Theme Bearbeiten
app.config.ts
export default defineAppConfig({
ui: {
blogPost: {
slots: {
root: 'relative group/blog-post flex flex-col rounded-lg overflow-hidden',
header: 'relative overflow-hidden aspect-[16/9] w-full pointer-events-none',
body: 'min-w-0 flex-1 flex flex-col',
footer: '',
image: 'object-cover object-top w-full h-full',
title: 'text-xl text-pretty font-semibold text-highlighted',
description: 'mt-1 text-base text-pretty',
authors: 'pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5',
avatar: '',
meta: 'flex items-center gap-2 mb-2',
date: 'text-sm',
badge: ''
},
variants: {
orientation: {
horizontal: {
root: 'lg:grid lg:grid-cols-2 lg:items-center gap-x-8',
body: 'justify-center p-4 sm:p-6 lg:px-0'
},
vertical: {
root: 'flex flex-col',
body: 'p-4 sm:p-6'
}
},
variant: {
outline: {
root: 'bg-default ring ring-default',
date: 'text-toned',
description: 'text-muted'
},
soft: {
root: 'bg-elevated/50',
date: 'text-muted',
description: 'text-toned'
},
subtle: {
root: 'bg-elevated/50 ring ring-default',
date: 'text-muted',
description: 'text-toned'
},
ghost: {
date: 'text-toned',
description: 'text-muted',
header: 'shadow-lg rounded-lg'
},
naked: {
root: 'p-0 sm:p-0',
date: 'text-toned',
description: 'text-muted',
header: 'shadow-lg rounded-lg'
}
},
to: {
true: {
root: [
'outline-primary/25 has-[>a:focus-visible]:outline-3',
'transition'
],
image: 'transform transition-transform ease-out motion-reduce:transition-none group-hover/blog-post:scale-110',
avatar: 'inline-flex transform transition-transform ease-out motion-reduce:transition-none hover:scale-115 rounded-full outline-primary/25 focus-visible:outline-3'
}
},
image: {
true: ''
}
},
compoundVariants: [
{
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 hover:ring-accented'
}
},
{
variant: [
'outline',
'subtle'
],
to: true,
class: {
root: 'has-[>a:focus-visible]:ring-primary'
}
},
{
variant: 'ghost',
to: true,
class: {
root: 'hover:bg-elevated/50',
header: [
'group-hover/blog-post:shadow-none',
'transition-[box-shadow,border-radius] ease-out'
]
}
},
{
variant: 'ghost',
to: true,
orientation: 'vertical',
class: {
header: 'group-hover/blog-post:rounded-b-none'
}
},
{
variant: 'ghost',
to: true,
orientation: 'horizontal',
class: {
header: 'group-hover/blog-post:rounded-e-none'
}
},
{
orientation: 'vertical',
image: false,
variant: 'naked',
class: {
body: 'p-0 sm:p-0'
}
}
],
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: {
blogPost: {
slots: {
root: 'relative group/blog-post flex flex-col rounded-lg overflow-hidden',
header: 'relative overflow-hidden aspect-[16/9] w-full pointer-events-none',
body: 'min-w-0 flex-1 flex flex-col',
footer: '',
image: 'object-cover object-top w-full h-full',
title: 'text-xl text-pretty font-semibold text-highlighted',
description: 'mt-1 text-base text-pretty',
authors: 'pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5',
avatar: '',
meta: 'flex items-center gap-2 mb-2',
date: 'text-sm',
badge: ''
},
variants: {
orientation: {
horizontal: {
root: 'lg:grid lg:grid-cols-2 lg:items-center gap-x-8',
body: 'justify-center p-4 sm:p-6 lg:px-0'
},
vertical: {
root: 'flex flex-col',
body: 'p-4 sm:p-6'
}
},
variant: {
outline: {
root: 'bg-default ring ring-default',
date: 'text-toned',
description: 'text-muted'
},
soft: {
root: 'bg-elevated/50',
date: 'text-muted',
description: 'text-toned'
},
subtle: {
root: 'bg-elevated/50 ring ring-default',
date: 'text-muted',
description: 'text-toned'
},
ghost: {
date: 'text-toned',
description: 'text-muted',
header: 'shadow-lg rounded-lg'
},
naked: {
root: 'p-0 sm:p-0',
date: 'text-toned',
description: 'text-muted',
header: 'shadow-lg rounded-lg'
}
},
to: {
true: {
root: [
'outline-primary/25 has-[>a:focus-visible]:outline-3',
'transition'
],
image: 'transform transition-transform ease-out motion-reduce:transition-none group-hover/blog-post:scale-110',
avatar: 'inline-flex transform transition-transform ease-out motion-reduce:transition-none hover:scale-115 rounded-full outline-primary/25 focus-visible:outline-3'
}
},
image: {
true: ''
}
},
compoundVariants: [
{
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 hover:ring-accented'
}
},
{
variant: [
'outline',
'subtle'
],
to: true,
class: {
root: 'has-[>a:focus-visible]:ring-primary'
}
},
{
variant: 'ghost',
to: true,
class: {
root: 'hover:bg-elevated/50',
header: [
'group-hover/blog-post:shadow-none',
'transition-[box-shadow,border-radius] ease-out'
]
}
},
{
variant: 'ghost',
to: true,
orientation: 'vertical',
class: {
header: 'group-hover/blog-post:rounded-b-none'
}
},
{
variant: 'ghost',
to: true,
orientation: 'horizontal',
class: {
header: 'group-hover/blog-post:rounded-e-none'
}
},
{
orientation: 'vertical',
image: false,
variant: 'naked',
class: {
body: 'p-0 sm:p-0'
}
}
],
defaultVariants: {
variant: 'outline'
}
}
}
})
]
})Changelog (englisch)
No recent changes