Avatar 头像

用来代表用户或事物,支持图片、图标或字符展示。

使用指南

在 page.json 中引入组件

  1. {
  2. "navigationBarTitleText": "Avatar",
  3. "usingComponents": {
  4. "wux-avatar": "../../dist/avatar/index"
  5. }
  6. }

示例

  1. <view class="page">
  2. <view class="page__hd">
  3. <view class="page__title">Avatar</view>
  4. <view class="page__desc">头像</view>
  5. </view>
  6. <view class="page__bd page__bd_spacing">
  7. <view class="sub-title">Default</view>
  8. <view>
  9. <wux-avatar size="small">U</wux-avatar>
  10. <wux-avatar>U</wux-avatar>
  11. <wux-avatar size="large">U</wux-avatar>
  12. </view>
  13. <view class="sub-title">Shape = square</view>
  14. <view>
  15. <wux-avatar shape="square" size="small">U</wux-avatar>
  16. <wux-avatar shape="square">U</wux-avatar>
  17. <wux-avatar shape="square" size="large">U</wux-avatar>
  18. </view>
  19. <view class="sub-title">Custom Style</view>
  20. <view>
  21. <wux-avatar wux-class="wux-avatar--custom" size="small">U</wux-avatar>
  22. <wux-avatar body-style="background-color: #11c1f3">U</wux-avatar>
  23. <wux-avatar body-style="background-color: #33cd5f" size="large">U</wux-avatar>
  24. </view>
  25. <view class="sub-title">Scale</view>
  26. <view>
  27. <wux-avatar scale size="small">Wux</wux-avatar>
  28. <wux-avatar scale>Weapp</wux-avatar>
  29. <wux-avatar scale size="large">Skyvow</wux-avatar>
  30. </view>
  31. <view class="sub-title">Src</view>
  32. <view>
  33. <wux-avatar size="small" src="https://wux.cdn.cloverstd.com/logo.png" />
  34. <wux-avatar src="https://wux.cdn.cloverstd.com/logo.png" />
  35. <wux-avatar size="large" src="https://wux.cdn.cloverstd.com/logo.png" />
  36. </view>
  37. </view>
  38. </view>

视频演示

Avatar

API

Avatar props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-avatar
shape string 指定头像的形状,可选值为 circle、square circle
size string 设置头像的大小,可选值为 small、default、large default
src string 图片类头像的资源地址 -
bodyStyle string,object 自定义样式 -
scale boolean 是否自动调整大小 false

Avatar slot

名称 描述
- 自定义内容

Avatar externalClasses

名称 描述
wux-class 根节点样式类