Avatar

GitHub
Een img-element met fallback en Nuxt Image-ondersteuning.

Gebruik

De Avatar gebruikt de <NuxtImg> component wanneer @nuxt/image is geïnstalleerd, anders valt hij terug naar img.

<template>
  <UAvatar src="https://github.com/benjamincanac.png" />
</template>
U kunt elke eigenschap van het HTML <img>-element doorgeven, zoals alt, loading, enz.
Als u zich wilt afmelden voor @nuxt/image, gebruikt u de as prop: :as="{ img: 'img' }".

Src

Gebruik de src prop om de afbeelding URL in te stellen.

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

Grootte

Gebruik de size prop om de grootte van de Avatar in te stellen.

<template>
  <UAvatar src="https://github.com/benjamincanac.png" size="xl" loading="lazy" />
</template>
De <img> elementen width en height worden automatisch ingesteld op basis van de size prop.

Icoon

Gebruik de icon prop om een Icon weer te geven.

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

Tekst

Gebruik de text prop om een fallback tekst weer te geven.

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

Alt

Als er geen pictogram of tekst is opgegeven, wordt de initials van de alt prop gebruikt als fallback.

BC
<template>
  <UAvatar alt="Benjamin Canac" size="md" />
</template>
De alt prop wordt doorgegeven aan het img element als het alt attribuut.

Kleur: badge{label="4.8+" class="align-text-top"}

Gebruik de color prop om de kleur van de Avatar te veranderen.

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

Spaander

Gebruik de chip prop om een chip rond de Avatar weer te geven.

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

Voorbeelden

Met tooltip

U kunt een Tooltip gebruiken om een tooltip weer te geven wanneer u met de Avatar beweegt.

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

Met masker

U kunt een CSS-masker gebruiken om een Avatar met een aangepaste vorm weer te geven in plaats van een eenvoudige cirkel.

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

Props

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; }
Dit onderdeel ondersteunt ook alle native <img> HTML-kenmerken.

Thema

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

Wijzigingsgelog

No recent changes

Alert

A callout to draw the user's attention.

AvatarGroup

Stack multiple avatars in a group.