Die AvatarGroup

GitHub
Mehrere Avatare in einer Gruppe.

Bearbeiten

Wickeln Sie mehrere Avatar in eine AvatarGroup ein, um sie zu stapeln.

Sébastien ChopinHugo RichardBenjamin Canac
<template>
  <UAvatarGroup>
    <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" />
    <UAvatar src="https://github.com/HugoRCD.png" alt="Hugo Richard" />
    <UAvatar src="https://github.com/atinux.png" alt="Sébastien Chopin" />
  </UAvatarGroup>
</template>

Größe

Verwenden Sie die size-prop, um die Größe aller Avatare zu ändern.

Sébastien ChopinHugo RichardBenjamin Canac
<template>
  <UAvatarGroup size="xl">
    <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" loading="lazy" />
    <UAvatar src="https://github.com/HugoRCD.png" alt="Hugo Richard" loading="lazy" />
    <UAvatar src="https://github.com/atinux.png" alt="Sébastien Chopin" loading="lazy" />
  </UAvatarGroup>
</template>

Max ist

Verwenden Sie die max-Prop, um die Anzahl der angezeigten Avatare zu begrenzen.

+1Hugo RichardBenjamin Canac
<template>
  <UAvatarGroup :max="2">
    <UAvatar src="https://github.com/benjamincanac.png" alt="Benjamin Canac" loading="lazy" />
    <UAvatar src="https://github.com/HugoRCD.png" alt="Hugo Richard" loading="lazy" />
    <UAvatar src="https://github.com/atinux.png" alt="Sébastien Chopin" loading="lazy" />
  </UAvatarGroup>
</template>

Farbe: badgexx042x

Verwenden Sie die color-prop, um die Farbe aller Avatare zu ändern.

SCHRBC
<template>
  <UAvatarGroup color="primary">
    <UAvatar alt="Benjamin Canac" />
    <UAvatar alt="Hugo Richard" />
    <UAvatar alt="Sébastien Chopin" />
  </UAvatarGroup>
</template>

Examples Bearbeiten

With Tooltip Übersetzung

Wickeln Sie jeden Avatar mit einem Tooltip ein, um einen Tooltip beim Hover anzuzeigen.

Sébastien ChopinHugo RichardBenjamin Canac
<template>
  <UAvatarGroup>
    <UTooltip text="benjamincanac">
      <UAvatar
        src="https://github.com/benjamincanac.png"
        alt="Benjamin Canac"
        loading="lazy"
      />
    </UTooltip>

    <UTooltip text="HugoRCD">
      <UAvatar
        src="https://github.com/HugoRCD.png"
        alt="Hugo Richard"
        loading="lazy"
      />
    </UTooltip>

    <UTooltip text="atinux">
      <UAvatar
        src="https://github.com/atinux.png"
        alt="Sébastien Chopin"
        loading="lazy"
      />
    </UTooltip>
  </UAvatarGroup>
</template>

With Chip (englisch)

Wickeln Sie jeden Avatar mit einem Chip ein, um einen Chip um den Avatar herum anzuzeigen.

Sébastien ChopinHugo RichardBenjamin Canac
<template>
  <UAvatarGroup>
    <UAvatar
      src="https://github.com/benjamincanac.png"
      alt="Benjamin Canac"
      loading="lazy"
      :chip="{ inset: true, color: 'success' }"
    />

    <UAvatar
      src="https://github.com/HugoRCD.png"
      alt="Hugo Richard"
      loading="lazy"
      :chip="{ inset: true, color: 'warning' }"
    />

    <UAvatar
      src="https://github.com/atinux.png"
      alt="Sébastien Chopin"
      loading="lazy"
      :chip="{ inset: true, color: 'error' }"
    />
  </UAvatarGroup>
</template>

mit Link

Wickeln Sie jeden Avatar mit einem Link, um sie anklickbar zu machen.

