Avatar

一个支持回退和 Nuxt Image 的 img 元素。

用法

当安装了 @nuxt/image 时，Avatar 组件会使用 <NuxtImg> 组件，否则将回退到 img。

<template>
  <UAvatar src="https://github.com/benjamincanac.png" />
</template>

你可以传递 HTML <img> 元素的任何属性，例如 alt、loading 等。

若要禁用 @nuxt/image，请使用 as 属性：:as="{ img: 'img' }"。

Src

使用 src 属性来设置图片 URL。

src

<template>
  <UAvatar src="https://github.com/benjamincanac.png" loading="lazy" />
</template>

尺寸

使用 size 属性来设置头像的大小。

尺寸

<template>
  <UAvatar src="https://github.com/benjamincanac.png" size="xl" loading="lazy" />
</template>

<img> 元素的 width 和 height 会根据 size 属性自动设置。

Icon

使用 icon 属性来显示一个回退图标 (Icon)。

图标

尺寸

<template>
  <UAvatar icon="i-lucide-image" size="md" />
</template>

文本

使用 text 属性来显示回退文本。

文本

尺寸

<template>
  <UAvatar text="+1" size="md" />
</template>

Alt

当未提供图标或文本时，alt 属性的首字母将作为回退内容使用。

alt

尺寸

<template>
  <UAvatar alt="Benjamin Canac" size="md" />
</template>

alt 属性会作为 alt 属性传递给 img 元素。

颜色 4.8+

使用 color 属性来更改头像颜色。

color

alt

<template>
  <UAvatar color="primary" alt="Benjamin Canac" />
</template>

Chip

使用 chip 属性在头像周围显示一个状态标牌 (chip)。

<template>
  <UAvatar
    src="https://github.com/benjamincanac.png"
    loading="lazy"
    :chip="{
      inset: true
    }"
  />
</template>

示例

你可以使用工具提示 (Tooltip) 组件在悬停头像时显示提示信息。

<template>
  <UTooltip text="Benjamin Canac">
    <UAvatar
      src="https://github.com/benjamincanac.png"
      alt="Benjamin Canac"
      loading="lazy"
    />
  </UTooltip>
</template>

带遮罩

你可以使用 CSS 遮罩 (mask) 来显示自定义形状的头像，而非简单的圆形。

<template>
  <UAvatar class="rounded-none squircle" src="https://avatars.githubusercontent.com/u/739984?v=4" alt="Benjamin Canac" loading="lazy" />
</template>

<style>
.squircle {
  mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='https://w3org.cn/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
</style>

API

属性

属性	默认值	类型
`as`	`'span'`	`any` 此组件应渲染为的元素或组件。
`src`		`string`
`alt`		`string`
`图标`		`any`
`文本`		`string`
`尺寸`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl" \| "3xs" \| "2xs" \| "2xl" \| "3xl"`
`color`	`'neutral'`	`"error" \| "primary" \| "secondary" \| "success" \| "info" \| "warning" \| "neutral"`
`chip`		`boolean \| ChipProps`
`loading`		`"lazy" \| "eager"`
`referrerpolicy`		`"" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url"`
`crossorigin`		`"" \| "anonymous" \| "use-credentials"`
`decoding`		`"async" \| "auto" \| "sync"`
`height`		`string \| number`
`sizes`		`string`
`srcset`		`string`
`usemap`		`string`
`width`		`string \| number`
`ui`		`{ root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; }`

此组件还支持所有原生 <img> HTML 属性。

主题

app.config.ts

export default defineAppConfig({
  ui: {
    avatar: {
      slots: {
        root: 'inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle',
        image: 'h-full w-full rounded-[inherit] object-cover',
        fallback: 'font-medium truncate',
        icon: 'shrink-0'
      },
      variants: {
        color: {
          primary: {
            root: 'bg-primary/10',
            fallback: 'text-primary',
            icon: 'text-primary'
          },
          secondary: {
            root: 'bg-secondary/10',
            fallback: 'text-secondary',
            icon: 'text-secondary'
          },
          success: {
            root: 'bg-success/10',
            fallback: 'text-success',
            icon: 'text-success'
          },
          info: {
            root: 'bg-info/10',
            fallback: 'text-info',
            icon: 'text-info'
          },
          warning: {
            root: 'bg-warning/10',
            fallback: 'text-warning',
            icon: 'text-warning'
          },
          error: {
            root: 'bg-error/10',
            fallback: 'text-error',
            icon: 'text-error'
          },
          neutral: {
            root: 'bg-elevated',
            fallback: 'text-muted',
            icon: 'text-muted'
          }
        },
        size: {
          '3xs': {
            root: 'size-4 text-[8px]'
          },
          '2xs': {
            root: 'size-5 text-[10px]'
          },
          xs: {
            root: 'size-6 text-xs'
          },
          sm: {
            root: 'size-7 text-sm'
          },
          md: {
            root: 'size-8 text-base'
          },
          lg: {
            root: 'size-9 text-lg'
          },
          xl: {
            root: 'size-10 text-xl'
          },
          '2xl': {
            root: 'size-11 text-[22px]'
          },
          '3xl': {
            root: 'size-12 text-2xl'
          }
        }
      },
      defaultVariants: {
        size: 'md',
        color: 'neutral'
      }
    }
  }
})

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: {
        avatar: {
          slots: {
            root: 'inline-flex items-center justify-center shrink-0 select-none rounded-full align-middle',
            image: 'h-full w-full rounded-[inherit] object-cover',
            fallback: 'font-medium truncate',
            icon: 'shrink-0'
          },
          variants: {
            color: {
              primary: {
                root: 'bg-primary/10',
                fallback: 'text-primary',
                icon: 'text-primary'
              },
              secondary: {
                root: 'bg-secondary/10',
                fallback: 'text-secondary',
                icon: 'text-secondary'
              },
              success: {
                root: 'bg-success/10',
                fallback: 'text-success',
                icon: 'text-success'
              },
              info: {
                root: 'bg-info/10',
                fallback: 'text-info',
                icon: 'text-info'
              },
              warning: {
                root: 'bg-warning/10',
                fallback: 'text-warning',
                icon: 'text-warning'
              },
              error: {
                root: 'bg-error/10',
                fallback: 'text-error',
                icon: 'text-error'
              },
              neutral: {
                root: 'bg-elevated',
                fallback: 'text-muted',
                icon: 'text-muted'
              }
            },
            size: {
              '3xs': {
                root: 'size-4 text-[8px]'
              },
              '2xs': {
                root: 'size-5 text-[10px]'
              },
              xs: {
                root: 'size-6 text-xs'
              },
              sm: {
                root: 'size-7 text-sm'
              },
              md: {
                root: 'size-8 text-base'
              },
              lg: {
                root: 'size-9 text-lg'
              },
              xl: {
                root: 'size-10 text-xl'
              },
              '2xl': {
                root: 'size-11 text-[22px]'
              },
              '3xl': {
                root: 'size-12 text-2xl'
              }
            }
          },
          defaultVariants: {
            size: 'md',
            color: 'neutral'
          }
        }
      }
    })
  ]
})

更新日志

暂无近期更新

Alert

AvatarGroup