头像

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

安装

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

导入

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

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

用法

尺寸

禁用

带边框

圆角

颜色

头像回退

如果加载头像的 src 时出错，则会有 2 个回退方案

• 如果有 name 属性，我们会使用它生成首字母，并使用随机的、无障碍的背景颜色。
• 如果没有 name 属性，我们会使用默认头像。

如果没有传递 showFallback，则不会显示回退方案。

自定义回退

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

自定义实现

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

自定义首字母逻辑

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

头像组

禁用组

组最大数量

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

组总数

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

组自定义计数

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

组网格

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

组自定义实现

如果您需要进一步自定义头像组，可以使用 useAvatarGroup hook 和 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

头像 Props

头像组 Props