n-thing

name	n-thing
description	A versatile component for displaying entity information with customizable sections including avatar, header, description, content, and footer.
author	jiaiyan
version	1.0.0

n-thing Component

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.

When to Use

Use n-thing when you need to:

• Display entity information with multiple sections
• Create card-like layouts with avatar, title, and description
• Build comment or post components
• Show structured information with header, content, and actions

Basic Usage

Simple Thing

<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>

Full Featured Thing

<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>

Content Indented

<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>

Using Props Instead of Slots

<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>

API Reference

Props

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

Slots

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)

Common Patterns

Comment Component

<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>

Card with Thing

<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>

Activity Feed Item

<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>

Best Practices

1. Use Content Indented for Better Alignment

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>

2. Combine with Card for Bordered Layout

<n-card hoverable>
  <n-thing>
    <!-- Content -->
  </n-thing>
</n-card>

3. Use Header-Extra for Actions

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>

4. Style Consistency

Use content-style and description-style for consistent styling:

<n-thing
  content-style="margin-top: 12px;"
  description-style="color: #999;"
>
  <!-- Content -->
</n-thing>

5. Responsive Layout

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>