N Thing

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

Slots

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>