Grup de avatare

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.

Utilizare

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.

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.

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.

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.

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>
    )}
  />
);

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 pentru cerințele de compunere.

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.

ReactNode[]

obligatoriu

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

string

Class applied to the group container.

number

implicit:"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.

"circle" | "rounded-square" | "square"

implicit:"square"

Shape of the numeric overflow indicator.

"left" | "right"

implicit:"right"

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

string

implicit:"3px"

CSS length of the overlap between avatars.

Ref<HTMLDivElement>

Ref to the rendered root element.

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.

((hiddenCount: number) => ReactNode)

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

number

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

Dezvoltatori

Aplicații

API

Autogazda

Contribuie

Biblioteca UI

Prezentare generală

Utilizare

Opțiuni vizuale

Colecții încărcate parțial

Depășire personalizată

Aspect

Personalizarea rădăcinii

Proprietăți

​Prezentare generală

​Utilizare

​Opțiuni vizuale

​Colecții încărcate parțial

​Depășire personalizată

​Aspect

​Personalizarea rădăcinii

​Proprietăți

Prezentare generală

Utilizare

Opțiuni vizuale

Colecții încărcate parțial

Depășire personalizată

Aspect

Personalizarea rădăcinii

Proprietăți