@doraemon-ui/miniprogram.avatar

Avatar 头像

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

安装

我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

npm install --save @doraemon-ui/miniprogram.avatar
# or
yarn add @doraemon-ui/miniprogram.avatar

如果你的网络环境不佳，推荐使用 cnpm。

使用指南

在 page.json 中引入组件

json

示例代码

在开发者工具中预览效果

WXML

wxml

JAVASCRIPT

js

WXSS

wxss

API

Avatar props

参数	类型	描述	默认值
prefixCls	string	自定义类名前缀	dora-avatar
shape	'circle' | 'square'	头像形状	circle
size	'small' | 'default' | 'large'	头像尺寸	default
src	string	头像图片地址，优先级高于插槽文字	-
bodyStyle	string | Partial<CSSStyleDeclaration>	自定义外层容器样式，最终会转换为内联样式	-
scale	boolean	当为文字头像且内容过长时，是否自动缩放文字以适应容器宽度	false

Avatar slot

名称	描述
-	自定义内容

Avatar externalClasses

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

CSS Variables

属性	描述	默认值	全局变量
--container-size	默认头像尺寸	40px	-
--container-size-sm	小号头像尺寸	32px	-
--container-size-lg	大号头像尺寸	48px	-
--font-size	默认文字字号	14px	-
--font-size-sm	小号文字字号	12px	-
--font-size-lg	大号文字字号	16px	-
--square-border-radius	矩形头像圆角大小	var(--dora-border-radius, 8px)	--dora-border-radius