使用
- 在一个阈值范围内，选择一个值；
- 在一个阈值范围内，选择一个区间作为值进行输入。
解构
根据头像中填充的内容，头像可以分为 文本头像 / 图标头像 / 图片头像。
头像中，必须包含以下元素中的其中一个元素。
- 头像背景 头像填充颜色显示头像的背景。
- 头像内容 可以使用适当的文本、图标或者图片作为头像具体显示的内容。
Components Demo
✅ ️ Figma Variants
头像文本
用字母或前 1～2 个中文字作为头像，辅以不同的背景颜色。文字头像一般作为兜底的选择，比如用户未上传头像时，可使用用户名生成文字头像。
在用户点击头像去修改个人信息时出现的交互状态也需要进行区分。
图标头像
使用图标库内的单一图标作为头像，可以用做用户头像的默认状态或其他场景示意，简洁、清晰地表达出功能意图。
图片头像
用一张实际的图片比如照片作为头像。用图片作为头像时，图片不能变形比如拉伸、旋转等。
头像尺寸与形状
在不同的使用场景下，头像通常会有不同的尺寸。
Semi 对组件提供了高度由大到小分别为： 128px, 72px, 48px, 40px, 32px, 24px, 20px 七种常用的尺寸。在使用过程中，用户可根据实际情况对头像大小进行更改，以 4px 的步幅进行缩小或放大。
头像包含圆形和圆角矩形两种形态：圆形头像：表示人物、用户等；圆角矩形头像：标识一个实体比如项目、页面、空间或者应用等
文本头像
图标头像
图片头像
头像组
多个头像组合的情况。默认推荐大小为 Medium(48px)。一般情况下不建议头像组中头像个数超过4个。若头像过多时，可考虑将最后一个头像变为鼠标悬浮可展开的样式。可以通过 maxCount 设置展示的头像数量。可以通过 overlapFrom 控制头像组的覆盖方式。可选值有 start 和 end，分别表示左边覆盖右边和右边覆盖左边。默认值为 start。