# 头像

图片头像；图片缺失或加载失败时，用姓名首字（中文取第一个字，英文取首字母）和由姓名决定的颜色代替。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<span class="zh-avatar" data-name="张三" data-size="md"></span>
<span class="zh-avatar" data-name="Ada Lovelace" data-size="md"></span>
<span class="zh-avatar" data-name="设计" data-size="md" data-shape="square"></span>
<span class="zh-avatar" data-name="在线" data-size="lg" data-status="success"></span>
```

## 样式类

`zh-avatar`、`zh-avatar-face`、`zh-avatar-status`、`zh-avatar-group`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `data-name` | .zh-avatar | 字符串 | 姓名；必填，库据此初始化，也是无障碍名称 |
| `data-src` | .zh-avatar | 图片地址 | 头像图片；加载失败自动退回首字 |
| `data-size` | .zh-avatar | xs \| sm \| md \| lg \| xl | 尺寸 |
| `data-shape` | .zh-avatar | square \| circle（默认） | 方形头像，默认圆形 |
| `data-icon` | .zh-avatar | 图标名 | 用图标代替首字 |
| `data-status` | .zh-avatar | success \| warning \| danger \| primary | 右下角的在线状态点 |
| `data-tone` | 头像 | brand | 用品牌色代替按名字挑选的 8 种分类色，适合一个品牌页里所有头像颜色一致 |

## 无障碍

- 元素带 role="img" 与 aria-label（取姓名）
- 状态点只是装饰，需要传达状态时请在旁边写文字

## 常见问题

### 头像是什么？

图片头像；图片缺失或加载失败时，用姓名首字（中文取第一个字，英文取首字母）和由姓名决定的颜色代替。

### 怎么使用头像？

先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写。

### 头像支持键盘和读屏吗？

元素带 role="img" 与 aria-label（取姓名）；状态点只是装饰，需要传达状态时请在旁边写文字。

### 头像需要依赖框架吗？

不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。