Avatar

Аватары встречаются в material design и используются во всем - от таблиц до диалоговых меню.

Аватары изображений

Аватары можно создать, передав стандартные свойства компонента img, такие как src или srcSet.

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />

Буквенные аватары

Аватары, содержащие простые символы, можно создать, передав вашу строку как children.

<Avatar>H</Avatar>
<Avatar className={classes.orange}>N</Avatar>
<Avatar className={classes.purple}>OP</Avatar>

Размеры

Вы можете изменить размер аватара используя height и width свойств CSS.

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.small} />
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.large} />

Иконочные аватары

Аватары значков создаются путем передачи значка как children.

<Avatar>
  <FolderIcon />
</Avatar>
<Avatar className={classes.pink}>
  <PageviewIcon />
</Avatar>
<Avatar className={classes.green}>
  <AssignmentIcon />
</Avatar>

Variants

Если вам нужны квадратные или округлые аватары, используйте проп variant.

<Avatar variant="square" className={classes.square}>
  N
</Avatar>
<Avatar variant="rounded" className={classes.rounded}>
  <AssignmentIcon />
</Avatar>

Запасные варианты

Если при загрузке изображения аватара возникает ошибка, компонент возвращается к альтернативному варианту в следующем порядке:

the provided children
the first letter of the alt text
a generic avatar icon

<Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange}>
  B
</Avatar>
<Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange} />
<Avatar src="/broken-image.jpg" />

Сгруппированные

AvatarGroup отображает дочерние элементы в виде стека.

<AvatarGroup max={4}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
  <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
</AvatarGroup>