メインコンテンツへスキップ
Frutjam logo Frutjam
v2.2.5
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 コード、Cursor、または別の AI エディターを使用していますか?

Cherry MCP は、AI エディタに正確な チャット クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。

Cherry MCP を試してみる