Avatar
Los avatares están presentes en todo el material design, desde las tablas hasta los menús de diálogo.
Avatares de imagen
Los avatares de imagen se pueden crear pasando los props estándar img src o srcSet al componente.
Avatares de letras
Se pueden crear avatares que contengan caracteres simples pasando una cadena de texto como children.
Puede utilizar diferentes colores de fondo para el avatar. La siguiente demo genera el color basándose en el nombre de la persona.
Tamaños
Puedes cambiar el tamaño del avatar con las propiedades CSS height y width.
Iconos avatares
Los avatares icono se crean pasando un icono como children.
Variantes
Si necesitas avatares cuadrados o redondeados, usa la prop variant.
Fallbacks
Si se produce un error al cargar la imagen del avatar, el componente recurre a una alternativa en el siguiente orden:
- los hijos proporcionados
- la primera letra del texto
alt - un icono de avatar genérico
Agrupados
AvatarGroup muestra a sus hijos como una pila. Usa la propiedad max para limitar el número de avatares.
Total de avatares
Si necesitas controlar el número total de avatares no mostrados, puedes usar la prop total.
Excedente personalizado
Establece la prop renderSurplus como callback para personalizar el avatar excedente. El callback recibirá el número de excedente como argumento basado en los hijos y la prop max, y debería devolver un React.ReactNode.
La prop renderSurplus es útil cuando necesitas renderizar el excedente basándote en los datos enviados desde el servidor.
Espaciado
Puedes cambiar el espaciado entre avatares usando la propiedad spacing. Puedes usar uno de los preajustes ("medium", el predeterminado, o "small") o establecer un valor numérico personalizado.
API
Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.