v2.1.16
/
Use our Nuxt starter

AvatarGroup

Pile multiple avatars into a single group.
GitHub
Demo
Nuxt UI

Usage

Wrap multiple Avatar within an AvatarGroup to stack them.

Employee NameBitrix24Assistant Name
<template>
  <B24AvatarGroup>
    <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" />
    <B24Avatar src="https://github.com/bitrix24.png" alt="Bitrix24" />
    <B24Avatar src="/b24ui/avatar/assistant.png" alt="Assistant Name" />
  </B24AvatarGroup>
</template>

Size

Use the size prop to change the size of all the avatars.

Employee NameBitrix24Assistant Name
<template>
  <B24AvatarGroup size="xl">
    <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" />
    <B24Avatar src="https://github.com/bitrix24.png" alt="Bitrix24" />
    <B24Avatar src="/b24ui/avatar/assistant.png" alt="Assistant Name" />
  </B24AvatarGroup>
</template>

Max

Use the max prop to limit the number of avatars displayed. The rest is displayed as an +X avatar.

Employee NameBitrix24+1
<template>
  <B24AvatarGroup :max="2">
    <B24Avatar src="/b24ui/avatar/employee.png" alt="Employee Name" />
    <B24Avatar src="https://github.com/bitrix24.png" alt="Bitrix24" />
    <B24Avatar src="/b24ui/avatar/assistant.png" alt="Assistant Name" />
  </B24AvatarGroup>
</template>

Examples

With tooltip

Wrap each avatar with a Tooltip to display a tooltip on hover.

Assistant NameBitrix24Employee Name
<template>
  <B24AvatarGroup size="xl">
    <B24Tooltip text="Assistant Name">
      <B24Avatar
        src="/b24ui/avatar/assistant.png"
        alt="Assistant Name"
      />
    </B24Tooltip>

    <B24Tooltip text="Bitrix24">
      <B24Avatar
        src="https://github.com/bitrix24.png"
        alt="Bitrix24"
      />
    </B24Tooltip>

    <B24Tooltip text="Employee Name">
      <B24Avatar
        src="/b24ui/avatar/employee.png"
        alt="Employee Name"
      />
    </B24Tooltip>
  </B24AvatarGroup>
</template>

With chip

Wrap each avatar with a Chip to display a chip around the avatar.

Assistant NameBitrix24Employee Name
<template>
  <B24AvatarGroup size="xl">
    <B24Avatar
      src="/b24ui/avatar/assistant.png"
      alt="Assistant Name"
      :chip="{ inset: true, color: 'air-primary-success', position: 'top-left' }"
    />

    <B24Avatar
      src="https://github.com/bitrix24.png"
      alt="Bitrix24"
      :chip="{ inset: true, color: 'air-primary-warning', position: 'top-left' }"
    />

    <B24Avatar
      src="/b24ui/avatar/employee.png"
      alt="Employee Name"
      :chip="{ inset: true, color: 'air-primary-alert' }"
    />
  </B24AvatarGroup>
</template>

With link

Wrap each avatar with a Link to make them clickable.

Assistant NameBitrix24Employee Name
<template>
  <B24AvatarGroup size="xl">
    <B24Link
      to="https://github.com/bitrix24/b24ui"
      target="_blank"
      class="hover:ring-3 hover:ring-blue-500 transition"
      raw
    >
      <B24Avatar
        src="/b24ui/avatar/assistant.png"
        alt="Assistant Name"
      />
    </B24Link>

    <B24Link
      to="https://apidocs.bitrix24.com/"
      target="_blank"
      class="hover:ring-3 hover:ring-ai-500 transition"
      raw
    >
      <B24Avatar
        src="https://github.com/bitrix24.png"
        alt="Bitrix24"
      />
    </B24Link>

    <B24Link
      to="https://github.com/bitrix24/b24ui"
      target="_blank"
      class="hover:ring-3 hover:ring-collab-500 transition"
      raw
    >
      <B24Avatar
        src="/b24ui/avatar/employee.png"
        alt="Employee Name"
      />
    </B24Link>
  </B24AvatarGroup>
</template>

With mask

Wrap an avatar with a CSS mask to display it with a custom shape.

Benjamin CanacBitrix24Employee Name
<template>
  <B24AvatarGroup
    size="xl"
    :b24ui="{
      base: 'bg-(--ui-color-green-35) ring-(--ui-color-green-55)'
    }"
  >
    <B24Avatar
      src="/b24ui/avatar/assistant.png"
      alt="Benjamin Canac"
      class="rounded-none squircle"
    />

    <B24Avatar
      src="https://github.com/bitrix24.png"
      alt="Bitrix24"
    />

    <B24Avatar
      src="/b24ui/avatar/employee.png"
      alt="Employee Name"
      class="rounded-none squircle"
    />
  </B24AvatarGroup>
</template>

<style>
.squircle {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.65 20H6q-.825 0-1.412-.587T4 18v-2.65L2.075 13.4q-.275-.3-.425-.662T1.5 12t.15-.737t.425-.663L4 8.65V6q0-.825.588-1.412T6 4h2.65l1.95-1.925q.3-.275.663-.425T12 1.5t.738.15t.662.425L15.35 4H18q.825 0 1.413.588T20 6v2.65l1.925 1.95q.275.3.425.663t.15.737t-.15.738t-.425.662L20 15.35V18q0 .825-.587 1.413T18 20h-2.65l-1.95 1.925q-.3.275-.662.425T12 22.5t-.737-.15t-.663-.425z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
</style>
The chip prop does not work correctly when using a mask. Chips may be cut depending on the mask shape.

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

size'md' "md" | "3xs" | "2xs" | "xs" | "sm" | "lg" | "xl" | "2xl" | "3xl"
max string | number

The maximum number of avatars to display.

b24ui { root?: ClassNameValue; base?: ClassNameValue; }

Slots

Slot Type
default{}

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    avatarGroup: {
      slots: {
        root: 'inline-flex justify-end',
        base: 'relative rounded-full last:me-0'
      },
      variants: {
        size: {
          '3xs': {
            base: '-me-0.5'
          },
          '2xs': {
            base: '-me-0.5'
          },
          xs: {
            base: '-me-0.5'
          },
          sm: {
            base: '-me-1.5'
          },
          md: {
            base: '-me-1.5'
          },
          lg: {
            base: '-me-1.5'
          },
          xl: {
            base: '-me-2'
          },
          '2xl': {
            base: '-me-2'
          },
          '3xl': {
            base: '-me-2'
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        avatarGroup: {
          slots: {
            root: 'inline-flex justify-end',
            base: 'relative rounded-full last:me-0'
          },
          variants: {
            size: {
              '3xs': {
                base: '-me-0.5'
              },
              '2xs': {
                base: '-me-0.5'
              },
              xs: {
                base: '-me-0.5'
              },
              sm: {
                base: '-me-1.5'
              },
              md: {
                base: '-me-1.5'
              },
              lg: {
                base: '-me-1.5'
              },
              xl: {
                base: '-me-2'
              },
              '2xl': {
                base: '-me-2'
              },
              '3xl': {
                base: '-me-2'
              }
            }
          },
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})

Avatar

An img element that includes fallback and supports Nuxt Image.

Badge

A short descriptor for a status or category.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24