头像

头像组件用于表示用户，并显示头像图片、首字母或备用图标。

安装

上述命令仅用于单独安装。如果 @heroui/react 已全局安装，则可以跳过此步骤。

导入

HeroUI 导出 3 个与头像相关的组件

• Avatar：用于显示头像的主要组件。
• AvatarGroup：用于显示头像组的包装组件。
• AvatarIcon：当图片加载失败时用作备用图标的默认图标。

用法

尺寸

禁用

带边框

圆角

颜色

头像备用方案

如果加载头像的 src 时出错，则有两种备用方案

• 如果存在 name 属性，我们使用它来生成首字母和随机的可访问背景颜色。
• 如果没有 name 属性，我们使用默认头像。

如果未传递 showFallback，则不会显示备用方案。

自定义备用方案

您还可以提供一个自定义备用组件，以便在 src 加载失败时显示。

自定义实现

如果您需要进一步自定义头像，可以使用 useAvatar 钩子来创建您自己的实现。

自定义首字母逻辑

可以通过将函数传递给 getInitials 属性来自定义用于生成首字母的逻辑。默认情况下，我们合并 name 属性中每个单词的首字母。

头像组

组禁用

组最大计数

您可以通过将 max 属性传递给 AvatarGroup 组件来限制显示的头像数量。

Group Total Count

您可以通过传递 total 属性给 AvatarGroup 组件来显示头像总数。

Group Custom count

AvatarGroup 提供了 renderCount 属性，用于自定义当传递 total 属性时显示的计数。

Group Grid

通过传递 isGrid 属性给 AvatarGroup 组件，头像将以网格布局显示。

Group Custom Implementation

如果您需要进一步自定义头像组，可以使用 useAvatarGroup Hook 和 AvatarGroupProvider 来创建您自己的实现。

Slots

• base: Avatar 包装器，它包含焦点环、位置和通用外观的样式。
• img: 头像内的图像元素，它包含不透明度过渡和尺寸的样式。
• fallback: 当图像加载失败或未提供时，回退内容，它包含用于内容居中的样式。
• name: 当未提供图像或图像加载失败时显示的姓名首字母，它包含字体、文本对齐和继承的样式。
• icon: 头像内的图标元素，它包含用于内容居中、文本继承和尺寸的样式。

Custom Avatar Styles

您可以使用 classNames 属性自定义头像的任何部分，每个 slot 都有自己的 className。

Data Attributes

Avatar 在 base 元素上具有以下属性

• data-hover: 当头像被悬停时。基于 useHover
• data-focus: 当头像被聚焦时。基于 useFocusRing，当 isFocusable 为 true 或当 as 属性被赋值为 button 时应用。
• data-focus-visible: 当头像通过键盘聚焦时。基于 useFocusRing，当 isFocusable 为 true 或当 as 属性被赋值为 button 时应用。

API

Avatar Props

Avatar Group Props