Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Komponen Gelembung Obrolan

Terakhir diperbarui:

Komponen gelembung obrolan Tailwind CSS khusus CSS. Posisi awal dan akhir untuk pesan yang dikirim dan diterima, dengan slot avatar dan stempel waktu. WCAG AA, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Komponen obrolan menampilkan pesan percakapan dalam format yang mudah dibaca dan terorganisir. Dibangun dengan HTML semantik dan tata letak yang fleksibel, gelembung obrolan mewakili pesan pengguna dan sistem. Sistem obrolan Frutjam mendukung berbagai warna, perataan, dan gaya—ideal untuk antarmuka perpesanan, panel dukungan pelanggan, dan UI percakapan.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas Jenis Keterangan
chatBasisPembungkus untuk satu baris pesan obrolan
chat-bubblePengubahGelembung pesan bergaya
chat-avatarPengubahAvatar ditampilkan di samping pesan
chat-headerPengubahNama pengirim atau metadata di atas gelembung
chat-footerPengubahStempel waktu atau status di bawah gelembung
chat-startPengubahSejajarkan gelembung ke kiri (pesan masuk)
chat-endPengubahSejajarkan gelembung ke kanan (pesan keluar)
chat-xsUkuranSangat kecil
chat-smUkuranKecil
chat-mdUkuranSedang (standar)
chat-lgUkuranBesar
chat-xlUkuranEkstra besar
chat-bubble-primaryWarnaGelembung warna tema utama
chat-bubble-secondaryWarnaGelembung warna tema sekunder
chat-bubble-accentWarnaGelembung warna tema aksen
chat-bubble-neutralWarnaGelembung warna tema netral
chat-bubble-infoWarnaGelembung warna semantik info
chat-bubble-successWarnaGelembung warna semantik sukses
chat-bubble-warningWarnaGelembung warna semantik peringatan
chat-bubble-errorWarnaKesalahan gelembung warna semantik

Penggunaan Dasar

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>

Ngobrol dengan Avatar

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>

Ukuran Obrolan

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>

Gaya Obrolan

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>

Header dan Footer Obrolan

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>

Utas Percakapan

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP memberi editor AI Anda nama dan struktur kelas Mengobrol yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.

Coba Cherry MCP