mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 21:31:28 +04:00
Add docs for Chat, and document callout, legend, inline list, and footer classes (#2887)
This commit is contained in:
Bartosz-Do
@@ -24,6 +24,14 @@ This example shows typical content wrapped in `.prose`.
|
||||
<Prose> <h1>Getting started with documentation</h1> <p> Writing clear and effective documentation is essential for any project. When you create content that others will read and use, proper formatting makes all the difference. <em>Good documentation</em> helps users understand complex concepts quickly and efficiently. </p> <blockquote> <p>Documentation is a love letter that you write to your future self.</p> </blockquote> <p> The foundation of great documentation starts with <strong>understanding your audience</strong> and their needs. </p> </Prose>
|
||||
</Example>
|
||||
|
||||
## Callout
|
||||
|
||||
Wrap a short note in `.callout` to make it stand out from the surrounding text, for example a tip or a warning. It works inside or outside `.prose`.
|
||||
|
||||
<Example>
|
||||
<div class="callout"> <p><strong>Tip.</strong> Keep a glossary of terms your readers might not know. It saves you from re-explaining the same concept in every article.</p> </div>
|
||||
</Example>
|
||||
|
||||
## Inline HTML elements
|
||||
|
||||
HTML provides a long list of inline tags. These are commonly used inside `.prose`.
|
||||
|
||||
@@ -86,6 +86,14 @@ For more complex data visualizations, you can create advanced charts with multip
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Legend key
|
||||
|
||||
ApexCharts draws its own legend, but you can also build a plain-HTML legend next to a chart's title — for example to label the series above the chart instead of below it. Add a `legend` span before each label and color it with a `bg-*` utility class.
|
||||
|
||||
<Example>
|
||||
<div class="d-flex align-items-center gap-3"> <div class="d-flex align-items-center gap-2"> <span class="legend bg-primary"></span> <span class="text-secondary">This year</span> </div> <div class="d-flex align-items-center gap-2"> <span class="legend bg-secondary"></span> <span class="text-secondary">Last year</span> </div> </div>
|
||||
</Example>
|
||||
|
||||
## SCSS variables
|
||||
|
||||
Use these SCSS variables to customize charts. The default values are:
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
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.
|
||||
@@ -112,6 +112,22 @@ This pattern joins several variants: a flush list inside a card, hoverable rows,
|
||||
<div class="card"> <div class="card-header"> <h3 class="card-title">Notifications</h3> </div> <div class="list-group list-group-flush list-group-hoverable"> <div class="list-group-item"> <div class="row align-items-center"> <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div> <div class="col text-truncate"> <a href="#" class="text-body d-block">Build failed</a> <div class="d-block text-secondary text-truncate mt-n1">The last deploy did not finish</div> </div> <div class="col-auto"> <a href="#" class="list-group-item-actions"> <Icon name="star" color="muted" /> </a> </div> </div> </div> <div class="list-group-item"> <div class="row align-items-center"> <div class="col-auto"><span class="status-dot d-block"></span></div> <div class="col text-truncate"> <a href="#" class="text-body d-block">New comment</a> <div class="d-block text-secondary text-truncate mt-n1">Alice replied in the design thread</div> </div> <div class="col-auto"> <a href="#" class="list-group-item-actions show"> <Icon name="star" color="yellow" /> </a> </div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Inline list
|
||||
|
||||
`list-inline` is a separate, simpler pattern for a row of items — for example a footer or a page header with a few links. It is not a `list-group`: items have no border or background, only spacing between them.
|
||||
|
||||
Use `list-inline` on a `ul` and `list-inline-item` on each `li`.
|
||||
|
||||
<Example bg="surface-secondary" column>
|
||||
<ul class="list-inline mb-0"> <li class="list-inline-item">Documentation</li> <li class="list-inline-item">License</li> <li class="list-inline-item">Source code</li> </ul>
|
||||
</Example>
|
||||
|
||||
Add `list-inline-dots` to separate items with a centered dot instead of relying on spacing alone. Tabler uses this pattern in its own footer.
|
||||
|
||||
<Example bg="surface-secondary" column>
|
||||
<ul class="list-inline list-inline-dots mb-0"> <li class="list-inline-item">Documentation</li> <li class="list-inline-item">License</li> <li class="list-inline-item">Source code</li> </ul>
|
||||
</Example>
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Pick the right element. Use `ul` or `ol` with `li` for a list of items, `nav` with `a` for navigation, and `button` for actions on the page.
|
||||
|
||||
@@ -76,6 +76,16 @@ To create a sample version of the dashboard, you can use the following code snip
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Footer
|
||||
|
||||
Add a `footer` element with the `footer` class after `.page-wrapper` to close the page. `d-print-none` hides it when the page is printed, the same as the navbar. Use [`list-inline list-inline-dots`](/ui/components/list-group#inline-list) for the footer links.
|
||||
|
||||
<Example>
|
||||
<footer class="footer footer-transparent d-print-none"> <div class="container-xl"> <div class="row text-center align-items-center flex-row-reverse"> <div class="col-lg-auto ms-lg-auto"> <ul class="list-inline list-inline-dots mb-0"> <li class="list-inline-item"><a href="#" class="link-secondary">Documentation</a></li> <li class="list-inline-item"><a href="#" class="link-secondary">License</a></li> <li class="list-inline-item"><a href="#" class="link-secondary">Source code</a></li> </ul> </div> <div class="col-12 col-lg-auto mt-3 mt-lg-0"> <ul class="list-inline list-inline-dots mb-0"> <li class="list-inline-item">Copyright © 2026 <a href="#" class="link-secondary">Your company</a>. All rights reserved.</li> <li class="list-inline-item"><a href="#" class="link-secondary">v1.0.0</a></li> </ul> </div> </div> </div> </footer>
|
||||
</Example>
|
||||
|
||||
`footer-transparent` drops the footer's own background, so it blends with the page behind it. Remove the class for a footer with a solid background, for example to visually separate it from the page body.
|
||||
|
||||
## Sidebar layout
|
||||
|
||||
To create a sidebar layout, you can use the following code snippet. This code snippet will help you to create a sidebar layout with a header.
|
||||
|
||||
Reference in New Issue
Block a user