Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Sohbet Balonu Bileşeni

Son güncelleme:

Yalnızca CSS'ye özgü Tailwind CSS sohbet balonu bileşeni. Avatar ve zaman damgası yuvalarıyla birlikte gönderilen ve alınan mesajlar için başlangıç ​​ve bitiş konumları. WCAG AA, Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

Sohbet bileşenleri, konuşma mesajlarını okunabilir, düzenli bir biçimde görüntüler. Anlamsal HTML ve esnek düzenlerle oluşturulan sohbet balonları, hem kullanıcı hem de sistem mesajlarını temsil eder. Frutjam sohbet sistemi birden fazla rengi, hizalamayı ve stili destekler; mesajlaşma arayüzleri, müşteri destek panelleri ve konuşma amaçlı kullanıcı arayüzü için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Sınıf Tip Tanım
chatTemelTek bir sohbet mesajı satırı için sarmalayıcı
chat-bubbleDeğiştiriciTarz mesaj balonu
chat-avatarDeğiştiriciAvatar mesajın yanında görüntüleniyor
chat-headerDeğiştiriciBalonun üzerindeki gönderenin adı veya meta verileri
chat-footerDeğiştiriciBalonun altındaki zaman damgası veya durum
chat-startDeğiştiriciBalonu sola hizalar (gelen mesaj)
chat-endDeğiştiriciBalonu sağa hizalar (giden mesaj)
chat-xsBoyutEkstra küçük
chat-smBoyutKüçük
chat-mdBoyutOrta (varsayılan)
chat-lgBoyutBüyük
chat-xlBoyutEkstra büyük
chat-bubble-primaryRenkBirincil tema renk balonu
chat-bubble-secondaryRenkİkincil tema renk balonu
chat-bubble-accentRenkVurgu teması renk balonu
chat-bubble-neutralRenkNötr tema renk balonu
chat-bubble-infoRenkBilgi anlamsal renk balonu
chat-bubble-successRenkBaşarı anlamsal renk balonu
chat-bubble-warningRenkUyarı anlamsal renk balonu
chat-bubble-errorRenkHata anlamsal renk balonu

Temel Kullanım

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>

Avatar'la sohbet et

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>

Sohbet Boyutları

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>

Sohbet Stilleri

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>

Sohbet Üstbilgisi ve Altbilgisi

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>

Konuşma Konusu

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 veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?

Cherry MCP, AI editörünüze talep üzerine tam Sohbet sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.

Cherry MCP'yi deneyin