mirror of
https://github.com/tabler/tabler.git
synced 2026-08-14 23:32:25 +04:00
New docs (#1492)
This commit is contained in:
Paweł Kuna
GitHub
@@ -0,0 +1,136 @@
|
||||
---
|
||||
title: Countup
|
||||
description: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
|
||||
libs: countup
|
||||
---
|
||||
|
||||
To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`.
|
||||
|
||||
## Default countup
|
||||
|
||||
To create a countup, add `data-countup` to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.
|
||||
|
||||
```html code example
|
||||
<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
|
||||
|
||||
<h1 data-countup>30000</h1>
|
||||
```
|
||||
|
||||
## Duration
|
||||
|
||||
Set the `duration` to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.
|
||||
|
||||
```html code example
|
||||
<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
|
||||
|
||||
<h1 data-countup>30000</h1>
|
||||
<h1 data-countup='{"duration":4}'>30000</h1>
|
||||
<h1 data-countup='{"duration":6}'>30000</h1>
|
||||
```
|
||||
|
||||
## Starting value
|
||||
|
||||
By default the countup will start from zero. If you want to set a different start value use `startVal`.
|
||||
You can also set the start value to be greater than the final value, so that it counts down instead of up.
|
||||
|
||||
```html code example
|
||||
<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
|
||||
|
||||
<h1 data-countup='{"startVal":12345}'>30000</h1>
|
||||
<h1 data-countup='{"startVal":47655}'>30000</h1>
|
||||
```
|
||||
|
||||
## Decimal places
|
||||
|
||||
Set how many decimal numbers should be displayed using `decimalPlaces`.
|
||||
|
||||
```html code example
|
||||
<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
|
||||
|
||||
<h1 data-countup>3.123</h1>
|
||||
<h1 data-countup='{"decimalPlaces":1}'>3.123</h1>
|
||||
<h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
|
||||
<h1 data-countup='{"decimalPlaces":3}'>3.123</h1>
|
||||
```
|
||||
|
||||
## Easing
|
||||
|
||||
Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration.
|
||||
|
||||
```html code example
|
||||
<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
|
||||
|
||||
<h1 data-countup>30000</h1>
|
||||
<h1 data-countup='{"useEasing": false}'>30000</h1>
|
||||
```
|
||||
|
||||
## Use grouping
|
||||
|
||||
Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default and the default group separator is a comma.
|
||||
|
||||
```html code example
|
||||
<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
|
||||
|
||||
<h1 data-countup>30000</h1>
|
||||
<h1 data-countup='{"useGrouping": false}'>30000</h1>
|
||||
```
|
||||
|
||||
## Separator
|
||||
|
||||
You can change the default comma group separator using `separator` and specifying the one you wish to use.
|
||||
|
||||
```html code example
|
||||
<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
|
||||
|
||||
<h1 data-countup>3000000</h1>
|
||||
<h1 data-countup='{"separator":" "}'>3000000</h1>
|
||||
<h1 data-countup='{"separator":"-"}'>3000000</h1>
|
||||
<h1 data-countup='{"separator":":"}'>3000000</h1>
|
||||
```
|
||||
|
||||
## Decimal separator
|
||||
|
||||
You can also change the decimal separator which is set to a full stop by default. To do it, use `decimal` and specify the decimal separator of your choice.
|
||||
|
||||
```html code example
|
||||
<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
|
||||
|
||||
<h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
|
||||
<h1 data-countup='{"decimalPlaces":2,"decimal":".."}'>3.12</h1>
|
||||
<h1 data-countup='{"decimalPlaces":2,"decimal":"^"}'>3.12</h1>
|
||||
<h1 data-countup='{"decimalPlaces":2,"decimal":":"}'>3.12</h1>
|
||||
```
|
||||
|
||||
## Prefix
|
||||
|
||||
Set the countup prefix using `prefix` and specifying the prefix you want to add, for instance a currency symbol.
|
||||
|
||||
```html code example
|
||||
<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
|
||||
|
||||
<h1 data-countup='{"prefix":"$"}'>30000</h1>
|
||||
<h1 data-countup='{"prefix":"€"}'>30000</h1>
|
||||
<h1 data-countup='{"prefix":"£"}'>30000</h1>
|
||||
```
|
||||
|
||||
## Suffix
|
||||
|
||||
Set the countup suffix using `suffix`.
|
||||
|
||||
```html code example
|
||||
<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
|
||||
|
||||
<h1 data-countup='{"suffix":"%"}'>30</h1>
|
||||
<h1 data-countup='{"suffix":"‰"}'>30</h1>
|
||||
<h1 data-countup='{"suffix":"k"}'>30</h1>
|
||||
```
|
||||
|
||||
Of course you can mix all of these:
|
||||
|
||||
```html code example
|
||||
<script src="$TABLER_CDN/dist/libs/countup.js/dist/countUp.js"></script>
|
||||
|
||||
<h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>
|
||||
```
|
||||
|
||||
For more advanced features of countups, click [**here**](https://inorganik.github.io/countUp.js/) and see what more you can do.
|
||||
Reference in New Issue
Block a user