mirror of
https://github.com/tabler/tabler.git
synced 2026-08-30 22:01:28 +04:00
56 lines
5.2 KiB
Plaintext
56 lines
5.2 KiB
Plaintext
---
|
|
title: Chat
|
|
summary: A chat shows a conversation as a column of message bubbles. Use it for direct messages, support conversations, or comments on a record.
|
|
description: Build a conversation view with message bubbles, sender info, and a typing indicator.
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
|
|
## Overview
|
|
|
|
Wrap the conversation in `chat`, and put each message row in `chat-bubbles`. A message itself is a `chat-bubble`, with `chat-bubble-title` for the sender's name and time, and `chat-bubble-body` for the text.
|
|
|
|
Add `chat-bubble-me` to bubbles the current user sent. Tabler tints them, and you place them on the other side of the row to tell them apart from replies.
|
|
|
|
<Example>
|
|
<div class="chat"> <div class="chat-bubbles"> <div class="chat-item"> <div class="row align-items-end"> <div class="col-auto"> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> </div> <div class="col-auto"> <div class="chat-bubble"> <div class="chat-bubble-title"> <div class="row"> <div class="col chat-bubble-author">Alice Marlin</div> <div class="col-auto chat-bubble-date">10:24</div> </div> </div> <div class="chat-bubble-body"> <p>Hey, are you free for a quick call?</p> </div> </div> </div> </div> </div> <div class="chat-item"> <div class="row align-items-end justify-content-end"> <div class="col-auto"> <div class="chat-bubble chat-bubble-me"> <div class="chat-bubble-title"> <div class="row"> <div class="col chat-bubble-author">You</div> <div class="col-auto chat-bubble-date">10:26</div> </div> </div> <div class="chat-bubble-body"> <p>Sure, give me five minutes.</p> </div> </div> </div> <div class="col-auto"> <span class="avatar" style="background-image: url(/static/avatars/002m.jpg)"></span> </div> </div> </div> </div> </div>
|
|
</Example>
|
|
|
|
## Usage
|
|
|
|
### Message order
|
|
|
|
Put the avatar and the bubble in the order you want them to read: avatar first for messages from other people, bubble first for `chat-bubble-me` messages. Add `justify-content-end` to the row for `chat-bubble-me`, so the bubble and avatar move to the far side.
|
|
|
|
### Typing indicator
|
|
|
|
While you wait for a reply, show a bubble with `animated-dots` after the text — it types itself out and loops.
|
|
|
|
<Example>
|
|
<div class="chat-bubble"> <div class="chat-bubble-body"> <p class="text-secondary fst-italic mb-0">Alice is typing<span class="animated-dots"></span></p> </div> </div>
|
|
</Example>
|
|
|
|
### Image or GIF in a message
|
|
|
|
Add an image inside `chat-bubble-body`, below the text.
|
|
|
|
<Example codeOnly>
|
|
<div class="chat-bubble"> <div class="chat-bubble-body"> <p>Check this out</p> <div class="mt-2"> <img src="/static/photos/cup-of-coffee-and-an-open-book.jpg" alt="" class="rounded img-fluid" /> </div> </div> </div>
|
|
</Example>
|
|
|
|
## Examples
|
|
|
|
### Chat window
|
|
|
|
A card with a scrollable message list and a message input in the footer.
|
|
|
|
<Example bg="surface-secondary">
|
|
<div class="card" style="max-width: 28rem;"> <div class="card-header"> <div class="row align-items-center flex-fill"> <div class="col-auto"> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> </div> <div class="col"> <div>Alice Marlin</div> <div class="text-secondary">Online</div> </div> </div> </div> <div class="card-body"> <div class="chat"> <div class="chat-bubbles"> <div class="chat-item"> <div class="row align-items-end"> <div class="col-auto"> <span class="avatar avatar-xs" style="background-image: url(/static/avatars/016f.jpg)"></span> </div> <div class="col-auto"> <div class="chat-bubble"> <div class="chat-bubble-body"> <p>Hey, are you free for a quick call?</p> </div> </div> </div> </div> </div> <div class="chat-item"> <div class="row align-items-end justify-content-end"> <div class="col-auto"> <div class="chat-bubble chat-bubble-me"> <div class="chat-bubble-body"> <p>Sure, give me five minutes.</p> </div> </div> </div> <div class="col-auto"> <span class="avatar avatar-xs" style="background-image: url(/static/avatars/002m.jpg)"></span> </div> </div> </div> </div> </div> </div> <div class="card-footer"> <div class="input-group input-group-flat"> <input type="text" class="form-control" placeholder="Type message" /> <span class="input-group-text"> <button type="button" class="btn btn-icon" aria-label="Send message"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 14l11 -11" /><path d="M21 3l-6.5 18a0.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a0.55 .55 0 0 1 0 -1l18 -6.5" /></svg> </button> </span> </div> </div> </div>
|
|
</Example>
|
|
|
|
## Accessibility
|
|
|
|
- Keep messages in reading order in the markup. Screen reader users go through the conversation top to bottom, the same as sighted users see it top to bottom.
|
|
- Do not rely on bubble color or side alone to show who sent a message — keep `chat-bubble-title` with the sender's name, or repeat it for assistive technology with a visually hidden label.
|
|
- Label icon-only controls in the message input, for example the send button, with `aria-label`.
|
|
- The typing indicator is an animated "…" — pair it with real text such as "Alice is typing", so the state does not depend on the animation alone.
|