头像

头像组件用于表示用户，并显示个人资料图片、首字母缩写或备用图标。

安装

npx nextui-cli@latest add avatar

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

导入

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

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

用法

尺寸

禁用

边框

圆角

颜色

头像回退

如果加载头像的 src 出现错误，有 2 个后备选项

• 如果存在 name 属性，我们将使用它生成首字母缩写和一个随机的可访问背景色。
• 如果不存在 name 属性，我们将使用默认头像。

如果没有传递 showFallback，则不会显示后备选项。

自定义后备选项

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

自定义实现

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

自定义首字母缩写逻辑

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

头像组

组已禁用

组最大计数

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

组总数

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

分组自定义计数

NextUI 提供了一个 renderCount 属性，用于在传递 total 属性时自定义显示的计数。

分组网格

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

分组自定义实现

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

插槽

• base：头像包装器，包括焦点环、位置和一般外观的样式。
• img：头像中的图像元素，包括不透明度过渡和大小的样式。
• fallback：图像加载失败或未提供时的备用内容，包括使内容居中的样式。
• name：图像未提供或加载失败时显示的缩写，包括字体、文本对齐和继承的样式。
• icon：头像中的图标元素，包括使内容居中、文本继承和大小的样式。

自定义头像样式

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

数据属性

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

• data-hover：当头像被悬停时。基于 useHover
• data-focus：当头像获得焦点时。基于 useFocusRing，当 isFocusable 为 true 或 as 属性被指定为 button 时应用。
• data-focus-visible：当头像使用键盘获得焦点时。基于 useFocusRing，当 isFocusable 为 true 或 as 属性被指定为 button 时应用。

API

头像属性

头像组属性