跳转到主内容
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颜色错误语义颜色气泡

基本用法

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>

与头像聊天

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>

聊天尺寸

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>

聊天风格

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>

聊天页眉和页脚

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>

对话主题

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>