Avatar

import {Avatar} from '@gravity-ui/uikit';

Este componente está diseñado para renderizar avatares. Tiene tres tipos básicos de avatar: imagen, icono y texto (iniciales del nombre). Todos estos tipos tienen propiedades especiales para configurar el comportamiento y la apariencia.

§Tipos

§Imagen

Este componente se puede usar para renderizar avatares con imágenes. Para proporcionar una imagen, usa la imgUrl propiedad.

<Avatar imgUrl="https://loremflickr.com/640/480/cats?lock=8610182282084352" size="l" />

También puede proporcionar la srcSet propiedad para cargar imágenes de diferentes tamaños.

<Avatar imgUrl="https://loremflickr.com/640/480/cats?lock=8610182282084352" srcSet="https://loremflickr.com/57/43/cats?lock=2879400393572352 1x, https://loremflickr.com/131/98/cats?lock=4373954936438784 2x, https://loremflickr.com/164/123/cats?lock=3007328513163264 3x, https://loremflickr.com/225/169/cats?lock=8243879964835840 4x" size="l" />

El Avatar componente tiene la fallbackImgUrl propiedad que permite proporcionar la imagen que se muestra cuando se produce un error al cargar la imagen, a través del imgUrl enlace (error de CSP o falta de imagen original).

<Avatar imgUrl="random_link" fallbackImgUrl="https://loremflickr.com/640/480/cats?lock=3552647338524672" size="l" />

§Icono

Este componente se puede usar para renderizar avatares mediante iconos. Utilice la icon propiedad para proporcionar un icono, tal como lo haría en el caso del Icon componente.

import {GraduationCap} from '@gravity-ui/icons';

<Avatar icon={GraduationCap} size="l" />

§Texto

Este componente se puede usar para representar avatares usando texto. Usa la text propiedad para eso. El texto se representa como iniciales (primeras letras de dos palabras) o solo dos primeras letras de una sola palabra.

<Avatar text="Charles Darwin" size="l" />
<Avatar text="Guardian" size="l" />

§Apariencia

§Tema y vista

El Avatar componente tiene temas (normal, brand) y vistas (filled, outlined predefinidos.

El tema predeterminado es normal y la vista predeterminada es filled.

import {GraduationCap} from '@gravity-ui/icons';

<Avatar icon={GraduationCap} size="l" theme="normal" view="filled" />
<Avatar icon={GraduationCap} size="l" theme="brand" view="filled" />
<Avatar icon={GraduationCap} size="l" theme="normal" view="outlined" />
<Avatar icon={GraduationCap} size="l" theme="brand" view="outlined" />

§Colores personalizados

También puede proporcionar colores personalizados a través de las color propiedades backgroundColor borderColor, y (esta última solo funciona para avatares de iconos y texto). Estos colores tienen una prioridad mayor que los colores del tema.

<Avatar text="Charles Darwin" size="l" backgroundColor="var(--g-color-base-danger-medium)" color="var(--g-color-text-primary)" />
<Avatar text="Charles Darwin" size="l" borderColor="var(--g-color-line-misc)" />

§Tamaño

Usa la size propiedad para administrar el Avatar tamaño. El tamaño predeterminado es m. Los valores posibles son 3xs 2xs, xs, s m, l, y xl.

<Avatar text="Charles Darwin" theme="brand" size="3xs" />
<Avatar text="Charles Darwin" theme="brand" size="2xs" />
<Avatar text="Charles Darwin" theme="brand" size="xs" />
<Avatar text="Charles Darwin" theme="brand" size="s" />
<Avatar text="Charles Darwin" theme="brand" size="m" />
<Avatar text="Charles Darwin" theme="brand" size="l" />
<Avatar text="Charles Darwin" theme="brand" size="xl" />

§Propiedades

§Común

§Específico de la imagen

§Específico para cada icono

§Texto específico

§API CSS