Avatar

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

Данный компонент предназначен для рендеринга аватаров. Он поддерживает три основных типа аватаров: изображение, иконку и текст (инициалы). Все эти типы имеют специальные свойства для настройки их поведения и внешнего вида.

§Типы

§Изображение

Компонент Avatar можно применять для рендеринга аватаров с использованием изображений. Для добавления изображения используйте свойство imgUrl.

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

Дополнительно можно передать свойство srcSet, которое позволяет загружать изображения разных размеров.

<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" />

У компонента Avatar есть свойство fallbackImgUrl, которое позволяет передать изображение, которое будет показано при ошибке загрузки изображения по ссылке imgUrl (ошибка CSP или отсутствие исходного изображения).

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

§Иконка

Этот компонент можно применять для рендеринга аватаров с использованием иконок. Чтобы задать иконку, используйте свойство icon точно так же, как для компонента Icon.

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

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

§Текст

Этот компонент можно применять для рендеринга аватаров с использованием текста. Для этого используйте свойство text. Текст отображается в виде инициалов (первых букв двух слов) или первых двух букв одного слова.

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

§Внешний вид

§Тема и вид

Компонент Avatar имеет предустановленные темы (normal и brand) и виды (filled и outlined).

По умолчанию тема — normal, а вид — 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" />

§Пользовательские цвета

Можно также задать собственные цвета через свойства backgroundColor, borderColor и color (последнее работает только для аватарок с иконками и текстом). Эти цвета обладают бóльшим приоритетом по сравнению с цветами, которые заданы в темах.

<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)" />

§Размер

Размер Avatar можно настроить с помощью свойства size. Размер по умолчанию — m. Возможные значения: xs, s, m, l и xl.

<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" />

§Форма

Форму Avatar можно настроить с помощью свойства shape. Форма по умолчанию — circle. Возможные значения: circle и square.

<Avatar text="Charles Darwin" theme="brand" shape="circle" />
<Avatar text="Charles Darwin" theme="brand" shape="square" />

§Свойства

§Общие

§Свойства изображений

§Свойства иконки

§Свойства текста

§API CSS