Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

countup added

Browse Source
This commit is contained in:
Dawid Harat
2019-12-28 23:13:00 +01:00
parent 94519737f4
commit 145edab513
6 changed files with 175 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
js/tabler.js
View File

@@ -1,3 +1,5 @@
import { CountUp } from "countup.js";
const tabler = {
hexToRgbA: function(hex, opacity) {
let c;
@@ -59,6 +61,19 @@ $(document).ready(function() {
// $('[data-toggle="tooltip"]').tooltip();
// $('[data-toggle="popover"]').popover();
/*
CountUp
*/
let countups = document.querySelectorAll("[data-countup]");
for(let i = 0;i<countups.length;i++){
let dataCountUp;
if(countups[i].getAttribute("data-countup") != ''){
dataCountUp = JSON.parse(countups[i].getAttribute("data-countup"));
}
let countup = new CountUp(countups[i],parseFloat(countups[i].innerText),dataCountUp);
countup.start();
}
/*
Imask plugin
*/

1
package.json
View File

@@ -111,6 +111,7 @@
"apexcharts": "3.11.2",
"autosize": "4.0.2",
"bootstrap": "twbs/bootstrap#c6cfc23",
"countup.js": "2.0.4",
"fullcalendar": "3.10.1",
"imask": "5.2.1",
"jquery": "3.4.1",

3
pages/_data/libs.json
View File

@@ -22,7 +22,8 @@
"@fullcalendar/interaction/main.min.js",
"@fullcalendar/timegrid/main.min.js",
"@fullcalendar/list/main.min.js"
]
],
"countup": "countup.js/dist/countUp.min.js"
},
"css": {
"jqvmap": "jqvmap/dist/jqvmap.min.css",

3
pages/_data/menu.yml
View File

@@ -136,6 +136,9 @@ docs:
colors:
title: Colors
url: docs/colors.html
countup:
title: Countup
url: docs/countup.html
cursors:
title: Cursors
url: docs/cursors.html

115
pages/_docs/countup.md Normal file
View File

@@ -0,0 +1,115 @@
---
title: Countup
menu: docs.countup
---
Countups with many options that can be found [**here**](https://inorganik.github.io/countUp.js/)
To make countup add `data-countup` to any html text tag.
### Default countup
Set number to count up.
{% example %}
<h1 data-countup>30000</h1>
{% endexample %}
### Duration
Set the `duration` of the countup. (2s is set by default)
{% example %}
<h1 data-countup>30000</h1>
<h1 data-countup='{"duration":4}'>30000</h1>
<h1 data-countup='{"duration":6}'>30000</h1>
{% endexample %}
### Starting value
Set the start value of countup using `startVal`.
If you set it bigger than the `count`, countup will run reverse.
{% example %}
<h1 data-countup='{"startVal":12345}'>30000</h1>
<h1 data-countup='{"startVal":47655}'>30000</h1>
{% endexample %}
### Decimal places
Set how many decimal places to show using `decimalPlaces`.
{% example %}
<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>
{% endexample %}
### Easing
Disable easing using `"useEasing": false`. (`true` by default)
{% example %}
<h1 data-countup>30000</h1>
<h1 data-countup='{"useEasing": false}'>30000</h1>
{% endexample %}
### Use grouping
Disable grouping using `"useGrouping": false`. (`true` by default)
{% example %}
<h1 data-countup>30000</h1>
<h1 data-countup='{"useGrouping": false}'>30000</h1>
{% endexample %}
### Separator
Set seperator that seperates groups using `separator`. (`,` by default)
{% example %}
<h1 data-countup>3000000</h1>
<h1 data-countup='{"separator":" "}'>3000000</h1>
<h1 data-countup='{"separator":"-"}'>3000000</h1>
<h1 data-countup='{"separator":":"}'>3000000</h1>
{% endexample %}
### Decimal separator
Set decimal separator using `decimal`. (`.` by default)
{% example %}
<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>
{% endexample %}
### Prefix
Set countup prefix using `prefix`.
{% example %}
<h1 data-countup='{"prefix":"$"}'>30000</h1>
<h1 data-countup='{"prefix":"€"}'>30000</h1>
<h1 data-countup='{"prefix":"£"}'>30000</h1>
{% endexample %}
### Suffix
Set countup suffix using `suffix`.
{% example %}
<h1 data-countup='{"suffix":"%"}'>30</h1>
<h1 data-countup='{"suffix":"‰"}'>30</h1>
<h1 data-countup='{"suffix":"k"}'>30</h1>
{% endexample %}
Of course you can mix all of these:
{% example %}
<h1 data-countup='{"duration":6,"startVal":12345,"decimalPlaces":2,"separator":" ","prefix":"$"}'>64547834.76</h1>
{% endexample %}
To do more advanced stuff with countups go [**here**](https://inorganik.github.io/countUp.js/) to check how it's done.

39
pages/tmp4.html Normal file
View File

@@ -0,0 +1,39 @@
---
tmp: true
menu: a.c.d
---
<div class="card">
<div class="card-header">
<h2 class="card-title">CountUp</h2>
</div>
<div class="card-body">
<div class="row">
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup>30000</h1>
<small>(Default)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"duration":10}'>30000</h1>
<small>(Duration 10s)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"useGrouping":false}'>30000</h1>
<small>(No comma)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"separator":" "}'>30000000</h1>
<small>(Space)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"suffix":"%"}'>30</h1>
<small>(Suffix)</small>
</div>
<div class="col-6 col-md-4 col-xl-2 my-3 text-center">
<h1 class="mb-0" data-countup='{"prefix":"$"}'>30000</h1>
<small>(Prefix)</small>
</div>
</div>
</div>
</div>