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 徽章