跳至主要內容
Frutjam logo Frutjam
v2.2.2
Theme

Avatar Component

CSS-only Tailwind CSS avatar for profile images. Sizes xs–xl, group stacking, and online/offline status indicator. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Avatar 元件在一個緊湊的、可自訂的容器中顯示使用者個人資料圖像或姓名首字母。頭像使用 Frutjam 的 CSS 自訂屬性構建，代表介面上的使用者、貢獻者或團隊成員。頭像系統支援圖像和文字、多種尺寸、顏色、形狀、狀態指示器、環和群組排列，非常適合使用者清單、評論、團隊顯示、個人資料部分和訊息傳遞介面。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

班級 類型 描述
avatar根據帶有縮寫或圖像的圓形頭像容器
avatar-group修飾符多個頭像重疊堆疊
avatar-ring修飾符在頭像周圍添加彩色環形邊框
avatar-circle風格全圓形（預設）
avatar-rounded風格圓角矩形形狀
avatar-square風格方形，無圓角
avatar-online風格綠色在線狀態指示燈
avatar-away風格黃色離開狀態指示燈
avatar-busy風格紅色忙狀態指示燈
avatar-offline風格灰色離線狀態指示燈
avatar-xs尺寸特小號
avatar-sm尺寸小的
avatar-md尺寸中（預設）
avatar-lg尺寸大的
avatar-xl尺寸特大號
avatar-2xl尺寸2x 超大號
avatar-primary顏色主要主題顏色
avatar-secondary顏色次要主題色
avatar-accent顏色強調主題顏色
avatar-neutral顏色中性主題色
avatar-info顏色訊息語意顏色
avatar-success顏色成功語意色
avatar-warning顏色警告語意顏色
avatar-error顏色錯誤語意顏色
avatar-ring-primary顏色原色戒指
avatar-ring-secondary顏色輔助色戒指
avatar-ring-accent顏色戒指採用強調色
avatar-ring-neutral顏色中性色戒指
avatar-ring-info顏色訊息顏色的戒指
avatar-ring-success顏色成功色戒指
avatar-ring-warning顏色警告色環
avatar-ring-error顏色戒指顏色錯誤

基本用法

使用文字縮寫或顏色建立簡單的頭像。

AB
<div class="avatar">AB</div>

<div className="avatar">AB</div>

頭像與影像

透過自動影像調整和響應式尺寸調整來顯示使用者個人資料照片。

Strawbery
Strawbery
Strawbery
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="avatar avatar-sm">
  <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=32&height=32&face_crop=true" alt="Strawbery" loading="lazy" />
</div>

<div class="avatar avatar-md">
  <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=40&height=40&face_crop=true" alt="Strawbery" loading="lazy" />
</div>

<div class="avatar avatar-lg">
  <img src="https://cdn.frutjam.com/images/avatar-1.jpg?format=webp&width=56&height=56&face_crop=true" alt="Strawbery" loading="lazy" />
</div>

頭像尺寸

使用尺寸變體將頭像從超小 (xs) 縮放到 2 倍大 (2xl)，以適應不同的環境。

XS
SM
MD
LG
XL
2XL
html 
1
2
3
4
5
6
<div class="avatar avatar-xs avatar-primary">XS</div>
<div class="avatar avatar-sm avatar-secondary">SM</div>
<div class="avatar avatar-md avatar-accent">MD</div>
<div class="avatar avatar-lg avatar-primary">LG</div>
<div class="avatar avatar-xl avatar-secondary">XL</div>
<div class="avatar avatar-2xl avatar-accent">2XL</div>

頭像顏色

不使用圖像時，應用顏色變體以按角色、團隊或狀態區分化身。

A
B
C
D
E
F
G
H
html 
1
2
3
4
5
6
7
8
<div class="avatar avatar-md avatar-primary">A</div>
<div class="avatar avatar-md avatar-secondary">B</div>
<div class="avatar avatar-md avatar-accent">C</div>
<div class="avatar avatar-md avatar-info">D</div>
<div class="avatar avatar-md avatar-neutral">E</div>
<div class="avatar avatar-md avatar-success">F</div>
<div class="avatar avatar-md avatar-warning">G</div>
<div class="avatar avatar-md avatar-error">H</div>

頭像形狀

選擇圓形（預設）、圓形或方形形狀以符合您的設計系統。

