AvatarGroup 이미지

Github (GitHub)
그룹에 여러 아바타를 쌓습니다.

Usage

AvatarGroup 내에서 여러 Avatar를 감싸서 스택합니다.

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>

Size

size Prop을 사용하여 모든 아바타의 크기를 변경합니다.

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 의 경우

max 소품을 사용하여 표시되는 아바타 수를 제한합니다. 나머지는 +X 아바타로 표시됩니다.

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

Color: badge{label="4.8+" class="align-text-top"} 색상

color Prop을 사용하여 모든 아바타의 색상을 변경합니다.

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

예

툴팁 사용

각 아바타를 Tooltip로 감싸면 커서를 놓으면 툴팁이 표시됩니다.

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로 감싸서 아바타 주위에 칩을 표시합니다.

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>

With 연결

각 아바타를 Link로 감싸서 클릭할 수 있도록 합니다.

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 마스크

CSS 마스크로 아바타를 감싸면 사용자 정의 모양으로 표시됩니다.

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>
마스크를 사용할 때 chip 소품이 제대로 작동하지 않습니다. 마스크 모양에 따라 칩이 잘릴 수 있습니다.

API 사용

Props (### 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; }

슬롯

Slot Type
default
{}

Theme 주제

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

변경 로그

No recent changes

Avatar

An img element with fallback and Nuxt Image support.

Badge

A short text to represent a status or a category.