Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-07-29 14:34:37 +04:00
Code Issues Projects Releases Wiki Activity

Merge branches 'dev' and 'dev-cursors-badges-colors' of https://github.com/tabler/tabler into dev-cursors-badges-colors

Browse Source 
 Conflicts:
	pages/colors.html
This commit is contained in:
codecalm
2019-12-09 18:19:10 +01:00
parent 5995fe2a94 447a2f6703
commit 432a80a130
27 changed files with 308 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.editorconfig
+1 -10
View File
@@ -10,8 +10,8 @@ indent_style=tab
tab_width=3 tab_width=3
[*.html] [*.html]
indent_style=space
indent_size=3 indent_size=3
insert_final_newline=false
[*.md] [*.md]
indent_style=tab indent_style=tab
@@ -20,12 +20,3 @@ tab_width=3
[*.js.map] [*.js.map]
indent_style=tab indent_style=tab
indent_size=3 indent_size=3
[{*.css,*.scss}]
indent_style=space
indent_size=2
insert_final_newline = true
[{*.yml,*.yaml}]
indent_style=space
indent_size=2
README.md
+1 -1
View File
@@ -16,7 +16,7 @@ Premium and Open Source dashboard template with responsive and high-quality UI.
## Status ## Status
<a href="https://www.npmjs.com/package/tabler-ui"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg" /></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg" /></a> <img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a> <a href="https://www.npmjs.com/package/tabler-ui"><a href="#backers" alt="sponsors on Open Collective"><img src="https://opencollective.com/tabler/backers/badge.svg"/></a> <a href="#sponsors" alt="Sponsors on Open Collective"><img src="https://opencollective.com/tabler/sponsors/badge.svg"/></a> <img src="https://img.shields.io/npm/dt/tabler-ui.svg" alt="Total Downloads"></a> <a href="https://github.com/tabler/tabler/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/tabler-ui.svg" alt="License"></a> <a href="https://github.com/tabler/tabler/releases"><img src="https://img.shields.io/npm/v/tabler-ui.svg" alt="Latest Release"></a>
## Features ## Features
js/tabler-charts.js
+1 -4
View File
@@ -7,7 +7,7 @@
color = $this.attr('data-spark-color') || 'blue', color = $this.attr('data-spark-color') || 'blue',
type = $this.attr('data-spark-type') || 'line'; type = $this.attr('data-spark-type') || 'line';
const $div = $('<div />').html(data); const $div = $('<div/>').html(data);
$this.append($div); $this.append($div);
let strokeColor = tabler.colors[color], let strokeColor = tabler.colors[color],
@@ -169,9 +169,6 @@ if (window.Apex) {
yaxis: { yaxis: {
show: false, show: false,
labels: {
show: false,
},
}, },
}; };
} }
package.json
+10 -10
View File
@@ -68,24 +68,24 @@
"main": "dist/js/tabler.js", "main": "dist/js/tabler.js",
"homepage": "https://tabler.io", "homepage": "https://tabler.io",
"devDependencies": { "devDependencies": {
"@babel/preset-env": "7.7.4", "@babel/preset-env": "7.7.6",
"browser-sync": "2.26.7", "browser-sync": "2.26.7",
"bundlesize": "0.18.0", "bundlesize": "0.18.0",
"clean-css-cli": "4.3.0", "clean-css-cli": "4.3.0",
"cross-env": "6.0.3", "cross-env": "6.0.3",
"eslint": "6.7.1", "eslint": "6.7.2",
"eslint-config-xo": "0.27.2", "eslint-config-xo": "0.27.2",
"eslint-plugin-import": "2.18.2", "eslint-plugin-import": "2.19.1",
"eslint-plugin-unicorn": "13.0.0", "eslint-plugin-unicorn": "14.0.1",
"glob": "^7.1.6", "glob": "7.1.6",
"http-server": "0.11.1", "http-server": "0.12.0",
"icon-font-generator": "2.1.10", "icon-font-generator": "2.1.10",
"node-sass": "4.13.0", "node-sass": "4.13.0",
"node-sass-package-importer": "5.3.2", "node-sass-package-importer": "5.3.2",
"nodemon": "^2.0.1", "nodemon": "2.0.1",
"npm-run-all": "4.1.5", "npm-run-all": "4.1.5",
"postcss-cli": "6.1.3", "postcss-cli": "6.1.3",
"rollup": "1.27.5", "rollup": "1.27.9",
"rollup-plugin-babel": "4.3.3", "rollup-plugin-babel": "4.3.3",
"rollup-plugin-babel-minify": "9.1.1", "rollup-plugin-babel-minify": "9.1.1",
"rollup-plugin-commonjs": "10.1.0", "rollup-plugin-commonjs": "10.1.0",
@@ -95,7 +95,7 @@
"stylelint": "12.0.0", "stylelint": "12.0.0",
"stylelint-config-twbs-bootstrap": "1.0.0", "stylelint-config-twbs-bootstrap": "1.0.0",
"svgo": "1.3.2", "svgo": "1.3.2",
"terser": "4.4.0", "terser": "4.4.2",
"yaml": "1.7.2" "yaml": "1.7.2"
}, },
"dependencies": { "dependencies": {
@@ -106,7 +106,7 @@
"@fullcalendar/timegrid": "4.3.0", "@fullcalendar/timegrid": "4.3.0",
"apexcharts": "3.10.1", "apexcharts": "3.10.1",
"autosize": "4.0.2", "autosize": "4.0.2",
"bootstrap": "twbs/bootstrap#76fd85b", "bootstrap": "twbs/bootstrap#dde55d1",
"fullcalendar": "3.10.1", "fullcalendar": "3.10.1",
"imask": "5.2.1", "imask": "5.2.1",
"jquery": "3.4.1", "jquery": "3.4.1",
pages/_data/charts.yml
+37 -30
View File
@@ -1,7 +1,16 @@
tasks-overview:
type: bar
categories: ['Sprint 1','Sprint 2','Sprint 3','Sprint 4','Sprint 5','Sprint 6','Sprint 7','Sprint 8','Sprint 9','Sprint 10','Sprint 11','Sprint 12','Sprint 13','Sprint 14','Sprint 15','Sprint 16','Sprint 17','Sprint 18','Sprint 19','Sprint 20','Sprint 21','Sprint 22','Sprint 23','Sprint 24']
series:
- name: A
data: [44, 32, 48, 72, 60, 16, 44, 32, 78, 50, 68, 34, 26, 48, 72, 60, 84, 64, 74, 52, 62, 50, 32, 22]
total-sales: total-sales:
type: donut type: donut
demo: true
sparkline: true sparkline: true
hide-legend: true hide-legend: true
name: Total sales
series: series:
- name: Direct - name: Direct
color: blue color: blue
@@ -16,26 +25,26 @@ total-sales:
color: yellow color: yellow
data: 12 data: 12
total-sales2: campaigns:
type: radalBar name: Campaigns
demo: true
type: radialBar
sparkline: true sparkline: true
hide-legend: true hide-legend: true
series: series:
- name: Direct - name: Total Sent
color: blue color: blue
data: 44 data: 44
- name: Affilliate - name: Reached
color: green color: blue-light
data: 55 data: 36
- name: Sponsored - name: Opened
color: red color: blue-lighten
data: 35 data: 18
- name: E-mail
color: yellow
data: 12
tasks: tasks:
name: Tasks name: Tasks
demo: true
type: line type: line
categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W'] categories: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W']
groups: [1, 2, 3] groups: [1, 2, 3]
@@ -72,7 +81,7 @@ development-activity:
line: line:
name: Employment Growth name: Employment Growth
display: true demo: true
type: line type: line
show-grid: true show-grid: true
categories: ['2013', '2014', '2015', '2016', '2017', '2018'] categories: ['2013', '2014', '2015', '2016', '2017', '2018']
@@ -89,7 +98,7 @@ line:
line-stroke: line-stroke:
name: Line chart name: Line chart
display: true demo: true
type: line type: line
stroke-curve: straight stroke-curve: straight
hide-legend: true hide-legend: true
@@ -108,7 +117,7 @@ line-stroke:
stepline: stepline:
name: Stepline name: Stepline
display: true demo: true
type: line type: line
hide-legend: true hide-legend: true
stroke-curve: stepline stroke-curve: stepline
@@ -120,7 +129,7 @@ stepline:
temperature: temperature:
name: Monthly Average Temperature name: Monthly Average Temperature
display: true demo: true
type: line type: line
show-labels: true show-labels: true
show-data-labels: true show-data-labels: true
@@ -139,7 +148,7 @@ temperature:
area: area:
name: Lorem ipsum name: Lorem ipsum
display: true demo: true
type: area type: area
hide-legend: true hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -154,7 +163,7 @@ area:
area-spline: area-spline:
name: Lorem ipsum name: Lorem ipsum
display: true demo: true
type: area type: area
spline: true spline: true
hide-legend: true hide-legend: true
@@ -170,12 +179,11 @@ area-spline:
area-spline-stacked: area-spline-stacked:
name: Lorem ipsum name: Lorem ipsum
display: true demo: true
type: area type: area
spline: true spline: true
hide-legend: true hide-legend: true
stacked: true stacked: true
# groups: [1, 2]
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
series: series:
- name: Maximum - name: Maximum
@@ -188,7 +196,7 @@ area-spline-stacked:
spline: spline:
name: Wind speed during two days name: Wind speed during two days
display: true demo: true
type: line type: line
spline: true spline: true
show-labels: true show-labels: true
@@ -205,7 +213,7 @@ spline:
spline-rotated: spline-rotated:
name: Lorem ipsum name: Lorem ipsum
display: true demo: true
type: line type: line
spline: true spline: true
rotated: true rotated: true
@@ -222,7 +230,7 @@ spline-rotated:
bar: bar:
name: Lorem ipsum name: Lorem ipsum
display: true demo: true
type: bar type: bar
hide-legend: true hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -236,7 +244,7 @@ bar:
bar-rotated: bar-rotated:
name: Lorem ipsum name: Lorem ipsum
display: true demo: true
type: bar type: bar
rotated: true rotated: true
hide-legend: true hide-legend: true
@@ -252,10 +260,9 @@ bar-rotated:
bar-stacked: bar-stacked:
name: Lorem ipsum name: Lorem ipsum
display: true demo: true
type: bar type: bar
stacked: true stacked: true
# groups: [1, 2]
hide-legend: true hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
series: series:
@@ -269,7 +276,7 @@ bar-stacked:
pie: pie:
name: Lorem ipsum name: Lorem ipsum
display: true demo: true
type: pie type: pie
hide-legend: true hide-legend: true
show-data-labels: true show-data-labels: true
@@ -290,7 +297,7 @@ pie:
donut: donut:
name: Lorem ipsum name: Lorem ipsum
display: true demo: true
type: donut type: donut
sparkline: true sparkline: true
hide-legend: true hide-legend: true
@@ -305,7 +312,7 @@ donut:
scatter: scatter:
name: Lorem ipsum name: Lorem ipsum
display: true demo: true
type: scatter type: scatter
hide-legend: true hide-legend: true
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
@@ -320,7 +327,7 @@ scatter:
combination: combination:
name: Combination chart name: Combination chart
display: true demo: true
type: bar type: bar
types: types:
2: 'line' 2: 'line'
pages/_docs/avatars.md
+51 -32
View File
@@ -14,6 +14,50 @@ Create and group avatars of various shapes and sizes with one component.
{% include ui/avatar.html person-id=3 %} {% include ui/avatar.html person-id=3 %}
{% endexample %} {% endexample %}
### Avatar image
Set an image as the background.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html person-id=1 %}
{% include ui/avatar.html person-id=3 %}
{% include ui/avatar.html person-id=4 %}
{% endexample %}
### Initials
You can easily use initials instead of images.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" %}
{% include ui/avatar.html placeholder="CD" %}
{% include ui/avatar.html placeholder="EF" %}
{% include ui/avatar.html placeholder="GH" %}
{% include ui/avatar.html placeholder="IJ" %}
{% endexample %}
### Avatar icons
You can also use icons in avatars.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html icon="user" %}
{% include ui/avatar.html icon="plus" %}
{% include ui/avatar.html icon="user-plus" %}
{% endexample %}
### Avatar initials color
Customize the color of the avatars' background. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" color="green" %}
{% include ui/avatar.html placeholder="CD" color="red" %}
{% include ui/avatar.html placeholder="EF" color="yellow" %}
{% include ui/avatar.html placeholder="GH" color="blue" %}
{% include ui/avatar.html placeholder="IJ" color="purple" %}
{% endexample %}
### Avatar size ### Avatar size
Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed. Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
@@ -51,43 +95,18 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% include ui/avatar.html person-id=21 shape="rounded-lg" %} {% include ui/avatar.html person-id=21 shape="rounded-lg" %}
{% endexample %} {% endexample %}
### Initials
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" size="xl" %}
{% include ui/avatar.html placeholder="CD" size="lg" %}
{% include ui/avatar.html placeholder="EF" size="md" %}
{% include ui/avatar.html placeholder="GH" %}
{% include ui/avatar.html placeholder="IJ" size="sm" %}
{% endexample %}
### Avatar initials color
[See more]({% docs_url colors %})
{% example html wrapper=avatar-list %}
{% include ui/avatar.html placeholder="AB" color="green" %}
{% include ui/avatar.html placeholder="CD" color="red" %}
{% include ui/avatar.html placeholder="EF" color="yellow" %}
{% include ui/avatar.html placeholder="GH" color="blue" %}
{% include ui/avatar.html placeholder="IJ" color="purple" %}
{% endexample %}
### Avatar initials icons
{% example html wrapper=avatar-list %}
{% include ui/avatar.html icon="user" %}
{% include ui/avatar.html icon="plus" %}
{% include ui/avatar.html icon="user-plus" %}
{% endexample %}
### Avatars list ### Avatars list
You can easily create a list of avatars.
{% example %} {% example %}
{% include ui/avatar-list.html %} {% include ui/avatar-list.html %}
{% endexample %} {% endexample %}
### Stacked list
Make the list stack when it reaches a certain length.
{% example %} {% example %}
<div class="avatar-list avatar-list-stacked"> <div class="avatar-list avatar-list-stacked">
{% for person in site.data.people limit: 5 offset: 30 %} {% for person in site.data.people limit: 5 offset: 30 %}
@@ -95,4 +114,4 @@ Change the shape of an avatar with the default Bootstrap image classes.
{% endfor %} {% endfor %}
<span class="avatar" element="a">+8</span> <span class="avatar" element="a">+8</span>
</div> </div>
{% endexample %} {% endexample %}
pages/_docs/buttons.md
+3 -3
View File
@@ -12,9 +12,9 @@ The `.btn` classes are designed to be used with the `<button>` element. However,
{% example html wrapper=btn-list %} {% example html wrapper=btn-list %}
<a href="#" class="btn btn-primary" role="button">Link</a> <a href="#" class="btn btn-primary" role="button">Link</a>
<button class="btn btn-primary">Button</button> <button class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Input" /> <input type="button" class="btn btn-primary" value="Input"/>
<input type="submit" class="btn btn-primary" value="Submit" /> <input type="submit" class="btn btn-primary" value="Submit"/>
<input type="reset" class="btn btn-primary" value="Reset" /> <input type="reset" class="btn btn-primary" value="Reset"/>
{% endexample %} {% endexample %}
### Button variations ### Button variations
pages/_docs/divider.md
+21 -7
View File
@@ -6,20 +6,34 @@ done: true
### Default markup ### Default markup
{% example html max-width=300 %} {% example html columns=1 %}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequatur maxime quia reprehenderit tempore?
</p>
<div class="hr-text">Left divider</div>
<p> <p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p> </p>
<div class="hr-text hr-text-center">Centered divider</div> {% include ui/hr.html text="Left divider" %}
<p> <p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p> </p>
<div class="hr-text hr-text-right">Right divider</div> {% include ui/hr.html text="Centered divider" position="center" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% include ui/hr.html text="Right divider" position="right" %}
<p> <p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p> </p>
{% endexample %} {% endexample %}
### Divider color
Customize the color of the divider. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html columns=1 %}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
</p>
{% include ui/hr.html text="Green divider" color="green" %}
<p>
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
</p>
{% endexample %}
pages/_docs/flags.md
+4
View File
@@ -15,6 +15,8 @@ done: true
### Flag sizes ### Flag sizes
Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed.
{% example html %} {% example html %}
{% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %} {% include ui/flag.html flag="pl" class="flag-size-xl mr-1" %}
{% include ui/flag.html flag="pl" class="flag-size-lg mr-1" %} {% include ui/flag.html flag="pl" class="flag-size-lg mr-1" %}
@@ -24,6 +26,8 @@ done: true
### Types ### Types
To set the flag of the country you want add a class `flag-(country name)`. For example to create a flag of Andorra your class should look like this: `.flag-ad`.
<table> <table>
{% for flag in site.data.flags %} {% for flag in site.data.flags %}
<tr> <tr>
pages/_docs/progress.md
+1 -1
View File
@@ -34,5 +34,5 @@ To create a default progress bar, add a `.progress` class to a `<div>` element:
You can also use native HTML5 `<progress>` element. You can also use native HTML5 `<progress>` element.
{% example html %} {% example html %}
<progress class="progress progress-sm" value="15" max="100" /> <progress class="progress progress-sm" value="15" max="100"/>
{% endexample %} {% endexample %}
pages/_docs/ribbons.md
+15
View File
@@ -12,24 +12,39 @@ new: true
### Ribbon position ### Ribbon position
You can easily change the position of a ribbon by adding a class to the element.
`ribbon-top` - moves it to the top
`ribbon-right` - moves it to the right
`ribbon-bottom` - moves it to the bottom
`ribbon-left` - moves it to the lefg
You can also use multiple classes at once for example: `.ribbon.ribbon-top.ribbon-left` moves the ribbon to the top left corner.
{% example html columns=1 %} {% example html columns=1 %}
{% include cards/ribbon.html top=true left=true %} {% include cards/ribbon.html top=true left=true %}
{% endexample %} {% endexample %}
### Ribbon color ### Ribbon color
Customize the ribbon's background color. You can click [here]({% docs_url colors %}) to see the list of available colors.
{% example html columns=1 %} {% example html columns=1 %}
{% include cards/ribbon.html color="red" %} {% include cards/ribbon.html color="red" %}
{% endexample %} {% endexample %}
### Ribbon text ### Ribbon text
Set your own text in a ribbon.
{% example html columns=1 %} {% example html columns=1 %}
{% include cards/ribbon.html color="green" text="-50%" %} {% include cards/ribbon.html color="green" text="-50%" %}
{% endexample %} {% endexample %}
### Ribbon style ### Ribbon style
Change the style of a ribbon.
{% example html columns=1 %} {% example html columns=1 %}
{% include cards/ribbon.html bookmark=true color="orange" text="-50%" %} {% include cards/ribbon.html bookmark=true color="orange" text="-50%" %}
{% endexample %} {% endexample %}
pages/_docs/typography.md
+17 -17
View File
@@ -21,23 +21,23 @@ description: Documentation and examples for common text utilities to control ali
### Semantic text elements ### Semantic text elements
{% example %} {% example %}
<abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br /></hide> <abbr title="Internationalization">I18N</abbr><hide> <code class="ml-2">abbr</code><br/></hide>
<strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br /></hide> <strong>Bold</strong><hide> <code class="ml-2">strong</code> <code>b</code><br/></hide>
<cite>Citation</cite><hide> <code class="ml-2">cite</code><br /></hide> <cite>Citation</cite><hide> <code class="ml-2">cite</code><br/></hide>
<code>Hello World!</code><hide> <code class="ml-2">code</code><br /></hide> <code>Hello World!</code><hide> <code class="ml-2">code</code><br/></hide>
<del>Deleted</del><hide> <code class="ml-2">del</code><br /></hide> <del>Deleted</del><hide> <code class="ml-2">del</code><br/></hide>
<em>Emphasis</em><hide> <code class="ml-2">em</code><br /></hide> <em>Emphasis</em><hide> <code class="ml-2">em</code><br/></hide>
<i>Italic</i><hide> <code class="ml-2">i</code><br /></hide> <i>Italic</i><hide> <code class="ml-2">i</code><br/></hide>
<ins>Inserted</ins><hide> <code class="ml-2">ins</code><br /></hide> <ins>Inserted</ins><hide> <code class="ml-2">ins</code><br/></hide>
<kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br /></hide> <kbd>Ctrl + S</kbd><hide> <code class="ml-2">kbd</code><br/></hide>
<mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br /></hide> <mark>Highlighted</mark><hide> <code class="ml-2">mark</code><br/></hide>
<s>Strikethrough</s<hide>> <code class="ml-2">s</code><br /></hide> <s>Strikethrough</s<hide>> <code class="ml-2">s</code><br/></hide>
<samp>Sample</samp><hide> <code class="ml-2">samp</code><br /></hide> <samp>Sample</samp><hide> <code class="ml-2">samp</code><br/></hide>
Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br /></hide> Text <sub>Subscripted</sub><hide> <code class="ml-2">sub</code><br/></hide>
Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br /></hide> Text <sup>Superscripted</sup><hide> <code class="ml-2">sup</code><br/></hide>
<time>20:00</time><hide> <code class="ml-2">time</code><br /></hide> <time>20:00</time><hide> <code class="ml-2">time</code><br/></hide>
<u>Underline</u><hide> <code class="ml-2">u</code><br /></hide> <u>Underline</u><hide> <code class="ml-2">u</code><br/></hide>
<var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br /></hide> <var>x</var> = <var>y</var> + 2<hide> <code class="ml-2">var</code><br/></hide>
{% endexample %} {% endexample %}
### Horizontal rules ### Horizontal rules
pages/_includes/cards/charts/card.html
-10
View File
@@ -1,10 +0,0 @@
{% assign data = site.data.charts[include.chart-id] %}
{% assign height = include.height | default: 10 %}
<div class="card">
<div class="card-body">
{% if include.title %}
<h3 class="card-title">{{ include.title }}</h3>
{% endif %}
{% include ui/chart.html height=height chart-id=include.chart-id %}
</div>
</div>
pages/_includes/cards/charts/total-sales.html
+1 -1
View File
@@ -4,6 +4,6 @@
<h3 class="card-title">Total sales</h3> <h3 class="card-title">Total sales</h3>
{% include ui/chart.html chart-id="total-sales" height=15 %} {% include ui/chart.html chart-id="total-sales" height=15 %}
{% include ui/chart.html chart-id="total-sales2" height=15 %} {% include ui/chart.html chart-id="campaigns" height=15 %}
</div> </div>
</div> </div>
pages/_includes/cards/invoices.html
+1 -1
View File
@@ -3,7 +3,7 @@
<h3 class="card-title">Invoices</h3> <h3 class="card-title">Invoices</h3>
</div> </div>
<div class="table-responsive"> <div class="table-responsive">
<table class="table card-table table-vcenter text-nowrap datatable"> <table class="table card-table table-vcenter text-nowrap datatable overflow-hidden">
<thead> <thead>
<tr> <tr>
<th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th> <th class="w-1p"><input class="form-check-input m-0 align-middle" type="checkbox"></th>
pages/_includes/layout/css.html
+4 -4
View File
@@ -1,13 +1,13 @@
{% if site.data.libs %} {% if site.data.libs %}
<!-- Libs CSS --> <!-- Libs CSS -->
{% for lib in site.data.libs.css %} {% for lib in site.data.libs.css %}
<link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet" /> <link href="{{ site.base }}/{% if jekyll.environment == 'production' %}dist/libs{% else %}node_modules{% endif %}/{% if jekyll.environment == 'production' %}{{ lib | replace: '@', '' }}{% else %}{{ lib }}{% endif %}?{{ site.time | date: '%s' }}" rel="stylesheet"/>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
<!-- Tabler Core --> <!-- Tabler Core -->
<link href="{{ site.base }}/dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" /> <link href="{{ site.base }}/dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
<!-- Tabler Plugins --> <!-- Tabler Plugins -->
<link href="{{ site.base }}/dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" /> <link href="{{ site.base }}/dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
<link href="{{ site.base }}/dist/css/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" /> <link href="{{ site.base }}/dist/css/tabler-charts{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
pages/_includes/layout/homepage.html
+2 -2
View File
@@ -43,10 +43,10 @@
<div class="col-lg-6"> <div class="col-lg-6">
<div class="row row-deck"> <div class="row row-deck">
<div class="col-md-12"> <div class="col-md-12">
{% include cards/charts/card.html chart-id="temperature" height=10 %} {% comment %}{% include cards/charts/card.html chart-id="temperature" height=10 %}{% endcomment %}
</div> </div>
<div class="col-md-12"> <div class="col-md-12">
{% include cards/charts/card.html chart-id="donut" height=10 %} {% comment %}{% include cards/charts/card.html chart-id="donut" height=10 %}{% endcomment %}
</div> </div>
</div> </div>
</div> </div>
pages/_includes/layout/page-title.html
+1 -1
View File
@@ -26,7 +26,7 @@
<div class="col-auto ml-auto"> <div class="col-auto ml-auto">
{% if page.page-title-actions == 'users' %} {% if page.page-title-actions == 'users' %}
<div class="d-flex"> <div class="d-flex">
<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;" /> <input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user&hellip;"/>
{% include_cached ui/button.html text="New user" color="primary" icon="plus" %} {% include_cached ui/button.html text="New user" color="primary" icon="plus" %}
</div> </div>
{% elsif page.page-title-actions == 'calendar' %} {% elsif page.page-title-actions == 'calendar' %}
pages/_includes/parts/form-fieldset.html
+4 -4
View File
@@ -1,18 +1,18 @@
<fieldset class="form-fieldset"> <fieldset class="form-fieldset">
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Full name<span class="form-required">*</span></label> <label class="form-label">Full name<span class="form-required">*</span></label>
<input type="text" class="form-control" autocomplete="off" /> <input type="text" class="form-control" autocomplete="off"/>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Company<span class="form-required">*</span></label> <label class="form-label">Company<span class="form-required">*</span></label>
<input type="text" class="form-control" autocomplete="off" /> <input type="text" class="form-control" autocomplete="off"/>
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Email<span class="form-required">*</span></label> <label class="form-label">Email<span class="form-required">*</span></label>
<input type="email" class="form-control" autocomplete="off" /> <input type="email" class="form-control" autocomplete="off"/>
</div> </div>
<div class=""> <div class="">
<label class="form-label">Phone number</label> <label class="form-label">Phone number</label>
<input type="tel" class="form-control" autocomplete="off" /> <input type="tel" class="form-control" autocomplete="off"/>
</div> </div>
</fieldset> </fieldset>
pages/_includes/parts/input-datalist.html
+2 -2
View File
@@ -1,8 +1,8 @@
<div class="mb-3"> <div class="mb-3">
<label class="form-label">Datalist example</label> <label class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" placeholder="Type to search..." /> <input class="form-control" list="datalistOptions" placeholder="Type to search..."/>
<datalist id="datalistOptions"> <datalist id="datalistOptions">
{% for country in site.data.countries limit: 10 %} {% for country in site.data.countries limit: 10 %}
<option value="{{ country | escape }}" />{% endfor %} <option value="{{ country | escape }}"/>{% endfor %}
</datalist> </datalist>
</div> </div>
pages/_includes/parts/input-image.html
+1 -1
View File
@@ -5,7 +5,7 @@
{% for photo in site.data.photos limit: limit offset: 30 %} {% for photo in site.data.photos limit: limit offset: 30 %}
<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}"> <div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
<label class="imagecheck mb-2"> <label class="imagecheck mb-2">
<input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %} /> <input name="imagecheck" type="checkbox" value="{{ forloop.index }}" class="imagecheck-input" {% if forloop.index == 2 or forloop.index == 4 or forloop.index == 7 %} checked{% endif %}/>
<span class="imagecheck-figure"> <span class="imagecheck-figure">
<img src="{{ site.base }}/img/photos/{{ photo.file }}" alt="" class="imagecheck-image"> <img src="{{ site.base }}/img/photos/{{ photo.file }}" alt="" class="imagecheck-image">
</span> </span>
pages/_includes/ui/chart.html
+106 -107
View File
@@ -13,130 +13,129 @@
{% capture script %} {% capture script %}
<script> <script>
document.addEventListener("DOMContentLoaded", function(event) { document.addEventListener("DOMContentLoaded", function(event) {
{% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %} {% if jekyll.environment == 'development' %}window.tabler_chart = window.tabler_chart || {};{% endif %}
window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), { window.ApexCharts && ({% if jekyll.environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
chart: { chart: {
type: '{{ data.type }}', type: '{{ data.type }}',
height: {{ height | times: 16 }}, height: {{ height | times: 16 }},
{% if data.sparkline %} {% if data.sparkline %}
sparkline: { sparkline: {
enabled: true enabled: true
}, },
{% endif %} {% endif %}
{% if data.stacked %} {% if data.stacked %}
stacked: true, stacked: true,
{% endif %} {% endif %}
}, },
{% if data.type == 'area' %} {% if data.type == 'area' %}
fill: { fill: {
opacity: .16 opacity: .16
}, },
{% endif %} {% endif %}
{% if data.title %} {% if data.title %}
title: { title: {
text: '{{ data.title | escape }}' text: '{{ data.title | escape }}'
}, },
{% endif %} {% endif %}
{% if data.dashed-history or data.stroke-curve %} {% if data.dashed-history or data.stroke-curve %}
stroke: { stroke: {
{% if data.dashed-history %} {% if data.dashed-history %}
width: [2, 1], width: [2, 1],
dashArray: [0, 3], dashArray: [0, 3],
{% endif %} {% endif %}
{% if data.stroke-curve %} {% if data.stroke-curve %}
curve: '{{ data.stroke-curve }}', curve: '{{ data.stroke-curve }}',
{% endif %} {% endif %}
}, },
{% endif %} {% endif %}
{% if data.series %} {% if data.series %}
{% if data.type == 'pie' or data.type == 'donut' %} {% if data.type == 'pie' or data.type == 'donut' or data.type == 'radialBar' %}
series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}], series: [{% for serie in data.series %}{{ serie.data }}{% unless forloop.last %}, {% endunless %}{% endfor %}],
labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %},{% endunless %}{% endfor %}],
labels: [{% for serie in data.series %}"{{ serie.name }}"{% unless forloop.last %},{% endunless %}{% endfor %}], {% else %}
series: [{% for serie in data.series %}{
name: '{{ serie.name }}',
data: [{{ serie.data | join: ', '}}]
}{% unless forloop.last %},{% endunless %}{% endfor %}],
{% endif %}
{% endif %}
{% else %} {% if data.show-grid %}
series: [{% for serie in data.series %}{ grid: {
name: '{{ serie.name }}', show: true,
data: [{{ serie.data | join: ', '}}] },
}{% unless forloop.last %},{% endunless %}{% endfor %}], {% endif %}
{% endif %}
{% endif %}
{% if data.show-grid %} {% if data.show-data-labels %}
grid: { dataLabels: {
show: true, enabled: true,
}, },
{% endif %} {% endif %}
{% if data.show-data-labels %} {% if data.categories or data.days-labels-count %}
dataLabels: { xaxis: {
enabled: true, {% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %}
}, {% if data.days-labels-count %}type: 'datetime',{% endif %}
{% endif %} },
{% endif %}
{% if data.categories or data.days-labels-count %} {% if data.auto-min %}
xaxis: { yaxis: {
{% if data.categories %}categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],{% endif %} min: function(min) { return min },
{% if data.days-labels-count %}type: 'datetime',{% endif %} },
}, {% endif %}
{% endif %}
{% if data.auto-min %} {% if data.days-labels-count %}
yaxis: { labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`),
min: function(min) { return min }, {% endif %}
},
{% endif %}
{% if data.days-labels-count %} {% if data.rotated %}
labels: [...Array({{ data.days-labels-count }}).keys()].map(n => `2019-09-${n+1}`), plotOptions: {
{% endif %} bar: {
horizontal: true,
}
},
{% endif %}
{% if data.rotated %} {% if data.series %}
plotOptions: { colors: [
bar: { {% for serie in data.series %}
horizontal: true, {{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %}
} ],
}, {% endif %}
{% endif %}
{% if data.series %} {% if data.hide-legend %}
colors: [ //chart colors legend: {
{% for serie in data.series %} show: false, //hide legend
{{ serie.color | default: 'blue' | tabler_js_color }}{% unless forloop.last %},{% endunless %}{% endfor %} },
], {% endif %}
{% endif %}
{% if data.hide-legend %} {% if data.hide-tooltip %}
legend: { tooltip: {
show: false, //hide legend enabled: false
}, },
{% endif %} {% endif %}
{% if data.hide-tooltip %} {% if data.hide-points %}
tooltip: { point: {
enabled: false show: false
}, },
{% endif %} {% endif %}
{% if data.hide-points %} {% if data.show-markers %}
point: { markers: {
show: false size: 2
}, },
{% endif %} {% endif %}
})).render();
{% if data.show-markers %} });
markers: {
size: 2
},
{% endif %}
})).render();
});
</script> </script>
{% endcapture %} {% endcapture %}
pages/_includes/ui/hr.html
+1
View File
@@ -0,0 +1 @@
<div class="hr-text{% if include.position %} hr-text-{{ include.position | downcase }}{% endif %}{% if include.color %} text-{{ include.color }}{% endif %}">{{ include.text | default: 'Label' }}</div>
pages/_includes/ui/input-mask.html
+1 -1
View File
@@ -1 +1 @@
<input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off" /> <input type="text" name="input-{{ include.name | default: 'mask' }}" class="form-control" data-mask="{{ include.mask | default: '00/00/0000' }}"{% if include.visible %} data-mask-visible="true"{% endif %}{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} autocomplete="off"/>
pages/_layouts/base.html
+1 -1
View File
@@ -1,6 +1,6 @@
<!doctype html> <!doctype html>
{% include_cached layout/banner.html %} {% include_cached layout/banner.html %}
<html lang="en" {% if page.rtl %} dir="rtl" {% endif %}> <html lang="en"{% if page.rtl %} dir="rtl" {% endif %}>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
pages/charts.html
+13 -4
View File
@@ -1,16 +1,25 @@
--- ---
title: Charts title: Charts
page-title: Charts
menu: charts menu: charts
--- ---
<div class="row"> <div class="row">
{% for chart in site.data.charts %} {% for chart in site.data.charts %}
{% if chart[1].display %} {% if chart[1].demo %}
{% assign chart-name = chart[0] %} {% assign chart-id = chart[0] %}
<div class="col-lg-6 col-xl-4"> <div class="col-lg-6 col-xl-4">
{% include cards/charts/card.html chart-id=chart-name %} <div class="card">
{% if chart[1].name %}
<div class="card-header">
<h3 class="card-title">{{ chart[1].name }}</h3>
</div>
{% endif %}
<div class="card-body">
{% include ui/chart.html chart-id=chart-id height=15 %}
</div>
</div>
</div> </div>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>
pages/tmp.html
+8 -3
View File
@@ -2,12 +2,17 @@
--- ---
<div class="row"> <div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
{% include ui/chart.html chart-id="tasks-overview" height=20 %}
</div>
</div>
</div>
<div class="col-4"> <div class="col-4">
{% include cards/charts/total-sales.html %} {% include cards/charts/total-sales.html %}
</div> </div>
<div class="col-8"> <div class="col-8"></div>
</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">