使用美觀的元件更快地交付產品
NextUI Pro

使用者

顯示具有頭像和名稱的使用者資訊。

Storybook@nextui-org/user原始碼樣式原始碼

安裝

上述命令僅適用於單獨安裝。如果 @nextui-org/react 已全域安裝，您可以跳過此步驟。

導入

用法

注意：有關 avatarProps 的更多詳細資訊，請參閱 Avatar 元件。

插槽

  • base：使用者的基本插槽，它是主要容器。
  • wrapper：名稱和描述的包裝器。
  • name：使用者的名稱。
  • description：使用者的描述。

資料屬性

User 在 root 元素上具有以下屬性，僅當 isFocusable 為 true 時。

  • data-focus：當使用者正在被聚焦時。基於 useFocusRing
  • data-focus-visible：當使用者透過鍵盤被聚焦時。基於 useFocusRing

API

使用者屬性

屬性類型預設值
name（名稱）
字串
description（描述）
React節點
isFocusable（是否可聚焦）
布林值
false（假）
avatarProps（頭像屬性）
頭像屬性
classNames（類別名稱）
Partial<Record<"base" | "wrapper" | "name" | "description", string>>
工具提示API 參考：NextUI CLI