> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Grup de avatare

> Avatare suprapuse cu un indicator de depășire derivat.

## Prezentare generală

`AvatarGroup` primește avatare randate și derivă numărul ascuns. `maxVisible` numără avatarurile efective; indicatorul de depășire este suplimentar. Opt avataruri furnizate cu `maxVisible={3}` afișează trei avataruri și `+5`.

**Light**

[Opt avataruri, dintre care trei vizibile (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-avatargroup--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Opt avataruri, dintre care trei vizibile (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-avatargroup--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-avatargroup--display)

## Utilizare

```tsx theme={null}
import { AvatarGroup } from 'twenty-ui/components/data-display';
import { Avatar } from 'twenty-ui/primitives/data-display';

export const TeamAvatars = () => (
  <AvatarGroup
    maxVisible={3}
    overflowShape="circle"
    overlap="left"
    overlapOffset="4px"
    avatars={[
      'Ada',
      'Grace',
      'Margaret',
      'Annie',
      'Mary',
      'Dorothy',
      'Katherine',
      'Joan',
    ].map((name) => (
      <Avatar
        key={name}
        name={name}
        shape="circle"
        imageProps={{ alt: name }}
      />
    ))}
  />
);
```

Furnizați chei stabile pentru a menține avatarurile rămase montate atunci când limita, totalul sau ordinea de afișare se schimbă. Avatarurile sunt decorative în mod implicit. Când grupul este singura reprezentare a membrilor săi, furnizează numele fiecărui membru prin `imageProps.alt` pentru a eticheta imaginea și alternativa implicită. Păstrează avatarurile decorative atunci când textul vizibil sau o etichetă a proprietarului oferă deja acea identitate.

## Opțiuni vizuale

Comparați avatarele circulare și pătrate la fiecare dimensiune. Grupul păstrează trei membri vizibili în această comparație.

**Light**

[Comparați formele și dimensiunile avatarelor (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-avatargroup--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Comparați formele și dimensiunile avatarelor (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-avatargroup--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-avatargroup--catalog)

## Colecții încărcate parțial

Utilizați `total` pentru dimensiunea completă a colecției atunci când sunt încărcate doar unele avataruri. Trei avataruri furnizate și vizibile cu `total={20}` afișează `+17`. Transmiteți toate avatarurile încărcate și lăsați grupul să aplice `maxVisible`.

```tsx theme={null}
import { AvatarGroup } from 'twenty-ui/components/data-display';
import { Avatar } from 'twenty-ui/primitives/data-display';

export const LoadedTeamAvatars = () => (
  <AvatarGroup
    maxVisible={3}
    total={20}
    avatars={['Ada', 'Grace', 'Margaret'].map((name) => (
      <Avatar key={name} name={name} imageProps={{ alt: name }} />
    ))}
  />
);
```

`total` este rotunjit în jos și nu poate fi mai mic decât numărul de avataruri randabile furnizate. Totalurile nefinite utilizează numărul furnizat. Numărul derivat de avataruri ascunse este întotdeauna nenegativ.

Valoarea implicită pentru `maxVisible` este `4`. Limitele finite sunt rotunjite în jos și limitate la zero, `Infinity` afișează toate avatarurile furnizate, iar `NaN` nu afișează niciunul. Nodurile React goale nu sunt numărate ca avataruri. O limită zero poate afișa numai indicatorul de depășire. Un grup gol cu un total pozitiv poate afișa acel total în indicatorul său; un grup gol fără avataruri ascunse nu randează nimic.

**Light**

[Trei membri încărcați dintr-o echipă de douăzeci (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-avatargroup--partially-loaded\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Trei membri încărcați dintr-o echipă de douăzeci (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-avatargroup--partially-loaded\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-avatargroup--partially-loaded)

## Depășire personalizată

`renderOverflow` primește același număr derivat de avataruri ascunse ca indicatorul implicit `+N`. Se execută numai atunci când acel număr este pozitiv. Returnați `null` pentru a ascunde indicatorul fără a modifica avatarurile vizibile.

Utilizați un control explicit atunci când indicatorul efectuează o acțiune. Numele său accesibil ar trebui să explice acțiunea și numărul.

```tsx theme={null}
import { AvatarGroup } from 'twenty-ui/components/data-display';
import { Avatar } from 'twenty-ui/primitives/data-display';
import { Button } from 'twenty-ui/primitives/input';

type TeamAvatarsWithActionProps = { onShowAll: () => void };

export const TeamAvatarsWithAction = ({
  onShowAll,
}: TeamAvatarsWithActionProps) => (
  <AvatarGroup
    maxVisible={3}
    total={20}
    avatars={['Ada', 'Grace', 'Margaret'].map((name) => (
      <Avatar key={name} name={name} imageProps={{ alt: name }} />
    ))}
    renderOverflow={(hiddenCount) => (
      <Button
        size="sm"
        aria-label={`Show ${hiddenCount} more members`}
        onClick={onShowAll}
      >
        +{hiddenCount}
      </Button>
    )}
  />
);
```

**Light**

[Buton personalizat de depășire (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-avatargroup--custom-overflow\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Buton personalizat de depășire (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-avatargroup--custom-overflow\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-avatargroup--custom-overflow)

## Aspect

Avatarurile ulterioare sunt întotdeauna randate deasupra celor anterioare. `overlap` alege marginea fizică, `left` sau `right`, care are decalajul negativ. `overlapOffset` setează acel decalaj ca lungime CSS. `overflowShape` setează forma indicatorului numeric implicit.

## Personalizarea rădăcinii

Atributele native, gestionarii de evenimente, `className` și `style` ajung la rădăcină. Elementul său implicit este un `div`, inclusiv atunci când este furnizat `onClick`. Utilizați elemente interactive native pentru acțiuni, cum ar fi butonul de depășire de mai sus.

Rădăcina acceptă un ref și `render`, care poate fi un element sau o funcție. Componentele personalizate trebuie să redirecționeze props-urile furnizate și ref către rădăcina lor nativă. Consultați [componente personalizate](https://docs.twenty.com/ro/ui/primitives/overview#custom-components) pentru cerințele de compunere.

```tsx theme={null}
import { useRef } from 'react';
import { AvatarGroup } from 'twenty-ui/components/data-display';
import { Avatar } from 'twenty-ui/primitives/data-display';

export const NamedTeamAvatars = () => {
  const groupRef = useRef<HTMLDivElement>(null);

  return (
    <AvatarGroup
      ref={groupRef}
      role="group"
      aria-label="Project members"
      style={{ marginBlock: 8 }}
      render={<div data-location="project-header" />}
      avatars={['Ada', 'Grace', 'Margaret'].map((name) => (
        <Avatar key={name} name={name} imageProps={{ alt: name }} />
      ))}
    />
  );
};
```

## Proprietăți

`AvatarGroupProps` este exportat din `twenty-ui/components/data-display`.

**avatars** `ReactNode[]` *required*

Avatar elements in display order. Empty React nodes are ignored. Supply stable keys to preserve identity when reordering.

**className** `string`

Class applied to the group container.

**maxVisible** `number` (default: 4)

Maximum number of actual avatars to show, excluding the overflow indicator. Floored and clamped to zero; Infinity shows all avatars and NaN shows none.

**overflowShape** `"circle" | "rounded-square" | "square"` (default: square)

Shape of the numeric overflow indicator.

**overlap** `"left" | "right"` (default: right)

Physical margin, left or right, that carries the negative overlap offset. Later avatars always render above earlier ones.

**overlapOffset** `string` (default: 3px)

CSS length of the overlap between avatars.

**ref** `Ref\<HTMLDivElement\>`

Ref to the rendered root element.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Element or render function for the root. Forward the supplied props and ref; the default element is a div.

**renderOverflow** `((hiddenCount: number) =\> ReactNode)`

Called with the derived hidden count when it is positive. Return a custom indicator, or null to hide it.

**total** `number`

Total collection size for partially loaded avatars. Floored and never smaller than the supplied renderable count; nonfinite values use the supplied count.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.