Avatar

在 ChatGPT 中打开

阴影 dwc-avatar 25.11

Java API

Avatar 组件提供用户或实体的视觉表示。它可以显示图像、自动计算的首字母、 自定义首字母或图标。头像通常用于识别评论区、导航菜单、聊天应用程序和联系人列表中的用户。

创建头像

要创建 Avatar，请传递一个作为可访问名称的标签。该组件通过提取标签中每个单词的首字母自动计算首字母。

// 创建一个显示"JD"的头像
Avatar avatar = new Avatar("John Doe");

如果您希望对显示内容有更多控制，还可以提供显式首字母：

// 创建一个带有自定义首字母的头像
Avatar avatar = new Avatar("John Doe", "J");

下面的示例展示了团队面板上下文中的头像。每个 Avatar 显示用户名称的个人资料图像或自动生成的首字母。单击 Avatar 会打开一个对话框，显示放大的视图。

显示代码

AvatarView.java

avatar.css

显示图像

Avatar 组件可以通过将 Img 组件作为子组件来显示图像，而不是首字母。当提供图像时，图像优先于首字母。

import com.webforj.component.html.elements.Img;

// 带有图像的头像
Avatar avatar = new Avatar("John Doe", new Img("path/to/profile.png"));

图像大小

图像会自动缩放以适应头像的尺寸，具体取决于当前的扩展设置。

显示图标

您可以通过添加 Icon 组件作为子组件在 Avatar 中显示图标：

import com.webforj.component.icons.TablerIcon;

// 带有图标的头像
Avatar avatar = new Avatar("Guest User", TablerIcon.create("user"));

标签和首字母

Avatar 组件使用标签来生成可访问性和工具提示。 setLabel() 和 setText() 方法是别名，都将设置 Avatar 的可访问标签。

自动计算的首字母

当您使用仅标签创建 Avatar 时，首字母会自动计算，方法是提取每个单词的第一个字符。例如，带标签 "John Doe" 的 Avatar 会在 UI 中自动显示 "JD"。

Avatar avatar = new Avatar();
avatar.setLabel("Jane Smith");  // 设置标签并自动生成工具提示
avatar.setInitials("JS");       // 覆盖自动计算的首字母

自动工具提示

该组件会自动从标签生成工具提示，方便您在悬停时查看全名。当使用默认标签 "Avatar" 时，此行为将被禁用。

点击事件

Avatar 组件实现了 HasElementClickListener，允许您响应用户点击。这对于触发打开用户个人资料或显示菜单等操作非常有用。

avatar.onClick(event -> {
  // 处理头像点击 - 例如，打开用户个人资料
  System.out.println("头像被点击！");
});

形状

头像可以显示为圆形或方形。默认形状是 CIRCLE，这是用户头像的标准。对于团队、公司或应用程序等实体，请使用 SQUARE。

显示代码

AvatarShapesView.java

主题

主题传达意义或状态；您可以使用它们来表示可用性、突出重要用户或匹配应用程序的设计。

以下主题可用：

• DEFAULT: 标准外观
• GRAY: 中性、柔和外观
• PRIMARY: 强调主要操作或用户
• SUCCESS: 表示积极状态（例如，在线）
• WARNING: 表示警告（例如，离开）
• DANGER: 表示错误或繁忙状态
• INFO: 提供信息上下文

每个主题也有一个带边框的变体，提供更轻的视觉效果：

显示代码

AvatarThemesView.java

扩展

使用 setExpanse() 方法控制头像大小。组件支持从 XXXSMALL 到 XXXLARGE 的九个尺寸选项。

显示代码

AvatarExpansesView.java

样式

Loading...