A versatile component for displaying entity information with customizable sections including avatar, header, description, content, and footer.
The n-thing component is Naive UI's solution for displaying information about an entity or "thing". It provides multiple slots for organizing content in a structured layout.
Use n-thing when you need to:
<template>
<n-thing title="User Profile" description="Basic information about the user">
<template #avatar>
<n-avatar>
<n-icon>
<UserIcon />
</n-icon>
</n-avatar>
</template>
This is the main content area.
</n-thing>
</template>
<template>
<n-thing>
<template #avatar>
<n-avatar round :size="48">
JD
</n-avatar>
</template>
<template #header>
John Doe
</template>
<template #header-extra>
<n-button size="small">Follow</n-button>
</template>
<template #description>
Software Engineer at Tech Company
</template>
Main content goes here. This can be any text or components.
<template #footer>
<n-space>
<n-button text>Like</n-button>
<n-button text>Comment</n-button>
<n-button text>Share</n-button>
</n-space>
</template>
<template #action>
<n-button>More Actions</n-button>
</template>
</n-thing>
</template>
<template>
<n-thing content-indented>
<template #avatar>
<n-avatar>
<n-icon>
<DocumentIcon />
</n-icon>
</n-avatar>
</template>
<template #header>
Document Title
</template>
<template #description>
Last modified: 2024-01-15
</template>
The content area will be indented to align with the header text,
creating a cleaner visual hierarchy.
</n-thing>
</template>
<template>
<n-thing
title="Project Alpha"
title-extra="v2.0.0"
description="A revolutionary new project"
content="This is the main content of the thing component."
/>
</template>
| Name | Type | Default | Description |
|---|---|---|---|
content | string | undefined | Content area text |
content-class | string | undefined | Content area class name |
content-indented | boolean | false | Whether to enable content indentation |
content-style | string | Object | undefined | Content area style |
description | string | undefined | Description information |
description-class | string | undefined | Description area class name |
description-style | string | Object | undefined | Description area style |
title | string | undefined | Title information |
title-extra | string | undefined | Additional information for the title |
| Name | Parameters | Description |
|---|---|---|
action | () | Action area slot (typically for buttons) |
avatar | () | Avatar slot |
default | () | Main content slot |
description | () | Description slot |
footer | () | Footer slot |
header | () | Header slot |
header-extra | () | Header extra slot (for additional info or actions) |
<template>
<n-thing content-indented>
<template #avatar>
<n-avatar :src="comment.avatar" round />
</template>
<template #header>
<n-space align="center">
<span>{{ comment.author }}</span>
<n-tag size="small" v-if="comment.isAuthor">Author</n-tag>
</n-space>
</template>
<template #header-extra>
<span class="time">{{ comment.time }}</span>
</template>
{{ comment.content }}
<template #footer>
<n-space>
<n-button text size="small">
<template #icon>
<n-icon><LikeIcon /></n-icon>
</template>
{{ comment.likes }}
</n-button>
<n-button text size="small">Reply</n-button>
</n-space>
</template>
</n-thing>
</template>
<script setup>
defineProps({
comment: {
type: Object,
required: true
}
})
</script>
<template>
<n-card>
<n-thing>
<template #avatar>
<n-avatar :src="user.avatar" />
</template>
<template #header>
{{ user.name }}
</template>
<template #description>
{{ user.email }}
</template>
<n-descriptions :column="1">
<n-descriptions-item label="Department">
{{ user.department }}
</n-descriptions-item>
<n-descriptions-item label="Location">
{{ user.location }}
</n-descriptions-item>
</n-descriptions>
</n-thing>
</n-card>
</template>
<template>
<n-thing content-indented>
<template #avatar>
<n-avatar :style="{ backgroundColor: activity.color }">
<n-icon>
<component :is="activity.icon" />
</n-icon>
</n-avatar>
</template>
<template #header>
{{ activity.title }}
</template>
<template #description>
{{ activity.timestamp }}
</template>
{{ activity.description }}
</n-thing>
</template>
When using an avatar, enable content-indented for cleaner visual alignment:
<n-thing content-indented>
<template #avatar>...</template>
<!-- Content aligns with header text -->
</n-thing>
<n-card hoverable>
<n-thing>
<!-- Content -->
</n-thing>
</n-card>
Place primary actions in the header-extra slot for easy access:
<template #header-extra>
<n-button-group>
<n-button size="small">Edit</n-button>
<n-button size="small">Delete</n-button>
</n-button-group>
</template>
Use content-style and description-style for consistent styling:
<n-thing
content-style="margin-top: 12px;"
description-style="color: #999;"
>
<!-- Content -->
</n-thing>
Combine with n-space for responsive layouts:
<n-space vertical>
<n-thing v-for="item in items" :key="item.id">
<!-- Content -->
</n-thing>
</n-space>