UserChip (用户胶囊)

<script setup lang="ts">
import type { KunUser } from '@kungal/ui-vue'

const avatar = '/favicon.webp'
const user: KunUser = { id: 1, name: 'Kun', avatar }
</script>

<template>
  <KunUserChip :user="user" :is-navigation="false" />
</template>

<script setup lang="ts">
import type { KunUser } from '@kungal/ui-vue'

const avatar = '/favicon.webp'
const user: KunUser = { id: 1, name: 'Kun', avatar }
</script>

<template>
  <!-- A secondary `description` line renders under the name in a muted color. -->
  <KunUserChip
    :user="user"
    description="2024 年加入 · 管理员"
    size="lg"
    :is-navigation="false"
  />
</template>

<script setup lang="ts">
import type { KunUser } from '@kungal/ui-vue'

const avatar = '/favicon.webp'

// With `isNavigation` (the default) and a user that has an `id`, the WHOLE chip
// becomes one crawlable link to the profile, with the name as anchor text.
const user: KunUser = { id: 42, name: 'Kun', avatar }
</script>

<template>
  <KunUserChip :user="user" description="点击进入个人主页" />
</template>

<script setup lang="ts">
import type { KunUser } from '@kungal/ui-vue'

const avatar = '/favicon.webp'

// Long names and descriptions truncate with an ellipsis inside a constrained box.
const user: KunUser = {
  id: 1,
  name: '这是一个非常非常长的用户名会被自动截断显示省略号',
  avatar,
}
</script>

<template>
  <div class="w-56">
    <KunUserChip
      :user="user"
      description="同样很长的一段个人简介也会被截断而不会撑破布局"
      :is-navigation="false"
    />
  </div>
</template>