Avatar

import { Avatar } from '@megafon/ui-core';

Примеры и код

Свойства и методы

Варианты использования

<Avatar />
<Avatar letters="АМ" />
<Avatar src={ImageSrc.src} alt="аватар" />

Адаптивный режим

Размер компонента подстраивается под размер родительского блока.

<div style={{ width: '24px', height: '24px' }}>
  <Avatar size="auto" />
</div>
<div style={{ width: '64px', height: '64px', 'fontSize': '22px' }}>
  <Avatar size="auto" letters="АМ" />
</div>
<div style={{ width: '80px', height: '80px' }}>
  <Avatar size="auto" src={ImageSrc.src} alt="аватар" />
</div>

Цветовые темы

<Avatar color="green" />
<Avatar color="green" letters="АМ" />
<Avatar color="gray" />
<Avatar color="gray" letters="АМ" />

Prop name	Type	Default	Description
src	string		Ссылка на изображение. Имеет приоритет над текстом
alt	string	avatar	Значение тега alt для изображения
letters	string		Текстовое отображение
color	"green" \| "gray"	green	Цвет заливки
size	"default" \| "auto"	default	Размер (по умолчанию 40х40 пикселей).
className	string		Дополнительный класс корневого элемента
dataAttrs	{ root?: Record<string, string>; }		Дополнительные data атрибуты к внутренним элементам