AvatarАватар

Аватар используется для представления пользователя или объекта; поддерживает различные формы: изображения, иконки или текст.

Использование

При необходимости импортируйте компонент:

import 'mdui/components/avatar.js';

При необходимости импортируйте типы TypeScript:

import type { Avatar } from 'mdui/components/avatar.js';

Пример использования:

<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>

Примеры

Аватар на основе изображения

Вы можете указать ссылку на изображение через атрибут src или предоставить элемент <img> в слоте по умолчанию.

<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>

<mdui-avatar>
  <img src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4" alt="Пример аватара из изображения"/>
</mdui-avatar>

Исходный код

Используйте атрибут fit для определения того, как изображение вписывается в контейнер, аналогично нативному object-fit.

Аватар на основе иконки

Вы можете указать иконку Material Icons с помощью атрибута icon или предоставить элемент иконки в слоте по умолчанию.

<mdui-avatar icon="people_alt"></mdui-avatar>

<mdui-avatar>
  <mdui-icon name="people_alt"></mdui-icon>
</mdui-avatar>

Исходный код

Текстовый аватар

Вы можете использовать любой текст в слоте по умолчанию в качестве аватара.

<mdui-avatar>A</mdui-avatar>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`src`	`src`	`string`	-
URL изображения аватара.
`fit`	`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`	-
Определяет, как изображение будет вписываться в контейнер, аналогично CSS-свойству `object-fit`. Возможные значения: `contain` — сохраняет пропорции изображения, содержимое масштабируется пропорционально `cover` — сохраняет пропорции изображения, но часть содержимого может быть обрезана `fill` — значение по умолчанию, не сохраняет пропорции, содержимое растягивается, чтобы заполнить весь контейнер `none` — сохраняет исходный размер изображения, содержимое не масштабируется и не растягивается `scale-down` — сохраняет пропорции изображения, размер содержимого соответствует меньшему из `none` или `contain`
`icon`	`icon`	`string`	-
Имя иконки Material Icons для аватара.
`label`	`label`	`string`	-
Альтернативный текст для аватара.

Slots

Название
(по умолчанию)
Пользовательское содержимое аватара: буквы, символы, элемент `<img>`, иконки и т.д.

CSS Parts

Название
`image`
Внутренний элемент `<img>`, отображаемый при использовании изображения в качестве аватара.
`icon`
Внутренний элемент `<mdui-icon>`, отображаемый при использовании иконки в качестве аватара.

Пользовательские CSS-свойства

Название
`--shape-corner`
Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.

Предыдущая глава

Другие

Следующая глава

Badge Бейдж