메인 콘텐츠로 건너뛰기
Frutjam logo Frutjam
v2.2.2
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를 사용해 보세요