mirror of
https://github.com/tabler/tabler.git
synced 2026-08-07 03:42:27 +04:00
Bartosz-Do
83 lines
4.6 KiB
Plaintext
83 lines
4.6 KiB
Plaintext
---
|
|
title: Trending
|
|
summary: A trend indicator shows how a value changed. It joins the number with an arrow and a color, so users can read the direction at a glance.
|
|
description: Show value change with a trend indicator.
|
|
layout: '@layouts/DocsMdxLayout.astro'
|
|
---
|
|
import Example from '@components/Example.astro';
|
|
import Icon from '@ui/Icon.astro';
|
|
|
|
## Overview
|
|
|
|
A trend indicator is a small inline element. It shows a number and an arrow next to it. Use it next to a metric, in a stats card, or in a table row.
|
|
|
|
There is no dedicated class for it. Build it from utilities: `d-inline-flex` and `align-items-center` to keep the number and the icon in one line, `lh-1` to keep the line short, and a text color that matches the direction.
|
|
|
|
<Example centered>
|
|
<span class="text-green d-inline-flex align-items-center lh-1">25% <Icon name="arrow-up" size="sm" class="ms-0" /></span>
|
|
</Example>
|
|
|
|
## Variants
|
|
|
|
### Direction
|
|
|
|
Use three states to describe the change. Pick the color and the icon together, so they always tell the same story.
|
|
|
|
| Change | Color | Icon |
|
|
| --- | --- | --- |
|
|
| Up | `text-green` | `arrow-up` |
|
|
| No change | `text-muted` | `minus` |
|
|
| Down | `text-red` | `arrow-down` |
|
|
|
|
<Example centered>
|
|
<span class="text-green d-inline-flex align-items-center lh-1">25% <Icon name="arrow-up" size="sm" class="ms-0" /></span> <span class="text-muted d-inline-flex align-items-center lh-1">0% <Icon name="minus" size="sm" class="ms-0" /></span> <span class="text-red d-inline-flex align-items-center lh-1">-12% <Icon name="arrow-down" size="sm" class="ms-0" /></span>
|
|
</Example>
|
|
|
|
### Unit
|
|
|
|
The unit is only text after the number. Use a percent sign, a currency, or no unit at all.
|
|
|
|
<Example centered>
|
|
<span class="text-green d-inline-flex align-items-center lh-1">8% <Icon name="arrow-up" size="sm" class="ms-0" /></span> <span class="text-green d-inline-flex align-items-center lh-1">4.2K <Icon name="arrow-up" size="sm" class="ms-0" /></span> <span class="text-red d-inline-flex align-items-center lh-1">-3 <Icon name="arrow-down" size="sm" class="ms-0" /></span>
|
|
</Example>
|
|
|
|
### Size
|
|
|
|
The indicator takes the font size of its parent. Put it in a heading or use a text size utility to make it bigger or smaller.
|
|
|
|
<Example centered vertical>
|
|
<span class="text-green d-inline-flex align-items-center lh-1 small">15% <Icon name="arrow-up" size="sm" class="ms-0" /></span> <span class="text-green d-inline-flex align-items-center lh-1">15% <Icon name="arrow-up" size="sm" class="ms-0" /></span> <span class="text-green d-inline-flex align-items-center lh-1 h2 m-0">15% <Icon name="arrow-up" class="ms-0" /></span>
|
|
</Example>
|
|
|
|
## Examples
|
|
|
|
### Next to a value
|
|
|
|
Place the indicator after the number. Use `align-items-baseline` on the wrapper, so the number and the indicator sit on the same line.
|
|
|
|
<Example>
|
|
<div> <div class="text-secondary">Today's sales</div> <div class="d-flex align-items-baseline"> <div class="h3 me-2 mb-0">6,782</div> <span class="text-green d-inline-flex align-items-center lh-1">7% <Icon name="arrow-up" size="sm" class="ms-0" /></span> </div> </div>
|
|
</Example>
|
|
|
|
### In a stats card
|
|
|
|
This is the most common place for the indicator. The value stays on the left and the change on the right.
|
|
|
|
<Example bg="surface-secondary" column>
|
|
<div class="card"> <div class="card-body"> <div class="row align-items-center"> <div class="col"> <div class="text-secondary">New clients</div> <div class="h3 m-0">1,352</div> </div> <div class="col-auto"> <span class="text-red d-inline-flex align-items-center lh-1">-4% <Icon name="arrow-down" size="sm" class="ms-0" /></span> </div> </div> </div> </div>
|
|
</Example>
|
|
|
|
### In a table
|
|
|
|
Use it in a table cell to compare rows quickly.
|
|
|
|
<Example>
|
|
<table class="table"> <thead> <tr> <th>Product</th> <th>Sales</th> <th>Change</th> </tr> </thead> <tbody> <tr> <td>Basic plan</td> <td>4,120</td> <td><span class="text-green d-inline-flex align-items-center lh-1">12% <Icon name="arrow-up" size="sm" class="ms-0" /></span></td> </tr> <tr> <td>Pro plan</td> <td>2,043</td> <td><span class="text-red d-inline-flex align-items-center lh-1">-7% <Icon name="arrow-down" size="sm" class="ms-0" /></span></td> </tr> <tr> <td>Team plan</td> <td>986</td> <td><span class="text-muted d-inline-flex align-items-center lh-1">0% <Icon name="minus" size="sm" class="ms-0" /></span></td> </tr> </tbody> </table>
|
|
</Example>
|
|
|
|
## Accessibility
|
|
|
|
- Keep the sign in the text, for example `-12%`. Users who do not see color still get the direction.
|
|
- The icon is hidden from screen readers, so it must not be the only carrier of meaning.
|
|
- Add a word like `Change` in the table header or near the value, so it is clear what the number means.
|