Sébastien ChopinHugo RichardBenjamin Canac
<template>
  <UAvatarGroup>
    <ULink
      to="https://github.com/benjamincanac"
      target="_blank"
      class="hover:ring-primary transition"
      raw
    >
      <UAvatar
        src="https://github.com/benjamincanac.png"
        alt="Benjamin Canac"
        loading="lazy"
      />
    </ULink>

    <ULink
      to="https://github.com/HugoRCD"
      target="_blank"
      class="hover:ring-primary transition"
      raw
    >
      <UAvatar
        src="https://github.com/HugoRCD.png"
        alt="Hugo Richard"
        loading="lazy"
      />
    </ULink>

    <ULink
      to="https://github.com/atinux"
      target="_blank"
      class="hover:ring-primary transition"
      raw
    >
      <UAvatar
        src="https://github.com/atinux.png"
        alt="Sébastien Chopin"
        loading="lazy"
      />
    </ULink>
  </UAvatarGroup>
</template>

With Maske

Wickeln Sie einen Avatar mit einer CSS-Maske, um ihn mit einer benutzerdefinierten Form anzuzeigen.

Sébastien ChopinHugo RichardBenjamin Canac
<template>
  <UAvatarGroup :ui="{ base: 'rounded-none squircle' }">
    <UAvatar
      src="https://github.com/benjamincanac.png"
      alt="Benjamin Canac"
      loading="lazy"
      class="rounded-none squircle"
    />

    <UAvatar
      src="https://github.com/HugoRCD.png"
      alt="Hugo Richard"
      loading="lazy"
      class="rounded-none squircle"
    />

    <UAvatar
      src="https://github.com/atinux.png"
      alt="Sébastien Chopin"
      loading="lazy"
      class="rounded-none squircle"
    />
  </UAvatarGroup>
</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>
Die chip prop funktioniert nicht richtig, wenn Sie eine Maske verwenden. Chips können je nach Maskenform geschnitten werden.

API (englisch)

Props (englisch)

Prop Default Type
as
'div'
any

The element or component this component should render as.

size
'md'
"md" | "xs" | "sm" | "lg" | "xl" | "3xs" | "2xs" | "2xl" | "3xl"
color
'neutral'
"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"
max
string | number

The maximum number of avatars to display.

ui
{ root?: SlotClass; base?: SlotClass; }

Slots Bearbeiten

Slot Type
default
{}

Theme Bearbeiten

app.config.ts
export default defineAppConfig({
  ui: {
    avatarGroup: {
      slots: {
        root: 'inline-flex flex-row-reverse justify-end',
        base: 'relative rounded-full ring-bg first:me-0'
      },
      variants: {
        size: {
          '3xs': {
            base: 'ring -me-0.5'
          },
          '2xs': {
            base: 'ring -me-0.5'
          },
          xs: {
            base: 'ring -me-0.5'
          },
          sm: {
            base: 'ring-2 -me-1.5'
          },
          md: {
            base: 'ring-2 -me-1.5'
          },
          lg: {
            base: 'ring-2 -me-1.5'
          },
          xl: {
            base: 'ring-3 -me-2'
          },
          '2xl': {
            base: 'ring-3 -me-2'
          },
          '3xl': {
            base: 'ring-3 -me-2'
          }
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        }
      },
      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: {
        avatarGroup: {
          slots: {
            root: 'inline-flex flex-row-reverse justify-end',
            base: 'relative rounded-full ring-bg first:me-0'
          },
          variants: {
            size: {
              '3xs': {
                base: 'ring -me-0.5'
              },
              '2xs': {
                base: 'ring -me-0.5'
              },
              xs: {
                base: 'ring -me-0.5'
              },
              sm: {
                base: 'ring-2 -me-1.5'
              },
              md: {
                base: 'ring-2 -me-1.5'
              },
              lg: {
                base: 'ring-2 -me-1.5'
              },
              xl: {
                base: 'ring-3 -me-2'
              },
              '2xl': {
                base: 'ring-3 -me-2'
              },
              '3xl': {
                base: 'ring-3 -me-2'
              }
            },
            color: {
              primary: '',
              secondary: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            }
          },
          defaultVariants: {
            size: 'md',
            color: 'neutral'
          }
        }
      }
    })
  ]
})

Changelog (englisch)

No recent changes

Avatar

An img element with fallback and Nuxt Image support.

Badge

A short text to represent a status or a category.