頭像

頭像（Avatar）元件用於表示使用者，並顯示個人資料圖片、姓名縮寫或預設圖示。

安裝

以上命令僅適用於個別安裝。如果已全域安裝 @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