●
◇
■
html 
1
2
3
<div class="avatar avatar-lg avatar-circle avatar-primary">●</div>
<div class="avatar avatar-lg avatar-rounded avatar-secondary">◇</div>
<div class="avatar avatar-lg avatar-square avatar-accent">■</div>

帶有姓名縮寫的頭像

顯示使用者姓名縮寫，以便在清單、評論線程和團隊部分中快速識別。

JD
AR
MS
KL
html 
1
2
3
4
<div class="avatar avatar-sm avatar-primary">JD</div>
<div class="avatar avatar-md avatar-secondary">AR</div>
<div class="avatar avatar-lg avatar-accent">MS</div>
<div class="avatar avatar-xl avatar-info">KL</div>

帶有狀態指示器的頭像

將頭像與狀態徽章結合，以顯示使用者的狀態或可用性（線上、離線、忙碌、離開）。

JD
AR
MS
KL
html 
1
2
3
4
5
6
7
<div class="avatar avatar-md avatar-online avatar-primary">JD</div>

<div class="avatar avatar-md avatar-offline avatar-secondary">AR</div>

<div class="avatar avatar-md avatar-busy avatar-accent">MS</div>

<div class="avatar avatar-md avatar-away avatar-info">KL</div>

帶有環形邊框的頭像

在頭像周圍添加裝飾環以強調、突出地位或視覺分隔。

A
B
C
html 
1
2
3
<div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div>
<div class="avatar avatar-lg avatar-ring avatar-ring-secondary avatar-secondary">B</div>
<div class="avatar avatar-xl avatar-ring avatar-ring-accent avatar-accent">C</div>

戒指顏色變體

選擇獨立於頭像背景顏色的戒指顏色。

A
B
C
D
E
F
G
html 
1
2
3
4
5
6
7
<div class="avatar avatar-md avatar-ring avatar-ring-primary avatar-primary">A</div>
<div class="avatar avatar-md avatar-ring avatar-ring-secondary avatar-secondary">B</div>
<div class="avatar avatar-md avatar-ring avatar-ring-accent avatar-accent">C</div>
<div class="avatar avatar-md avatar-ring avatar-ring-info avatar-info">D</div>
<div class="avatar avatar-md avatar-ring avatar-ring-success avatar-success">E</div>
<div class="avatar avatar-md avatar-ring avatar-ring-warning avatar-warning">F</div>
<div class="avatar avatar-md avatar-ring avatar-ring-error avatar-error">G</div>

阿凡達集團

使用自動負邊距堆疊多個頭像，以重疊顯示團隊成員和協作者。

A
B
C
D
html 
1
2
3
4
5
6
<div class="avatar-group">
  <div class="avatar avatar-md avatar-primary">A</div>
  <div class="avatar avatar-md avatar-secondary">B</div>
  <div class="avatar avatar-md avatar-accent">C</div>
  <div class="avatar avatar-md avatar-info">D</div>
</div>

不同大小的頭像組

將多個尺寸組合到一個群組中以實現視覺層次結構。

A
B
C
html 
1
2
3
4
5
<div class="avatar-group">
  <div class="avatar avatar-sm avatar-primary">A</div>
  <div class="avatar avatar-md avatar-secondary">B</div>
  <div class="avatar avatar-lg avatar-accent">C</div>
</div>

具有狀態的頭像組

顯示團隊群組中每位成員的空閒狀態。

A
B
C
html 
1
2
3
4
5
<div class="avatar-group">
  <div class="avatar avatar-md avatar-online avatar-primary">A</div>
  <div class="avatar avatar-md avatar-offline avatar-secondary">B</div>
  <div class="avatar avatar-md avatar-busy avatar-accent">C</div>
</div>

組合變體

混合並匹配尺寸、顏色、形狀、狀態和戒指修飾符，以實現複雜的頭像顯示。

SK
AB
MR
html 
1
2
3
4
5
<div class="avatar avatar-xl avatar-rounded avatar-ring avatar-ring-success avatar-success avatar-online">SK</div>

<div class="avatar avatar-lg avatar-square avatar-ring avatar-ring-primary avatar-primary">AB</div>

<div class="avatar avatar-2xl avatar-circle avatar-ring avatar-ring-error avatar-error avatar-busy">MR</div>