avatar 头像

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

XML 元素

avatar

Java 类

Avatar

基本用法

在线示例

下面的示例中的三个例子：一个基于名称的缩写，一个显式设置的缩写以及由视图控制器提供的图片。

XML
<hbox padding="false" wrap="true">
    <avatar name="Homer Jay Simpson"/>
    <avatar name="Homer Jay Simpson" abbreviation="HS"/>
    <avatar id="avatarWithImage"/>
</hbox>
Java
@ViewComponent
protected Avatar avatarWithImage;
@Subscribe
protected void onInit(InitEvent event) {
    avatarWithImage.setImageHandler(
            DownloadHandler.forClassResource(getClass(), "/META-INF/resources/icons/homer-simpson.png")
    );
}

如果没有未该组件设置任何这些属性，则显示一个回退的图片。

图片资源

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");

由 DownloadHandler 提供的图片

在线示例

图片可以通过 DownloadHandler 提供。

使用 com.vaadin.flow.server.streams.DownloadHandler 的工厂方法创建图像源的处理方法。

例如，DownloadHandler.forClassResource() 为应用程序类路径中的图片创建一个处理方法。

@ViewComponent
protected Avatar avatarWithImage;
@Subscribe
protected void onInit(InitEvent event) {
    avatarWithImage.setImageHandler(
            DownloadHandler.forClassResource(getClass(), "/META-INF/resources/icons/homer-simpson.png")
    );
}

样式版本

在线示例

使用 themeNames 属性配置一个或多个样式。

样式 描述 支持的主题

xsmall

特别小的头像

Aura, Lumo

small

小头像

Aura, Lumo

large

大头像

Aura, Lumo

xlarge

特别大的头像

Aura, Lumo

filled

表面填充的样式

Aura

XML 属性

下面是 avatar 的特殊属性：

名称 描述 默认值

abbreviation

设置组件中显示的缩写内容。

—

colorIndex

设置头像组件的背景颜色。

—

image

设置图片资源的路径。

—

name

设置头像所有者的名称。

—

下面是 avatar 支持的其他通用属性：

id - alignSelf - classNames - colspan - css - height - maxHeight - maxWidth - minHeight - minWidth - themeNames - visible - width

事件和处理器

下面是 avatar 支持的通用事件：

AttachEvent - DetachEvent

参考