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

聊天氣泡組件

最後更新:

僅 CSS Tailwind CSS 聊天氣泡組件。發送和接收訊息的開始和結束位置，帶有頭像和時間戳槽。 WCAG AA，適用於 Django、HTMX、Laravel、React 和任何堆疊。

聊天元件以可讀、有組織的格式顯示對話訊息。聊天氣泡採用語義 HTML 和靈活的佈局構建，代表用戶和系統訊息。 Frutjam 聊天系統支援多種顏色、對齊方式和樣式，非常適合訊息傳遞介面、客戶支援面板和對話式 UI。

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

班級 類型 描述
chat根據單一聊天訊息行的包裝
chat-bubble修飾符風格化的消息氣泡
chat-avatar修飾符頭像顯示在訊息旁邊
chat-header修飾符氣泡上方的寄件者名稱或元數據
chat-footer修飾符氣泡下方的時間戳或狀態
chat-start修飾符將氣泡向左對齊（傳入訊息）
chat-end修飾符將氣泡向右對齊（傳出訊息）
chat-xs尺寸特小號
chat-sm尺寸小的
chat-md尺寸中（預設）
chat-lg尺寸大的
chat-xl尺寸特大號
chat-bubble-primary顏色主要主題顏色氣泡
chat-bubble-secondary顏色次要主題彩色氣泡
chat-bubble-accent顏色口音主題顏色氣泡
chat-bubble-neutral顏色中性主題色泡泡
chat-bubble-info顏色訊息語意顏色氣泡
chat-bubble-success顏色成功語意彩色氣泡
chat-bubble-warning顏色警告語意顏色氣泡
chat-bubble-error顏色錯誤語意顏色氣泡

基本用法

Hello! How are you?
I'm doing great, thanks!
1
2
3
4
5
6
7
<div class="chat chat-start">
  <div class="chat-bubble">Hello! How are you?</div>
</div>

<div class="chat chat-end">
  <div class="chat-bubble">I'm doing great, thanks!</div>
</div>

1
2
3
4
5
6
7
<div className="chat chat-start">
  <div className="chat-bubble">Hello! How are you?</div>
</div>

<div className="chat chat-end">
  <div className="chat-bubble">I'm doing great, thanks!</div>
</div>

與頭像聊天

Hello!
Hi there!
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="chat chat-start">
  <div class="chat-avatar avatar">
    <div class="w-10 rounded-full bg-primary"></div>
  </div>
  <div class="chat-bubble">Hello!</div>
</div>

<div class="chat chat-end">
  <div class="chat-avatar avatar">
    <div class="w-10 rounded-full bg-secondary"></div>
  </div>
  <div class="chat-bubble">Hi there!</div>
</div>

聊天尺寸

Small message
Medium message
Large message
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="chat chat-start chat-sm">
  <div class="chat-bubble">Small message</div>
</div>

<div class="chat chat-start chat-md">
  <div class="chat-bubble">Medium message</div>
</div>

<div class="chat chat-start chat-lg">
  <div class="chat-bubble">Large message</div>
</div>

聊天風格

Default style
Primary message
Secondary message
Accent message
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="chat chat-start">
  <div class="chat-bubble">Default style</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-primary">Primary message</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-secondary">Secondary message</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-accent">Accent message</div>
</div>

聊天頁首和頁尾

John
Thanks! I'm looking forward to it.
You
I'll see you tomorrow!
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="chat chat-start">
  <div class="chat-header">John</div>
  <div class="chat-bubble">Thanks! I'm looking forward to it.</div>
  <time class="text-xs opacity-50">12:45</time>
</div>

<div class="chat chat-end">
  <div class="chat-header">You</div>
  <div class="chat-bubble">I'll see you tomorrow!</div>
  <time class="text-xs opacity-50">12:46</time>
</div>

對話主題

Hello! How can I help?
I need help with my order
I'd be happy to assist you!
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div>
  <div class="chat chat-start">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-primary"></div>
    </div>
    <div class="chat-bubble">Hello! How can I help?</div>
  </div>

  <div class="chat chat-end">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-secondary"></div>
    </div>
    <div class="chat-bubble">I need help with my order</div>
  </div>

  <div class="chat chat-start">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-primary"></div>
    </div>
    <div class="chat-bubble">I'd be happy to assist you!</div>
  </div>
</div>

使用 Claude Code、Cursor 或其他 AI 編輯器？

Cherry MCP 為您的 AI 編輯器按需提供準確的 聊天 類別名稱和結構。不再有幻覺課程。

嘗試Cherry MCP