使用精美的组件更快地交付
HeroUI 专业版

用户

显示带有头像和用户名的用户信息。

组件演示@heroui/user源码样式源码

安装

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

导入

用法

注意： 有关 avatarProps 的更多细节，请参阅 Avatar 组件。

插槽

  • base: 用户的基本插槽，它是主容器。
  • wrapper: 名称和描述的包装器。
  • name: 用户的名称。
  • description: 用户的描述。

数据属性

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

  • data-focus: 当用户被聚焦时。基于 useFocusRing
  • data-focus-visible: 当用户通过键盘聚焦时。基于 useFocusRing

API

User 组件属性

属性类型默认值
name
string
description
ReactNode
isFocusable
boolean
否
avatarProps
AvatarProps
classNames
Partial<Record<"base" | "wrapper" | "name" | "description", string>>
工具提示API 参考文档：HeroUI CLI