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 属性指定一个图片链接作为头像，或者在 default slot 中提供一个 <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。

图标头像

可以使用 icon 属性指定一个 Material Icons 图标作为头像，或者在 default slot 中提供一个图标元素作为头像。

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

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

源码

字符头像

可以在 default slot 中使用任意文字作为头像。

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

源码

API

属性

HTML 属性	JavaScript 属性	类型	默认值
`src`	`src`	`string`	-
头像图片的 URL 地址
`fit`	`fit`	`'contain' \| 'cover' \| 'fill' \| 'none' \| 'scale-down'`	-
图片如何适应容器框，与原生的 `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 徽标