AvatarGroupAPI

React AvatarGroup 組件的 API 參考文檔。了解此匯出模組的屬性、CSS 和其他 API。

示範

如需此 React 組件的使用範例和詳細資訊，請訪問組件示範頁面

import AvatarGroup from '@mui/material/AvatarGroup';
// or
import { AvatarGroup } from '@mui/material';

原生組件的屬性也可用。

名稱	類型	預設	描述
children	node	-	要堆疊的頭像。
classes	object	-	覆寫或擴展應用於組件的樣式。有關更多詳細資訊，請參閱下方的 CSS 類別 API。
component	elementType	-	用於根節點的組件。可以是字串（用於 HTML 元素）或組件。
componentsProps	{ additionalAvatar?: object }	-	插槽組件的額外屬性。您可以覆寫現有屬性或新增屬性。此屬性是 `slotProps` 屬性的別名。已棄用－請改用 `slotProps` 屬性。此屬性將在 v7 中移除。有關更多詳細資訊，請參閱從已棄用的 API 遷移。
max	number	5	在 +x 之前顯示的最大頭像數量。
renderSurplus	func	-	extraAvatars 的自訂渲染器簽名：`function(surplus: number) => React.ReactNode` `surplus` 剩餘的額外頭像數量返回：要顯示的自訂元素
slotProps	{ additionalAvatar?: object, surplus?: func \| object }	{}	用於每個內部插槽的屬性。
slots	{ surplus?: elementType }	{}	用於每個內部插槽的組件。
spacing	'medium' \| 'small' \| number	'medium'	頭像之間的間距。
sx	Array<func \| object \| bool> \| func \| object	-	系統屬性，允許定義系統覆寫以及額外的 CSS 樣式。有關更多詳細資訊，請參閱 `sx` 頁面。
total	number	children.length	頭像總數。用於計算額外頭像的數量。
variant	'circular' \| 'rounded' \| 'square' \| string	'circular'	要使用的變體。

組件無法持有 ref。

您可以使用 MuiAvatarGroup 通過主題更改此組件的預設屬性。

插槽名稱	類別名稱	預設組件	描述
surplus

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於組件的插槽。

類別名稱	規則名稱	描述
.MuiAvatarGroup-avatar	avatar	應用於頭像元素的樣式。
.MuiAvatarGroup-root	root	應用於根元素的樣式。

您可以使用以下自訂選項之一覆寫組件的樣式

如果您在此頁面中找不到資訊，請考慮查看組件的實作以獲取更多詳細資訊。