头像 avatar

用法

渲染文字、图片头像，支持方形、圆角、原型输出。 可参考 ZUI 文档。

默认

同时传入 text 和 src 时，优先渲染 src，即图片头像。

avatar
(
    set::text('User'),
    set::src('http://lorempixel.com/100/100/people/1/')
);

轮廓

avatar
(
    set::text('User'),
    set::className('danger-outline')
);

支持的轮廓类型：primary-outline、success-outline、secondary-outline、imporant-outline、danger-outline、special-outline。

圆角

avatar
(
    set::text('User'),
    set::circle(false),
    set::rounded('xl')
);

圆角大小内置大小：xs、sm、lg、xl，亦可传入具体的数值。

属性

属性名	类型	默认值	说明
className	string	-	自定义类名。
style	array	-	自定义样式。
size	number|string	32	头像大小。四种内置大小：xs、sm、lg、xl
circle	bool	true	是否圆形头像。
rounded	string|number	false	是否圆角头像。
background	string	-	头像背景色。
foreColor	string	-	头像前景色。
text	string	-	头像文本。
code	string	-	头像码。用于生成背景色和前景色。
maxTextLength	number	2	头像文本最大长度。
hueDistance	number	43	头像背景色和前景色的色相差。
saturation	number	0.4	头像背景色和前景色的饱和度。
lightness	number	0.6	头像背景色和前景色的亮度。
src	string	-	头像图片地址。

块

无

数据

无