Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Chat Bubble Component

CSS-only Tailwind CSS chat bubble component. Start and end positions for sent and received messages, with avatar and timestamp slots. WCAG AA, works with Django, HTMX, Laravel, React, and any stack.

Komponenty czatu wyświetlają wiadomości konwersacyjne w czytelnym, zorganizowanym formacie. Zbudowane w oparciu o semantyczny kod HTML i elastyczne układy, dymki czatu reprezentują zarówno wiadomości użytkownika, jak i systemowe. System czatu Frutjam obsługuje wiele kolorów, wyrównań i stylów — idealnie nadaje się do interfejsów przesyłania wiadomości, paneli obsługi klienta i konwersacyjnego interfejsu użytkownika.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
chatOpieraćOpakowanie dla pojedynczego wiersza wiadomości czatu
chat-bubbleModyfikatorStylizowana bańka wiadomości
chat-avatarModyfikatorAwatar wyświetlany obok wiadomości
chat-headerModyfikatorNazwa nadawcy lub metadane nad dymkiem
chat-footerModyfikatorSygnatura czasowa lub stan pod dymkiem
chat-startModyfikatorWyrównuje dymek do lewej strony (wiadomość przychodząca)
chat-endModyfikatorWyrównuje dymek do prawej strony (wiadomość wychodząca)
chat-xsRozmiarBardzo mały
chat-smRozmiarMały
chat-mdRozmiarŚredni (domyślny)
chat-lgRozmiarDuży
chat-xlRozmiarBardzo duży
chat-bubble-primaryKolorPodstawowy motyw kolorowej bańki
chat-bubble-secondaryKolorKolorowa bańka motywu drugorzędnego
chat-bubble-accentKolorBańka koloru motywu akcentującego
chat-bubble-neutralKolorNeutralna bańka w kolorze motywu
chat-bubble-infoKolorInformacje semantyczna kolorowa bańka
chat-bubble-successKolorSukces semantyczna kolorowa bańka
chat-bubble-warningKolorOstrzeżenie semantyczna kolorowa bańka
chat-bubble-errorKolorBłąd semantycznej kolorowej bańki

Podstawowe użycie

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>

Czatuj z Avatarem

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>

Rozmiary czatu

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>

Style czatu

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>

Nagłówek i stopka czatu

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>

Temat rozmowy

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>