Avatar

Un elemento img con respaldo y soporte para Nuxt Image.

xph0000xUso

El Avatar utiliza el componente <NuxtImg> cuando @nuxt/image está instalado, volviendo a img de lo contrario.

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

Puede pasar cualquier propiedad del elemento HTML <img> como alt, loading, etc.

Para excluirse de @nuxt/image, use el prop as: :as="{ img: 'img' }".

Src (Edición española)

Utilice el prop src para configurar la URL de la imagen.

src

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

Tamaño

Utilice el accesorio size para establecer el tamaño del avatar.

size

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

Los valores width y height del elemento <img> se establecen automáticamente en función de la proposición size.

Icon

Utilice el soporte icon para mostrar un respaldo Icon.

icon

size

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

Text (Edición española)

Utilice el prop text para mostrar un texto alternativo.

text

size

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

Alt (Edición española)

Cuando no se proporciona ningún icono o texto, el initials del prop alt se utiliza como alternativa.

alt

size

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

El prop alt se pasa al elemento img como el atributo alt.

Color: badge{label="4.8+" class="align-text-top"} (en inglés)

Utilice el accesorio color para cambiar el color del Avatar.

color

alt

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

Chip (Edición española)

Utilice el soporte chip para mostrar un chip alrededor del Avatar.

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

Ejemplos

Con herramienta

Puede usar un componente Tooltip para mostrar una información sobre herramientas al pasar el Avatar.

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

Con máscara

Puedes usar una máscara CSS para mostrar un avatar con una forma personalizada en lugar de un círculo simple.

<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='http://www.w3.org/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 (Edición española)

Props (accesorios)

Prop	Default	Type
`as`	`'span'`	`any` The element or component this component should render as.
`src`		`string`
`alt`		`string`
`icon`		`any`
`text`		`string`
`size`	`'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"`
`decoding`		`"async" \| "auto" \| "sync"`
`height`		`string \| number`
`sizes`		`string`
`srcset`		`string`
`usemap`		`string`
`width`		`string \| number`
`crossorigin`		`"anonymous" \| "use-credentials"`
`ui`		`{ root?: SlotClass; image?: SlotClass; fallback?: SlotClass; icon?: SlotClass; }`

Este componente también admite todos los atributos HTML nativos de <img>.

Temas

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'
          }
        }
      }
    })
  ]
})

Changelog (Edición española)

No recent changes

Alert

A callout to draw the user's attention.

AvatarGroup

Stack multiple avatars in a group.