AvatarGroep

GitHub
Stapel meerdere avatars in een groep.

Gebruik

Wikkel meerdere Avatar in een AvatarGroup om ze te stapelen.

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>

Grootte

Gebruik de size prop om de grootte van alle avatars te wijzigen.

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

Gebruik de max prop om het aantal weergegeven avatars te beperken. De rest wordt weergegeven als een +X avatar.

+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>

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

Gebruik de color prop om de kleur van alle avatars te veranderen.

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

Voorbeelden

Met tooltip

Wikkel elke avatar in met een Tooltip om een tooltip weer te geven bij zweven.

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>

Met chip

Wikkel elke avatar met een Chip om een chip rond de avatar weer te geven.

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>

Met link

Wikkel elke avatar in met een Link om ze klikbaar te maken.

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>

Met masker

Wikkel een avatar in met een CSS-masker om deze weer te geven met een aangepaste vorm.

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>
De chip prop werkt niet goed bij het gebruik van een masker. Chips kunnen worden gesneden, afhankelijk van de vorm van het masker.

API

Props

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

Slot Type
default
{}

Thema

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

Wijzigingsgelog

No recent changes

Avatar

An img element with fallback and Nuxt Image support.

Badge

A short text to represent a status or a category.