Resumen
AvatarGroup recibe avatares renderizados y calcula el recuento oculto. maxVisible cuenta los avatares reales; el indicador de desbordamiento es adicional. Ocho avatares proporcionados con maxVisible={3} muestran tres avatares y +5.
Uso
imageProps.alt para etiquetar la imagen y el recurso alternativo predeterminado. Mantén los avatares decorativos cuando el texto visible o una etiqueta de propietario ya proporcione esa identidad.
Opciones visuales
Compara avatares circulares y cuadrados en cada tamaño. El grupo mantiene tres miembros visibles en esta comparación.Colecciones cargadas parcialmente
Usetotal para el tamaño completo de la colección cuando solo se hayan cargado algunos avatares. Tres avatares proporcionados y visibles con total={20} muestran +17. Pase todos los avatares cargados y deje que el grupo aplique maxVisible.
total se redondea hacia abajo y no puede ser menor que el número de avatares renderizables proporcionados. Los totales no finitos usan el recuento proporcionado. El recuento derivado de elementos ocultos siempre es no negativo.
maxVisible tiene como valor predeterminado 4. Los límites finitos se redondean hacia abajo y se restringen a cero, Infinity muestra todos los avatares proporcionados y NaN no muestra ninguno. Los nodos de React vacíos no cuentan como avatares. Un límite de cero puede mostrar solo el indicador de desbordamiento. Un grupo vacío con un total positivo puede mostrar ese total en su indicador; un grupo vacío sin avatares ocultos no renderiza nada.
Desbordamiento personalizado
renderOverflow recibe el mismo recuento derivado de elementos ocultos que el indicador predeterminado +N. Solo se ejecuta cuando ese recuento es positivo. Devuelva null para ocultar el indicador sin cambiar qué avatares son visibles.
Use un control explícito cuando el indicador realice una acción. Su nombre accesible debe explicar la acción y el recuento.
Apariencia
Los avatares posteriores siempre se renderizan encima de los anteriores.overlap elige el margen físico, left o right, que lleva el desplazamiento negativo. overlapOffset establece ese desplazamiento como una longitud CSS. overflowShape establece la forma del indicador numérico predeterminado.
Personalización de la raíz
Los atributos nativos, los controladores de eventos,className y style llegan a la raíz. Su elemento predeterminado es un div, incluso cuando se proporciona onClick. Use elementos interactivos nativos para las acciones, como el botón de desbordamiento anterior.
La raíz acepta una ref y render, que puede ser un elemento o una función. Los componentes personalizados deben reenviar las props proporcionadas y la ref a su raíz nativa. Consulte componentes personalizados para conocer los requisitos de composición.
”Props”
AvatarGroupProps se exporta desde twenty-ui/components/data-display.
ReactNode[]
requerido
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
predeterminado:"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"
predeterminado:"square"
Shape of the numeric overflow indicator.
"left" | "right"
predeterminado:"right"
Physical margin, left or right, that carries the negative overlap offset. Later avatars always render above earlier ones.
string
predeterminado:"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.