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

Komponent dymka czatu

Ostatnia aktualizacja:

Komponent dymka czatu CSS Tailwind obsługujący wyłącznie CSS. Pozycje początkowe i końcowe wysłanych i odebranych wiadomości, z miejscami na awatary i sygnatury czasowe. WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

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

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

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

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

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

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

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>

Używasz kodu Claude'a, kursora lub innego edytora AI?

Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Pogawędzić. Żadnych więcej zajęć z halucynacjami.

Try Cherry MCP