### Размер аватара Размер задается с помощью свойства `size` . Возможные значения свойства: `"xxl"` , `"l"` , `"m"` , `"s"` , `"fit"` .
```tsx
import React from 'react';
import { Avatar } from '@salutejs/plasma-web';
export function App() {
return (
<>
);
}
```
### Скругления аватара Скругления задается с помощью свойства `shape` . Возможные значения: `"circled"` , `"rounded"` .
```tsx
import React from 'react';
import { Avatar } from '@salutejs/plasma-web';
export function App() {
return (
<>
);
}
```
### Инициалы вместо фотографии Инициалы можно задать с помощью свойства `name` . Желательный формат строки - "Имя Фамилия". Также не должно быть свойства url.
```tsx
import React from 'react';
import { Avatar } from '@salutejs/plasma-web';
export function App() {
return (
<>
);
}
```
### Статус аватара Статус задается с помощью свойства `status` . Возможные значения: `"active"` , `"inactive"` .
```tsx
import React from 'react';
import { Avatar } from '@salutejs/plasma-web';
export function App() {
return (
<>
);
}
```
### Увеличение при наведении Опциональное свойство `"isScalable"` .
```tsx
import React from 'react';
import { Avatar } from '@salutejs/plasma-web';
export function App() {
return (
<>
);
}
```
### Доступность #### Avatar c использованием изображения В данном случае руководствуемся принципом универсального дизайна, т.е. незрячий должен получить ту же информацию, что и зрячий. Поэтому добавляем/используем свойства: `role` , `tabIndex` и `aria-label` . Примечание: если указано свойство `name` то `aria-label` можно опустить;
```tsx
import React from 'react';
import { Avatar } from '@salutejs/plasma-web';
export function App() {
return (
<>
);
}
```
#### Avatar c текстом В этом случае достаточно указать свойство `name` .
```tsx
import React from 'react';
import { Avatar } from '@salutejs/plasma-web';
export function App() {
return (
<>
);
}
```
#### Avatar и статус Если указано свойство `status` его значение будет так же озвучено в комбинации со свойством `name` или `aria-label` .
```tsx
import React from 'react';
import { Avatar } from '@salutejs/plasma-web';
export function App() {
return (
<>
);
}
```
#### Avatar и статус Если указано свойство `status` его значение будет так же озвучено в комбинации со свойством `name` или `aria-label` . ```tsx
import React from 'react';
import { Avatar } from '@salutejs/plasma-web';
export function App() {
return (
<>
);
}
```
Озвучит как `ИФ. Неактивен` . (В данном примере озвучиваются инициалы, производное от ФИО) #### Свойство statusLabels Опциональное свойство для корректной озвучки значений свойства `status` . По-умолчанию стоит значение для русскоговорящих `{ active: 'Активен', inactive: 'Неактивен' }` . #### Avatar и дополнительный контент Чтобы отобразить дополнительный контент нужно передать свойство `hasExtra` .
Тип дополнительного контента задается с помощью свойства `type` , а его вид с помощью `badgeView` и `counterView` соответственно.
За положение дополнительного контента отвечает `extraPlacement` :
```tsx
import React from 'react';
import { Avatar } from '@salutejs/plasma-web';
export function App() {
return (
<>
);
}
```