用户

显示用户信息，包括头像和姓名。

Storybook@heroui/userSourceStyles source

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

使用

Note: See the Avatar component for more details about avatarProps.

链接描述

插槽

  • base：用户的 base 插槽，即主容器。
  • wrapper：名称和描述的包装容器。
  • name：用户姓名。
  • description：用户描述。

数据属性

User 在 root 元素上仅当 isFocusable 为 true 时具有以下属性：

  • data-focus： 用户正被聚焦时。基于 useFocusRing
  • data-focus-visible： 用户使用键盘聚焦时。基于 useFocusRing

API

User Props

PropTypeDefault
name
string
description
ReactNode
isFocusable
boolean
false
avatarProps
AvatarProps
classNames
Partial<Record<"base" | "wrapper" | "name" | "description", string>>
Tooltip 提示API参考: HeroUI CLI