頭像

頭像在 Material Design 中隨處可見，從表格到對話選單都有應用。

圖片頭像

圖片頭像可以透過傳遞標準 `img` 屬性 `src` 或 `srcSet` 給元件來建立。

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />

按下 Enter 鍵開始編輯

字母頭像

包含簡單字元的頭像可以透過傳遞字串作為 `children` 來建立。

<Avatar>H</Avatar>
<Avatar sx={{ bgcolor: deepOrange[500] }}>N</Avatar>
<Avatar sx={{ bgcolor: deepPurple[500] }}>OP</Avatar>

<Avatar>H</Avatar>
<Avatar sx={{ bgcolor: deepOrange[500] }}>N</Avatar>
<Avatar sx={{ bgcolor: deepPurple[500] }}>OP</Avatar>

按下 Enter 鍵開始編輯

您可以為頭像使用不同的背景顏色。以下範例根據人名產生顏色。

<Avatar {...stringAvatar('Kent Dodds')} />
<Avatar {...stringAvatar('Jed Watson')} />
<Avatar {...stringAvatar('Tim Neutkens')} />

<Avatar {...stringAvatar('Kent Dodds')} />
<Avatar {...stringAvatar('Jed Watson')} />
<Avatar {...stringAvatar('Tim Neutkens')} />

按下 Enter 鍵開始編輯

尺寸

您可以使用 `height` 和 `width` CSS 屬性來變更頭像的尺寸。

<Avatar
  alt="Remy Sharp"
  src="/static/images/avatar/1.jpg"
  sx={{ width: 24, height: 24 }}
/>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar
  alt="Remy Sharp"
  src="/static/images/avatar/1.jpg"
  sx={{ width: 56, height: 56 }}
/>

<Avatar
  alt="Remy Sharp"
  src="/static/images/avatar/1.jpg"
  sx={{ width: 24, height: 24 }}
/>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar
  alt="Remy Sharp"
  src="/static/images/avatar/1.jpg"
  sx={{ width: 56, height: 56 }}
/>

按下 Enter 鍵開始編輯

圖示頭像

圖示頭像透過傳遞圖示作為 `children` 來建立。

<Avatar>
  <FolderIcon />
</Avatar>
<Avatar sx={{ bgcolor: pink[500] }}>
  <PageviewIcon />
</Avatar>
<Avatar sx={{ bgcolor: green[500] }}>
  <AssignmentIcon />
</Avatar>

<Avatar>
  <FolderIcon />
</Avatar>
<Avatar sx={{ bgcolor: pink[500] }}>
  <PageviewIcon />
</Avatar>
<Avatar sx={{ bgcolor: green[500] }}>
  <AssignmentIcon />
</Avatar>

按下 Enter 鍵開始編輯

變體

如果您需要方形或圓角頭像，請使用 `variant` 屬性。

<Avatar sx={{ bgcolor: deepOrange[500] }} variant="square">
  N
</Avatar>
<Avatar sx={{ bgcolor: green[500] }} variant="rounded">
  <AssignmentIcon />
</Avatar>

<Avatar sx={{ bgcolor: deepOrange[500] }} variant="square">
  N
</Avatar>
<Avatar sx={{ bgcolor: green[500] }} variant="rounded">
  <AssignmentIcon />
</Avatar>

按下 Enter 鍵開始編輯

備用方案

如果載入頭像圖片時發生錯誤，元件會依以下順序退回到替代方案

提供的 children
`alt` 文字的第一個字母
一個通用的頭像圖示

<Avatar
  sx={{ bgcolor: deepOrange[500] }}
  alt="Remy Sharp"
  src="/broken-image.jpg"
>
  B
</Avatar>
<Avatar
  sx={{ bgcolor: deepOrange[500] }}
  alt="Remy Sharp"
  src="/broken-image.jpg"
/>
<Avatar src="/broken-image.jpg" />

<Avatar
  sx={{ bgcolor: deepOrange[500] }}
  alt="Remy Sharp"
  src="/broken-image.jpg"
>
  B
</Avatar>
<Avatar
  sx={{ bgcolor: deepOrange[500] }}
  alt="Remy Sharp"
  src="/broken-image.jpg"
/>
<Avatar src="/broken-image.jpg" />

按下 Enter 鍵開始編輯

群組

`AvatarGroup` 將其 children 渲染為堆疊。使用 `max` 屬性來限制頭像的數量。

<AvatarGroup max={4}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
  <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
</AvatarGroup>

<AvatarGroup max={4}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
  <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
</AvatarGroup>

按下 Enter 鍵開始編輯

總頭像數

如果您需要控制未顯示的總頭像數，可以使用 `total` 屬性。

+20

<AvatarGroup total={24}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
  <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
</AvatarGroup>

<AvatarGroup total={24}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
  <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
</AvatarGroup>

按下 Enter 鍵開始編輯

自訂剩餘

將 `renderSurplus` 屬性設定為回呼函數，以自訂剩餘頭像。回呼函數將接收剩餘數量作為基於 children 和 `max` 屬性的參數，並應傳回 `React.ReactNode`。

當您需要根據伺服器發送的資料來渲染剩餘頭像時，`renderSurplus` 屬性很有用。

+4k

<AvatarGroup
  renderSurplus={(surplus) => <span>+{surplus.toString()[0]}k</span>}
  total={4251}
>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
  <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
</AvatarGroup>

<AvatarGroup
  renderSurplus={(surplus) => <span>+{surplus.toString()[0]}k</span>}
  total={4251}
>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
  <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
</AvatarGroup>

按下 Enter 鍵開始編輯

間距

您可以使用 `spacing` 屬性來變更頭像之間的間距。您可以使用預設值之一（`"medium"`，預設值，或 `"small"`）或設定自訂數值。

<AvatarGroup spacing="medium">
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
</AvatarGroup>
<AvatarGroup spacing="small">
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
</AvatarGroup>
<AvatarGroup spacing={24}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
</AvatarGroup>

<AvatarGroup spacing="medium">
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
</AvatarGroup>
<AvatarGroup spacing="small">
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
</AvatarGroup>
<AvatarGroup spacing={24}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
</AvatarGroup>

按下 Enter 鍵開始編輯

帶有徽章

<StyledBadge
  overlap="circular"
  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
  variant="dot"
>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</StyledBadge>
<Badge
  overlap="circular"
  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
  badgeContent={
    <SmallAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  }
>
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
</Badge>

<StyledBadge
  overlap="circular"
  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
  variant="dot"
>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</StyledBadge>
<Badge
  overlap="circular"
  anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
  badgeContent={
    <SmallAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  }
>
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
</Badge>

按下 Enter 鍵開始編輯

API

請參閱以下文件，以完整參考此處提及的元件可用的所有屬性和類別。