avatar 头像

头像组件是一种用于显示用户头像或代表性图像的UI组件。它通常用于个人资料页面、社交媒体应用程序、聊天应用程序等场景中。 头像组件可以展示用户的照片、公司或组织的标志、默认的占位符图像等。它可以以圆形、方形或自定义形状的方式显示图像，并且可以具有不同的尺寸。

Props参数

名称	类型	是否必传	默认值	描述
shape	EMMAvatarShape | keyof typeof EMMAvatarShape	否	square	形状
size	EMMAvatarSize | keyof typeof EMMAvatarSize | number	否	-	大小
icon	MMIconFontName	否	-	icon 名称
src	string	否	-	图片类头像的资源地址
text	string	否	-	头像内文本内容
avatarStyle	CSSProperties	否	-	额外样式。可以对color 和backgroundColor 进行设置

示例

import { View } from '@tarojs/components'
import MMAvatar from '~/components/avatar'
import MMIconFontName from '~/components/icon-font/name'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'

export default () => {
  return (
    <MMPageContainer title="头像">
      <PageDemoBlock title="尺寸">
        <View>头像支持三种内置尺寸，也可以自定义尺寸</View>
        <View className="spacing" />
        <View className="flexJS">
          <MMAvatar size="small" />
          <MMAvatar />
          <MMAvatar size="large" />
          <MMAvatar size={64} />
        </View>
      </PageDemoBlock>

      <PageDemoBlock title="形状">
        <View>有两种形状</View>
        <View className="spacing" />
        <View>
          <MMAvatar />
          <MMAvatar shape="circle" />
        </View>
      </PageDemoBlock>

      <PageDemoBlock title="使用模式">
        <View>支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色</View>
        <View className="spacing" />
        <View className="flexJS">
          <MMAvatar />
          <MMAvatar text="头像" size={40} />
          <MMAvatar src="https://wmm-mock.oss-cn-shanghai.aliyuncs.com/mock/head0.png" />
          <MMAvatar text="U" avatarStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }} />
          <MMAvatar icon={MMIconFontName.Index} avatarStyle={{ backgroundColor: '#87d068' }} />
        </View>
      </PageDemoBlock>
    </MMPageContainer>
  )
}