avatar 头像

在线示例

avatar 是一个展示图片的区域，一般用来展示个人或公司的 logo。

  • XML 元素：avatar

  • Java 类：Avatar

基本用法

下面的示例演示了为 avatar 设置内容的四个选项。

avatar basic 
<avatar image="/icons/mary.png" abbreviation="MJ" name="Mary Elizabeth Jones"/>
<avatar abbreviation="MJ" name="Mary Elizabeth Jones"/>
<avatar name="Mary Elizabeth Jones"/>
<avatar/>

注意属性是有优先级的。首先展示的是 image。如果没有设置 image 或无法渲染，则会用 abbreviation（缩写） 值替换。如果图片或缩写值均未提供，则显示 name 的开头几个字母。如果未设置任何内容，则显示保留图片。

图片资源

avatar 组件可以展示来自不同资源的图片。可以通过 image 属性声明式地设置资源路径，或编程式设置。

静态图片

应用程序可以提供静态图片地址。

默认情况下，静态内容在 classpath 的 /static、/public、/resources 或 /META-INF/resources 文件夹（详情请参考： Spring Boot 文档）。

  • XML 中：

    如果图片位于 /src/main/resources/META-INF/resources，比如 /src/main/resources/META-INF/resources/icons/mary.png，可以按照下列方式指定图片：

    <avatar image="/icons/mary.png"/>

  • Java 中：

    avatar.setImage("/icons/mary.png");

URL 图片

类似地，图片也可以通过任意 URL 加载。

  • XML 中：

    <avatar image="https://www.jmix.io/_nuxt/img/banner-img.d30b0fa.svg"/>

  • Java 中：

    avatar.setImage("https://www.jmix.io/_nuxt/img/banner-img.d30b0fa.svg");

图片流

图片可以通过 InputStream 提供。

  • Java 中：使用 StreamResource 接口。

    StreamResource streamResource = new StreamResource("icon",
        ()-> getClass().getResourceAsStream("/META-INF/resources/icons/mary.png"));
avatar.setImageResource(streamResource);

XML 属性

id - abbreviation - alignSelf - classNames - colorIndex - colspan - css - height - image - maxHeight - maxWidth - minHeight - minWidth - name - themeNames - visible - width

abbreviation

设置组件中显示的缩写内容。可以是姓名首字母，或者其他能标识头像所有者的缩写。最好控制在 2-3 个字符。

colorIndex

设置头像组件的背景颜色。支持 7 种不同的颜色，使用下标 0-6 表示。

avatar colorindex

image

设置图片资源的路径。图片可以是 静态资源 或 任意 URL。

name

设置头像所有者的名称。

themeNames

该组件默认为标准的中等大小。支持 4 种不同的大小：

  • xsmall

  • small

  • large

  • xlarge

事件和处理器

AttachEvent - DetachEvent

在 Jmix Studio 生成处理器桩代码时，可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加，也可以通过 Code → Generate 菜单（Alt+Insert / Cmd+N）生成。

参考

Vaadin 文档