Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-10 13:22:22 +04:00
Code Issues Projects Releases Wiki Activity

Monorepo structure, remove Gulp, new build process (#2116)

Browse Source
This commit is contained in:
Paweł Kuna
2025-02-01 21:05:00 +01:00
committed by GitHub
parent ce98145fb2
commit eaa7f81604
2071 changed files with 1543 additions and 5560 deletions
Download Patch File Download Diff File Expand all files Collapse all files
preview/pages/_includes/ui/alert.html
+57
View File
@@ -0,0 +1,57 @@
{% assign icon = include.icon %}
{% unless icon %}
{% if include.type == 'success' %}
{% assign icon = 'check' %}
{% assign title = 'Wow! Everything worked!' %}
{% assign description = 'Your account has been saved!' %}
{% elsif include.type == 'warning' %}
{% assign icon = 'alert-triangle' %}
{% assign title = 'Uh oh, something went wrong' %}
{% assign description = 'Sorry! There was a problem with your request.' %}
{% elsif include.type == 'danger' %}
{% assign icon = 'alert-circle' %}
{% assign title = "I'm so sorry…" %}
{% assign description = 'Something went wrong. Please try again.' %}
{% elsif include.type == 'info' %}
{% assign icon = 'info-circle' %}
{% assign title = 'Did you know?' %}
{% assign description = 'Here is something that you might like to know.' %}
{% endif %}
{% endunless %}
<div class="alert{% if include.important %} alert-important{% endif %} alert-{{ include.type | default: 'primary'}}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
{% if include.show-icon or include.person-id %}
<div class="d-flex">
<div>
{% if include.person-id %}{% include "ui/avatar.html" person-id=include.person-id class="float-start me-3" %}{% endif %}
{% if include.show-icon %}
{% include "ui/icon.html" icon=icon class="alert-icon" %}
{% endif %}
</div>
<div>
{% endif %}
{% if include.show-description or include.description %}
<h4 class="alert-title">{{ include.text | default: "This is a custom alert box!" }}</h4>
<div class="text-secondary">{{ include.description | default: description }}</div>
{% else %}
{{ include.title | default: title }}
{% endif %}
{% if include.buttons %}
<div class="btn-list">
<a href="#" class="btn btn-{{ include.type | default: 'primary'}}">Okay</a>
<a href="#" class="btn">Cancel</a>
</div>
{% endif %}
{% if include.show-icon or include.person-id %}
</div>
</div>
{% endif %}
{% if include.show-close %}<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>{% endif %}
</div>
preview/pages/_includes/ui/avatar-list.html
+11
View File
@@ -0,0 +1,11 @@
{% assign limit = include.limit | default: 5 %}
{% assign offset = include.offset | default: 0 %}
{% assign size = include['size'] | default: 'sm' %}
<div class="avatar-list{% if include.stacked %} avatar-list-stacked{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% for person in people limit: limit offset: offset %}
{% include "ui/avatar.html" person=person size=size rounded=true %}
{% endfor %}
{% if include.text %}
{% include "ui/avatar.html" placeholder=include.text size=size rounded=true %}
{% endif %}
</div>
preview/pages/_includes/ui/avatar-upload.html
+4
View File
@@ -0,0 +1,4 @@
<a href="#" class="avatar avatar-upload{% if include.class %} {{ include.class }}{% endif %}">
{% include "ui/icon.html" icon="plus" %}
<span class="avatar-upload-text">{{ include.text | default: "Add" }}</span>
</a>
preview/pages/_includes/ui/avatar.html
+24
View File
@@ -0,0 +1,24 @@
{% assign src = include.src %}
{% assign placeholder = include.placeholder %}
{% if include.person-id %}
{% assign person-id = include.person-id | minus: 1 %}
{% assign person = people[person-id] %}
{% assign src = person.photo %}
{% unless src %}
{% assign placeholder = person.full_name | first_letters %}
{% endunless %}
{% elsif include.person %}
{% assign person = include.person %}
{% assign src = person.photo %}
{% unless src %}
{% assign placeholder = person.full_name | first_letters %}
{% endunless %}
{% endif %}
{% assign link = include.link | default: false %}
{% if include.dropdown %}
{% assign link = true %}
{% endif %}
{% assign el = 'span' %}
{% if link %}{% assign el = 'a' %}{% endif %}
<{{ el }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}{% if include.rounded %} rounded{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>{% if include.status %}
<span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include "ui/icon.html" icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}{% include "ui/icon.html" icon=include.icon class="avatar-icon" %}{% endif %}</{{ el }}>
preview/pages/_includes/ui/badge.html
+18
View File
@@ -0,0 +1,18 @@
{% assign el = 'span' %}
<{{ el }} class="badge{% if include['size'] %} badge-{{ include['size'] }}{% endif %}{% if include.color %} bg-{{ include.color }} text-{{ include.color }}-fg{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% if include.person-id %}
{% assign person-id = include.person-id | minus: 1 %}
{% assign person = people[person-id] %}
{% assign src = person.photo %}
{% unless src %}
{% assign placeholder = person.full_name | first_letters %}
{% endunless %}
<{{ el }} class="avatar" style="background-image: url({{ page | relative }}/{{ src }})">{% unless src %}{{ person.full_name | first_letters }}{% endunless %}</{{ el }}>
{% endif %}
{% if include.text %}
{{ include.text }}
{% else %}
{{ person.full_name }}
{% endif %}
{% if include.addon %}<{{ el }} class="badge-addon {% if include.addon-color%}bg-{{ include.addon-color }}{% endif %}">{{ include.addon }}</{{ el }}>{% endif %}
</{{ el }}>
preview/pages/_includes/ui/breadcrumb.html
+10
View File
@@ -0,0 +1,10 @@
{% assign pages = include.pages | default: "Home,Library,Data" | split: "," %}
<ol class="breadcrumb{% if include.class %} {{ include.class }}{% endif %}" aria-label="breadcrumbs">
{% for page in pages %}
{% if forloop.last %}
<li class="breadcrumb-item active" aria-current="page"><a href="#">{{ page }}</a></li>
{% else %}
<li class="breadcrumb-item"><a href="#">{{ page }}</a></li>
{% endif %}
{% endfor %}
</ol>
preview/pages/_includes/ui/button-group.html
+44
View File
@@ -0,0 +1,44 @@
{% assign button-items = include.items | split: ',' %}
{% assign button-icons = include.icons | split: ',' %}
{% assign id = include.id %}
<div class="btn-group{% if include.vertical %}-vertical{% endif %}{% if include.fluid %} w-100{% endif %}"role="group">
{% for item in button-items %}
{% if include.radio %}
<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-{{ forloop.index }}" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
{% endif %}
<{% if include.radio %}label for="btn-radio-{{ id }}-{{ forloop.index }}"{% else %}button{% endif %} type="button" class="btn{% if forloop.index == 1 %}{% unless include.radio %} active{% endunless %}{% endif %}">{{ item }}</{% if include.radio %}label{% else %}button{% endif %}>
{% endfor %}
{% for icon in button-icons %}
{% if include.radio %}
<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-{{ forloop.index }}" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
{% endif %}
<{% if include.radio %}label for="btn-radio-{{ id }}-{{ forloop.index }}"{% else %}button{% endif %} class="btn btn-icon{% if forloop.index == 1 %}{% unless include.radio %} active{% endunless %}{% endif %}">{% include "ui/icon.html" icon=icon %}</{% if include.radio %}label{% else %}button{% endif %}>
{% endfor %}
{% if include.dropdown %}
<div class="btn-group" role="group">
{% if include.radio %}
<input type="radio" class="btn-check" name="btn-radio-{{ id }}" id="btn-radio-{{ id }}-dropdown" autocomplete="off"{% if forloop.index == 1 %} checked{% endif %}>
{% endif %}
<{% if include.radio %}label for="btn-radio-{{ id }}-dropdown"{% else %}button{% endif %} class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Other
</{% if include.radio %}label{% else %}button{% endif %}>
{% include "ui/dropdown-menu.html" %}
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
Option 4
</a>
<a class="dropdown-item" href="#">
Option 5
</a>
<a class="dropdown-item" href="#">
Option 6dropdown-menu
</a>
</div>
</div>
{% endif %}
</div>
preview/pages/_includes/ui/button.html
+29
View File
@@ -0,0 +1,29 @@
{% assign spinner-class = false %}
{% assign color = include.color %}
{% if include.color == false %}
{% assign color = null %}
{% endif %}
{% assign provider = include.provider | default: 'fe' %}
{% if include.text %}{% assign spinner-class="me-2" %}{% endif %}
{% assign href = '#' %}
{% if include.href %}
{% if include.external %}
{% assign href = include.href %}
{% else %}
{% assign href = site.base | append: '/' | append: include.href %}
{% endif %}
{% endif %}
{% assign e = include.element | default: 'a' %}
<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} w-100{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-bs-toggle="modal" data-bs-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.toast-id %} data-bs-toggle="toast" data-bs-target="#toast-{{ include.toast-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-bs-dismiss="modal"{% endif %}>
{% if include.spinner %}
{% include "ui/spinner.html" color=false size="sm" class=spinner-class element="span" %}{% endif %}
{% if include.icon %}{% include "ui/icon.html" icon=include.icon color=include.icon-color %}{% endif %}
{% unless include.icon-only %}
{{ include.text | default: "Button" }}{% if include.dots %}<span class="animated-dots"></span>{% endif %}
{% if include.icon-right %}{% include "ui/icon.html" icon=include.icon-right class="icon-right" %}{% endif %}
{% endunless %}
</{{ e }}>
preview/pages/_includes/ui/card-dropdown.html
+12
View File
@@ -0,0 +1,12 @@
{% assign icon = include.icon | default: 'dots-vertical' %}
<div class="dropdown{% if include.class %} {{ include.class }}{% endif %}">
<a href="#" class="btn-action" data-bs-toggle="dropdown" aria-expanded="false">
{% include "ui/icon.html" icon=icon %}
</a>
<div class="dropdown-menu dropdown-menu-end">
<a href="#" class="dropdown-item">Import</a>
<a href="#" class="dropdown-item">Export</a>
<a href="#" class="dropdown-item">Download</a>
<a href="#" class="dropdown-item text-danger">Delete</a>
</div>
</div>
preview/pages/_includes/ui/carousel.html
+40
View File
@@ -0,0 +1,40 @@
{% assign limit = include.limit | default: 5 %}
{% assign offset = include.offset | default: 0 %}
{% assign filtered-photos = photos | where: "horizontal", true %}
{% assign carousel-id = include.id | default: "carousel" %}
<div id="carousel-{{ carousel-id }}" class="carousel slide{% if include.fade %} carousel-fade{% endif %}" data-bs-ride="carousel">
{% if include.indicators %}
<div class="carousel-indicators{% if include.indicators-vertical %} carousel-indicators-vertical{% endif %}{% if include.indicators-dot %} carousel-indicators-dot{% elsif include.indicators-thumb %} carousel-indicators-thumb{% endif %}">
{% for photo in filtered-photos limit: limit offset: offset %}
<button type="button" data-bs-target="#carousel-{{ carousel-id }}" data-bs-slide-to="{{ forloop.index | minus: 1 }}" class="{%if include.indicators-thumb-ratio %} ratio ratio-4x3{% endif %}{% if forloop.first %} active{% endif %}"{% if include.indicators-thumb %} style="background-image: url({{ page | relative }}/static/photos/{{ photo.file }})"{% endif %}></button>
{% endfor %}
</div>
{% endif %}
<div class="carousel-inner">
{% for photo in filtered-photos limit: limit offset: offset %}
<div class="carousel-item{% if forloop.first %} active{% endif %}">
<img class="d-block w-100" alt="" src="{{ page | relative }}/static/photos/{{ photo.file }}">
{% if include.captions %}
<div class="carousel-caption-background d-none d-md-block"></div>
<div class="carousel-caption d-none d-md-block">
<h3>Slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
{% endif %}
</div>
{% endfor %}
</div>
{% if include.controls %}
<a class="carousel-control-prev" href="#carousel-{{ carousel-id }}" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-{{ carousel-id }}" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
{% endif %}
</div>
preview/pages/_includes/ui/chart-heatmap.html
+94
View File
@@ -0,0 +1,94 @@
{% assign id = include.chart-id %}
{% assign class = include.class %}
{% assign height = include.height | default: data.height | default: 25 %}
{% assign class = include.class %}
<div id="chart-{{ id }}"{% if class %} class="{{ class }}"{% endif %}></div>
{% capture script %}
{% assign colors = include.colors | default: 1 %}
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
window.tabler_chart = window.tabler_chart || {};
{% endif %}
window.ApexCharts && ({% if environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
chart: {
height: {{ height | times: 16 }},
type: "heatmap",
toolbar: {
show: false,
},
},
dataLabels: {
enabled: {% if include.labels %}true{% else %}false{% endif %}
},
{% if include.scale %}
plotOptions: {
heatmap: {
enableShades: {% unless include.no-shades %}true{% else %}false{% endunless %},
colorScale: {
ranges: [{
from: 0,
to: 20,
name: "Low",
color: tabler.getColor("green")
}, {
from: 21,
to: 50,
name: "Medium",
color: tabler.getColor("blue")
}, {
from: 51,
to: 75,
name: "High",
color: tabler.getColor("yellow")
}, {
from: 76,
to: 100,
name: "Extreme",
color: tabler.getColor("red")
}]
}
}
},
{% else %}
colors: [{% if include.color %}'{{ include.color }}'{% else %}{% for color in site.colors limit: colors %}tabler.getColor("{{ color[0] }}"), {% endfor %}{% endif %}],
{% endif %}
series: [
{% for i in site.monthsShort limit: 12 %}
{% assign month-i = forloop.index %}
{ name: "{{ i }}", data: [{% for j in (1..16) %}{x: '{{ j }}', y: {{ j | random_number: 0, 100 | plus: month-i | random_number: 0, 100 }}},{% endfor %}] },
{% endfor %}
],
xaxis: {
type: "category"
},
legend: {
{% if include.legend %}
show: true,
position: 'bottom',
offsetY: 8,
markers: {
width: 10,
height: 10,
radius: 100,
},
itemMargin: {
horizontal: 8,
},
{% else %}
show: false,
{% endif %}
},
})).render();
});
// @formatter:on
</script>
{% endcapture %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
preview/pages/_includes/ui/chart-sparkline.html
+87
View File
@@ -0,0 +1,87 @@
{% assign type = include.type | default: 'bar' %}
{% assign id = include.id %}
{% assign color = include.color | default: 'blue' %}
{% assign height = include.height | default: 2.5 %}
{% if include.small %}
{% assign height = include.height | default: 1.5 %}
{% endif %}
{% assign data = include.data %}
{% if include.percentage %}
{% assign data = include.percentage %}
{% endif %}
{% if id %}
<div class="chart-sparkline{% if type == 'pie' or type == 'donut' %} chart-sparkline-square{% endif %}{% if include.wide %} chart-sparkline-wide{% endif %}{% if include.small %} chart-sparkline-sm{% endif %}" id="sparkline-{{ id }}"></div>
{% capture_global scripts %}
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
window.tabler_chart = window.tabler_chart || {};
{% endif %}
window.ApexCharts && ({% if environment == 'development' %}window.tabler_chart["sparkline-{{ id }}"] = {% endif %}new ApexCharts(document.getElementById('sparkline-{{ id }}'), {
chart: {
type: "{% if type == 'donut' %}radialBar{% else %}{{ type }}{% endif %}",
fontFamily: 'inherit',
height: {{ height | times: 16 | round }},
{% if type == 'pie' or type == 'donut' %}
width: {{ height | times: 16 | round }},
{% endif %}
animations: {
enabled: false
},
sparkline: {
enabled: true
},
},
tooltip: {
enabled: false,
},
{% if type == 'donut' %}
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: '75%'
},
track: {
margin: 0
},
dataLabels: {
show: false
}
}
},
{% endif %}
{% if type == 'area' %}
fill: {
gradient: {
opacityFrom: [.1, .1]
}
},
{% endif %}
{% if type == 'area' or type == 'line' %}
stroke: {
width: 2,
lineCap: "round",
},
{% endif %}
{% if type == 'donut' %}
colors: [tabler.getColor("{{ color | default: 'primary' }}")],
series: [{{ data }}],
{% else %}
series: [{
color: tabler.getColor("{{ color | default: 'primary' }}"),
data: [{{ data }}]
}],
{% endif %}
})).render();
});
// @formatter:on
</script>
{% endcapture_global %}
{% endif %}
preview/pages/_includes/ui/chart.html
+273
View File
@@ -0,0 +1,273 @@
{% assign data = charts[include.chart-id] %}
{% assign id = include.id | default: include.chart-id %}
{% assign height = include.height | default: data.height | default: 10 %}
{% assign class = include.class %}
{% if include['size'] == 'sm' %}
{% assign class = class | append: ' chart-sm' | strip %}
{% assign height = 2.5 %}
{% elsif include['size'] == 'lg' %}
{% assign class = class | append: ' chart-lg' | strip %}
{% assign height = 15 %}
{% endif %}
{% if data %}
{% if data.extend %}
{% assign data = charts[data.extend] | concat_objects: charts[include.chart-id] %}
{% endif %}
<div id="chart-{{ id }}"{% if class %} class="{{ class }}"{% endif %}></div>
{% capture script %}
{% assign chart-type = data.type | default: 'bar' %}
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
window.tabler_chart = window.tabler_chart || {};
{% endif %}
window.ApexCharts && ({% if environment == 'development' %}window.tabler_chart["chart-{{ include.chart-id }}"] = {% endif %}new ApexCharts(document.getElementById('chart-{{ id }}'), {
chart: {
type: "{{ chart-type }}",
fontFamily: 'inherit',
height: {{ height | times: 16 }},
{% if data.sparkline %}
sparkline: {
enabled: true
},
{% else %}
parentHeightOffset: 0,
toolbar: {
show: false,
},
{% endif %}
{% unless data.animations %}
animations: {
enabled: false
},
{% endunless %}
{% if data.stacked %}
stacked: true,
{% endif %}
},
{% if chart-type == 'bar' %}
plotOptions: {
bar: {
{% if data.horizontal %}
barHeight: '50%',
horizontal: true,
{% else %}
columnWidth: '50%',
{% endif %}
}
},
{% endif %}
{% if chart-type == 'radialBar' %}
plotOptions: {
radialBar: {
dataLabels: {
total: {
show: true,
label: 'Totals',
formatter: function (val) {
return "44%";
},
},
},
},
},
{% endif %}
{% if chart-type == 'bar' or chart-type == 'area' %}
dataLabels: {
enabled: {% if data.datalabels %}true{% else %}false{% endif %},
},
{% endif %}
fill: {
opacity: {% if chart-type == 'area' %}.16{% else %}1{% endif %},
{% if chart-type == 'area' %}type: 'solid'{% endif %}
},
{% if data.title %}
title: {
text: "{{ data.title | escape }}",
margin: 0,
floating: true,
offsetX: 10,
style: {
fontSize: '18px',
},
},
{% endif %}
{% if chart-type == 'area' or chart-type == 'line' %}
stroke: {
width: {% if data.stroke-width %}[{{ data.stroke-width | join: ', '}}]{% else %}2{% endif %},
{% if data.stroke-dash %}dashArray: [{{ data.stroke-dash | join: ', '}}],{% endif %}
lineCap: "round",
curve: "{{ data.stroke-curve | default: 'smooth' }}",
},
{% endif %}
{% if data.series %}
{% if chart-type == 'pie' or chart-type == 'donut' or chart-type == 'radialBar' %}
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 %}],
{% else %}series: [{% for serie in data.series %}{
name: "{{ serie.name }}",
data: [{{ serie.data | join: ', ' }}]
}{% unless forloop.last %},{% endunless %}{% endfor %}],
{% endif %}
{% endif %}
tooltip: {
theme: 'dark'
},
grid: {
{% unless data.sparkline %}
padding: {
top: -20,
right: 0,
left: -4,
bottom: -4
},
{% endunless %}
{% if data.hide-grid %}
show: false,
{% else %}
strokeDashArray: 4,
{% if data.show-x %}
xaxis: {
lines: {
show: true
}
},
{% endif %}
{% endif %}
},
{% if data.show-data-labels %}
dataLabels: {
enabled: true,
},
{% endif %}
{% if data.categories or data.datetime %}
xaxis: {
labels: {
padding: 0,
{% if data.x-formatter %}
formatter: function(val) {
return {{ data.x-formatter }}
},
{% endif %}
},
tooltip: {
enabled: false
},
{% if chart-type == 'area' or chart-type == 'bar' %}
axisBorder: {
show: false,
},
{% endif %}
{% if data.categories %}
categories: [{% for category in data.categories %}'{{ category }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
{% endif %}
{% if data.datetime %}
type: 'datetime',
{% endif %}
},
{% endif %}
{% unless chart-type == 'pie' or chart-type == 'donut' or chart-type == 'radialBar' %}
yaxis: {
labels: {
padding: 4
},
{% if data.y-max %}
max: {{ data.y-max }},
{% endif %}
{% if data.y-title %}
title: {
text: '{{ data.y-title | escape }}'
}
{% endif %}
},
{% endunless %}
{% if data.datetime %}
{% assign date = data.start-date | default: '2020-06-20' | date: "%s" %}
{% assign days-count = data.series[0].data.size %}
labels: [
{% for i in (1..days-count) %}{% assign date = date | plus: 86400 %}'{{ date | timestamp_to_date }}'{% unless forloop.last %}, {% endunless %}{% endfor %}
],
{% endif %}
{% if data.series %}
colors: [{% for serie in data.series %}{% assign color = serie.color | default: data.color | default: 'primary' %}tabler.getColor("{{ color }}"{% if serie.color-opacity %}, {{ serie.color-opacity }}{% endif %}){% unless forloop.last %}, {% endunless %}{% endfor %}],
{% endif %}
legend: {
{% if data.legend %}
show: true,
position: 'bottom',
offsetY: 12,
markers: {
width: 10,
height: 10,
radius: 100,
},
itemMargin: {
horizontal: 8,
vertical: 8
},
{% else %}
show: false,
{% endif %}
},
{% if data.hide-tooltip or chart-type == 'pie' or chart-type == 'donut' %}
tooltip: {
{% if data.hide-tooltip %}
enabled: false,
{% endif %}
{% if chart-type == 'pie' or chart-type == 'donut' %}
fillSeriesColor: false
{% endif %}
},
{% endif %}
{% if data.hide-points %}
point: {
show: false
},
{% endif %}
{% if data.show-markers %}
markers: {
size: 2
},
{% endif %}
})).render();
});
// @formatter:on
</script>
{% endcapture %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}
preview/pages/_includes/ui/chat.html
+40
View File
@@ -0,0 +1,40 @@
<div class="chat">
<div class="chat-bubbles">
{% for message in chats %}
{% assign person = people[message.person-id] %}
{% capture chat-avatar %}
<div class="col-auto">{% include "ui/avatar.html" person=person %}</div>
{% endcapture %}
{% capture chat-message %}
<div class="{% if message.loading %}col-auto{% else %}col{% if include.wide %} col-lg-6{% endif %}{% endif %}">
<div class="chat-bubble{% if message.person-id == 0 %} chat-bubble-me{% endif %}">
{% unless message.loading %}
<div class="chat-bubble-title">
<div class="row">
<div class="col chat-bubble-author">{{ person.full_name }}</div>
<div class="col-auto chat-bubble-date">{{ message.timestamp }}</div>
</div>
</div>
{% endunless %}
<div class="chat-bubble-body">
{% if message.loading %}
<p class="text-secondary text-italic">typing<span class="animated-dots"></span></p>
{% else %}
<p>{{ message.message }}</p>
{% endif %}
{% if message.gif %}
<div class="mt-2">
<img src="{{ message.gif }}" alt="" class="rounded img-fluid" />
</div>
{% endif %}
</div>
</div>
</div>
{% endcapture %}
<div class="chat-item">
<div class="row align-items-end{% if message.person-id == 0 %} justify-content-end{% endif %}">{% if message.person-id == 0 %} {{ chat-message }} {{ chat-avatar }} {% else %} {{ chat-avatar }} {{ chat-message }} {% endif %}</div>
</div>
{% endfor %}
</div>
</div>
preview/pages/_includes/ui/colorpicker.html
+39
View File
@@ -0,0 +1,39 @@
{% assign id = include.id | default: 'default' %}
{% assign alpha = include.alpha | default: false %}
{% assign format = include.format | default: false %}
<input type="text" class="form-control d-block{% if include.class %} {{ include.class }}{% endif %}" id="colorpicker-{{ id }}" value="{{ include.value }}" />
{% capture_global scripts %}
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
window.tabler_colorpicker = window.tabler_colorpicker || {};
{% endif %}
window.Coloris && ({% if environment == 'development' %}window.tabler_colorpicker["colorpicker-{{ id }}"] = {% endif %}Coloris({
el: "#colorpicker-{{ id }}",
selectInput: false,
alpha: {% if alpha %}true{% else %}false{% endif %},
{% if format %}format: "{{ format }}",{% endif %}
{% if include['swatches-only'] %}swatchesOnly: true,{% endif %}
swatches: [
"#066fd1",
"#45aaf2",
"#6574cd",
"#a55eea",
"#f66d9b",
"#fa4654",
"#fd9644",
"#f1c40f",
"#7bd235",
"#5eba00",
"#2bcbba",
"#17a2b8",
],
}))
})
// @formatter:on
</script>
{% endcapture_global %}
preview/pages/_includes/ui/datepicker.html
+57
View File
@@ -0,0 +1,57 @@
{% assign value = include.value | default: '2020-06-20' %}
{% assign placeholder = include.placeholder | default: 'Select a date' %}
{% if include.id %}
{% capture input %}
<input class="form-control{% if include.class %} {{ include.class }}{% endif %}"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %} id="datepicker-{{ include.id }}" value="{{ value }}"/>
{% endcapture %}
{% if include.inline %}
<div class="datepicker-inline" id="datepicker-{{ include.id }}"></div>
{% elsif include.layout == 'icon' %}
<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
{{ input | replace: include.class, '' }}
<span class="input-icon-addon">{% include "ui/icon.html" icon="calendar" %}</span>
</div>
{% elsif include.layout == 'icon-prepend' %}
<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
<span class="input-icon-addon">{% include "ui/icon.html" icon="calendar" %}</span>
{{ input | replace: include.class, '' }}
</div>
{% else %}
{{ input }}
{% endif %}
{% capture script %}
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
window.tabler_datepicker = window.tabler_datepicker || {};
{% endif %}
window.Litepicker && ({% if environment == 'development' %}window.tabler_datepicker["datepicker-{{ include.id }}"] = {% endif %}new Litepicker({
element: document.getElementById('datepicker-{{ include.id }}'),
buttonText: {
previousMonth: `{% capture icon %}{% include "ui/icon.html" icon="chevron-left" %}{% endcapture %}{{ icon | strip }}`,
nextMonth: `{% capture icon %}{% include "ui/icon.html" icon="chevron-right" %}{% endcapture %}{{ icon | strip }}`,
},
{% if include.inline %}inlineMode: true,{% endif %}
}));
});
// @formatter:on
</script>
{% endcapture %}
{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}
{% endif %}
preview/pages/_includes/ui/dropdown-menu-all.html
+35
View File
@@ -0,0 +1,35 @@
<div class="dropdown-menu{% if include.show %} dropdown-menu-demo{% endif %}">
<h6 class="dropdown-header">Dropdown header</h6>
<a href="#" class="dropdown-item">{% include "ui/icon.html" icon="activity" class="dropdown-item-icon" %} Item 1</a>
<a href="#" class="dropdown-item">{% include "ui/icon.html" icon="edit" class="dropdown-item-icon" %} Item 2</a>
<div class="dropdown-item">
<a href="#" class="text-reset">My profile</a>
<label class="form-check m-0 ms-auto">
<input type="checkbox" class="form-check-input">
Public
</label>
</div>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio"> Radio input</label>
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="checkbox"> Checkbox input</label>
<label class="dropdown-item form-switch"><input class="form-check-input m-0 me-2" type="checkbox"> Checkbox input</label>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Dropdown item 1</a>
<a href="#" class="dropdown-item">Dropdown item 2</a>
<a href="#" class="dropdown-item disabled">Dropdown disabled</a>
<a href="#" class="dropdown-item active">Dropdown active</a>
<div class="dropdown-divider"></div>
{% for person in people limit: 3 %}
<a href="#" class="dropdown-item">{% include "ui/avatar.html" person-id=person.id class="rounded me-2" size="xs" %} {{ person.full_name }}</a>
{% endfor %}
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">{% include "ui/icon.html" icon="logout" class="dropdown-item-icon" %} Logout</a>
</div>
preview/pages/_includes/ui/dropdown-menu.html
+49
View File
@@ -0,0 +1,49 @@
<div class="dropdown-menu{% if include.right %} dropdown-menu-end{% endif %}{% if include.show %} dropdown-menu-demo{% endif %}{% if include.arrow %} dropdown-menu-arrow{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.dark %} data-bs-theme="dark"{% endif %}>
{% if include.menu %}
{% assign menu = include.menu | split: ',' %}
{% for item in menu %}
{% if item == '|' %}
<div class="dropdown-divider"></div>
{% elsif item contains 'h:' %}
<h3 class="dropdown-header">{{ item | replace: 'h:', '' }}</h3>
{% elsif item contains 'a:' %}
<a href="#" class="dropdown-item active">{{ item | replace: 'a:', '' }}</a>
{% elsif item contains 'd:' %}
<a href="#" class="dropdown-item text-danger">{{ item | replace: 'd:', '' }}</a>
{% else %}
<a href="#" class="dropdown-item">{{ item }}</a>
{% endif %}
{% endfor %}
{% elsif include.check or include.radio %}
{% for i in (1..3) %}
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="{% if include.radio %}radio{% else %}checkbox{% endif %}"> Option {{ i }}</label>
{% endfor %}
{% elsif include.people %}
{% for person in people limit: 5 %}
<a href="#" class="dropdown-item">{% include "ui/avatar.html" person-id=person.id class="rounded me-2" size="xs" %} {{ person.full_name }}</a>
{% endfor %}
{% elsif include.type == 'text' %}
{% else %}
{% if include.header %}<span class="dropdown-header">Dropdown header</span>{% endif %}
<a class="dropdown-item" href="#">
{% if include.icons %}{% include "ui/icon.html" icon="settings" class="dropdown-item-icon" %} {% endif %}
Action
{% if include.badge %}<span class="badge bg-primary text-primary-fg ms-auto">12</span>{% endif %}
</a>
<a class="dropdown-item" href="#">
{% if include.icons %}{% include "ui/icon.html" icon="edit" class="dropdown-item-icon" %} {% endif %}Another action
{% if include.badge %}<span class="badge bg-green ms-auto"></span>{% endif %}
</a>
{% if include.active %}<a class="dropdown-item active" href="#">{% if include.icons %}{% include "ui/icon.html" icon="activity" class="dropdown-item-icon" %} {% endif %}Active action</a>{% endif %}
{% if include.disabled %}<a class="dropdown-item disabled" href="#">{% if include.icons %}{% include "ui/icon.html" icon="user-x" class="dropdown-item-icon" %} {% endif %}Disabled action</a>{% endif %}
{% if include.separated %}
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">{% if include.icons %}{% include "ui/icon.html" icon="plus" class="dropdown-icon" class="dropdown-item-icon" %} {% endif %}Separated link</a>
{% endif %}
{% endif %}
</div>
preview/pages/_includes/ui/dropzone.html
+26
View File
@@ -0,0 +1,26 @@
{% assign id = include.id %}
{% assign text = include.text | default: "Text"%}
{% assign description = include.description | default: "Description" %}
<form class="dropzone" id="dropzone-{{ id }}" action="{{ page | relative }}/" autocomplete="off" novalidate>
<div class="fallback">
<input name="file" type="file" {% if include.multiple %} multiple {% endif %} />
</div>
{% if include.custom %}
<div class="dz-message">
<h3 class="dropzone-msg-title">{{text}}</h3>
<span class="dropzone-msg-desc">{{description}}</span>
</div>
{% endif %}
</form>
{% capture_global scripts %}
<script>
// @formatter:off
{% if environment == 'development' %}window.tabler_dropzone = window.tabler_dropzone || {};{% endif %}
document.addEventListener("DOMContentLoaded", function() {
{% if environment == 'development' %}window.tabler_dropzone["dropzone-{{ id }}"] = {% endif %}new Dropzone("#dropzone-{{ id }}")
})
</script>
{% endcapture_global %}
preview/pages/_includes/ui/empty.html
+23
View File
@@ -0,0 +1,23 @@
{% assign icon = include.icon | default: "mood-sad" %}
<div class="empty{% if include.bordered %} empty-bordered{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% if include.illustration %}
{% assign illustration = include.illustration | default: 'boy-girl.svg' %}
<div class="empty-img">{% include "ui/illustration.html" image=illustration height="256" %}</div>
{% elsif include.icon-text %}
<div class="empty-header">{{ include.icon-text }}</div>
{% else %}
<div class="empty-icon">{% include "ui/icon.html" icon=icon %}</div>
{% endif %}
<p class="empty-title">{{ include.title | default: "No results found" }}</p>
<p class="empty-subtitle text-secondary">
{{ include.subtitle | default: "Try adjusting your search or filter to find what you're looking for." }}
</p>
<div class="empty-action">
{% assign button-text = include.button-text | default: "Search again" %}
{% assign button-icon = include.button-icon | default: "search" %}
{% include "ui/button.html" text=button-text color="primary" icon=button-icon href="." %}
</div>
</div>
preview/pages/_includes/ui/flag.html
+1
View File
@@ -0,0 +1 @@
<span class="flag{% if include['size'] %} flag-{{ include.size }}{% endif %} flag-country-{{ include.flag | default: 'pl' | downcase }}{% if include.class %} {{ include.class }}{% endif %}"></span>
preview/pages/_includes/ui/form/check.html
+25
View File
@@ -0,0 +1,25 @@
{% assign type = include.type | default: 'checkbox' %}
{% assign checked = include.checked | default: false %}
{% assign disabled = include.disabled | default: false %}
{% assign switch = include.switch | default: false %}
{% assign title = include.title | default: false %}
{% assign name = include.name | default: false %}
{% assign is_empty = include['empty'] | default: false %}
{% unless title %}
{% assign title = '' %}
{% if disabled %}{% assign title = title | append: ' disabled' %}{% endif %}
{% if checked %}{% assign title = title | append: ' checked' %}{% endif %}
{% if switch %}{% assign title = title | append: ' switch' %}{% endif %}
{% assign title = title | append: ' ' | append: type %}
{% assign title = title | append: ' input' | lstrip | capitalize %}
{% endunless %}
<label class="form-check{% if include.inline %} form-check-inline{% endif %}{% if switch %} form-switch{% if include['size'] %} form-switch-{{ include['size'] }}{% endif %}{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
<input class="form-check-input{% if is_empty %} position-static{% endif %}" type="{{ type }}" {% if name %}
name="{{ name }}" {% endif %}{% if checked %} checked{% endif %}{% if disabled %} disabled{% endif %}>
{% if include.title-on and include.title-off %}
<span class="form-check-label form-check-label-on">{{include.title-on }}</span>
<span class="form-check-label form-check-label-off">{{include.title-off }}</span>
{% else %}
{% unless is_empty %}<span class="form-check-label">{{ title }}</span>{% endunless %}
{% endif %}
</label>
preview/pages/_includes/ui/form/input-file.html
+1
View File
@@ -0,0 +1 @@
<input type="file" class="form-control" />
preview/pages/_includes/ui/form/input-group.html
+43
View File
@@ -0,0 +1,43 @@
<div class="input-group{% if include.flat %} input-group-flat{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% if include.prepend %}
<span class="input-group-text">
{% if include.prepend == "checkbox" or include.prepend == "radio" %}
<input class="form-check-input m-0" type="{{ include.prepend }}" checked>
{% else %}
{{ include.prepend }}
{% endif %}
</span>
{% endif %}
<input type="{{ include.type | default: 'text' }}" class="form-control{% if include.input-class %} {{ include.input-class }}{% endif %}" {% if include.placeholder %} placeholder="{{ include.placeholder }}" {% endif %}{% if include.value %} value="{{ include.value }}"{% endif %} autocomplete="off">
{% if include.append %}
<span class="input-group-text">
{% if include.append == "checkbox" or include.append == "radio" %}
<input class="form-check-input m-0" type="{{ include.append }}" checked>
{% else %}
{{ include.append }}
{% endif %}
</span>
{% endif %}
{% if include.append-link %}
<span class="input-group-text">
<a href="#" class="input-group-link">{{ include.append-link }}</a>
</span>
{% endif %}
{% if include.append-html %}
<span class="input-group-text">
{{ include.append-html }}
</span>
{% endif %}
{% if include.append-button %}
{% assign buttons = include.append-button | split: ',' %}
<span class="input-group-text">
{% for button in buttons %}
{% assign b = button | split: ':' %}
{% assign icon = b[0] %}
{% assign description = b[1] %}
<a href="#" class="link-secondary{% unless forloop.first %} ms-2{% endunless %}{% if forloop.index == 3 %} disabled{% endif %}" title="{{ description }}" data-bs-toggle="tooltip">{% include "ui/icon.html" icon=icon %}</a>
{% endfor %}
</span>
{% endif %}
</div>
preview/pages/_includes/ui/form/input-icon.html
+24
View File
@@ -0,0 +1,24 @@
{% capture addon %}
{% if include.loader %}
<span class="input-icon-addon{% if include.icon-class %} {{ include.icon-class }}{% endif %}">
{% include "ui/spinner.html" class="text-secondary" size="sm" %}
</span>
{% else %}
{% assign icon = include.icon | default: 'search' %}
<span class="input-icon-addon{% if include.icon-class %} {{ include.icon-class }}{% endif %}">
{% include "ui/icon.html" icon=icon %}
</span>
{% endif %}
{% endcapture %}
<div class="input-icon{% if include.class %} {{ include.class }}{% endif %}">
{% if include.prepend %}
{{ addon }}
{% endif %}
<input type="text" value="{{ include.value }}" class="form-control{% if include.light %} form-control-light{% endif %}{% if include.rounded %} form-control-rounded{% endif %}{% if include.input-class %} {{ include.input-class }}{% endif %}" placeholder="{{ include.placeholder | default: 'Search…' }}"{% if include['aria-label'] %} aria-label="{{ include['aria-label'] }}"{% endif %}{% if include.readonly %} readonly{% endif %}>
{% unless include.prepend %}
{{ addon }}
{% endunless %}
</div>
preview/pages/_includes/ui/form/input-mask.html
+1
View File
@@ -0,0 +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 }}"{% else %} placeholder="{{ include.mask }}"{% endif %}{% if include.reverse %} data-mask-reverse="true"{% endif %}autocomplete="off"/>
preview/pages/_includes/ui/form/input-selectgroup.html
+16
View File
@@ -0,0 +1,16 @@
{% assign values = include.values | default: "One,Two,Three" | split: ',' %}
{% assign default = include.default | default: values[0] %}
{% assign type = include.type | default: "checkbox" %}
{% assign name = include.name | default: "name" %}
<div class="form-selectgroup{% if include.class %} {{ include.class }}{% endif %}">
{% for value in values %}
<label class="form-selectgroup-item">
{% assign s = value | split: "i:" %}
{% if include.with-text %}
{% assign icon-class = "me-1" %}
{% endif %}
<input type="{{ type }}" name="{{ name }}" value="{% if s.size == 2 %}{{ s[1] }}{% else %}{{ value }}{% endif %}" class="form-selectgroup-input"{% if value == default %}{% if type == "radio" %} checked{% else %} checked{% endif %}{% endif %}>
<span class="form-selectgroup-label">{% if s.size == 2 %}{% assign icon = s[1] %}{% include "ui/icon.html" icon=icon class=icon-class use-svg=true %}{% if include.with-text %} {{ icon | capitalize }}{% endif %}{% else %}{{ value }}{% endif %}</span>
</label>
{% endfor %}
</div>
preview/pages/_includes/ui/form/textarea-autosize.html
+1
View File
@@ -0,0 +1 @@
<textarea class="form-control{% if include.class %} {{ include.class }}{% endif %}" data-bs-toggle="autosize" placeholder="{{ include.placeholder | default: 'Type something…' }}"{% if include.rows %} rows="{{ include.rows }}"{% endif %}></textarea>
preview/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 %}{% if include.class %} {{ include.class }}{% endif %}">{{ include.text | default: 'Label' }}</div>
preview/pages/_includes/ui/icon.html
+32
View File
@@ -0,0 +1,32 @@
{% assign icon-name = include.icon %}
{% assign icon-type = include.type | default: "outline" %}
{% assign replace-to = "icon" %}
{% if include.class %}
{% assign replace-to = replace-to | append: ' ' | append: include.class %}
{% endif %}
{% if include.color %}
{% assign replace-to = replace-to | append: ' text-' | append: include.color %}
{% endif %}
{% if include.inline %}
{% assign replace-to = replace-to | append: ' icon-inline' %}
{% endif %}
{% if include['size'] %}
{% assign replace-to = replace-to | append: ' icon-' | append: include['size'] %}
{% endif %}
{% assign replace-to = 'class="' | append: replace-to | append: '"' %}
{% if site.useIconfont %}
<i class="icon ti ti-{{ icon-name }}{% if include.color %} {{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></i>
{% else %}
<!-- Download SVG icon from http://tabler.io/icons/icon/{{ icon-name }} -->
{% assign svg-icon = icons[icon-name].svg[icon-type] | default: '' %}
{% assign svg-icon = svg-icon | replace: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '' %}
{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
{% endif %}
preview/pages/_includes/ui/illustration.html
+15
View File
@@ -0,0 +1,15 @@
{% assign image = include.image | replace: '.svg', '' %}
{% assign height = include.height | default: 128 %}
{% assign src = "/free-illustrations/autodark/" | append: image %}
{% assign illustration = free-illustrations.autodark[image] %}
{% assign replace-to = '<svg class="img' %}
{% if include.class %}{% assign replace-to = replace-to | append: ' ' | append: include.class %}{% endif %}
{% assign replace-to = replace-to | append: '" ' %}
{% assign illustration = illustration | replace: '<svg ', replace-to %}
{% assign replace-to-height = 'height="' | append: height | append: '"' %}
{% assign illustration = illustration | replace: 'width="800" height="600"', replace-to-height %}
{{ illustration }}
preview/pages/_includes/ui/inline-player.html
+19
View File
@@ -0,0 +1,19 @@
{% assign id = include.id %}
{% if id and include.embed-id %}
<div id="player-{{ id }}" data-plyr-provider="{{ include.type | default: 'youtube' }}" data-plyr-embed-id="{{ include.embed-id }}"></div>
{% capture_global scripts %}
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
window.tabler_player = window.tabler_player || {};
{% endif %}
window.Plyr && ({% if environment == 'development' %}window.tabler_player["player-{{ id }}"] = {% endif %}new Plyr('#player-{{ id }}'));
});
// @formatter:on
</script>
{% endcapture_global %}
{% endif %}
preview/pages/_includes/ui/map-vector.html
+113
View File
@@ -0,0 +1,113 @@
{% assign id = include.map-id %}
{% assign data = maps-vector[id] %}
{% assign color = include.color | default: data.color | default: 'green' %}
{% if data %}
<div class="ratio ratio-{{ include.ratio | default: '4x3' }}">
<div>
<div id="map-{{ id }}" class="w-100 h-100"></div>
</div>
</div>
{% capture script %}
<script>
// @formatter:on
{% if environment == 'development' %}window.tabler_map_vector = window.tabler_map_vector || {};{% endif %}
document.addEventListener("DOMContentLoaded", function() {
const map = {% if environment == 'development' %}window.tabler_map_vector["map-{{ id }}"] = {% endif %}new jsVectorMap({
selector: '#map-{{ id }}',
map: '{{ data.map }}',
backgroundColor: 'transparent',
regionStyle: {
initial: {
{% unless data.filled %}
fill: tabler.getColor('body-bg'),
stroke: tabler.getColor('border-color'),
strokeWidth: 2,
{% else %}
fill: tabler.getColor('body-bg'),
stroke: '#fff',
strokeWidth: 1,
{% endunless %}
}
},
zoomOnScroll: {% if data.zoom %}true{% else %}false{% endif %},
zoomButtons: {% if data.zoom %}true{% else %}false{% endif %},
{% if data.values %}
// -------- Series --------
visualizeData: {
scale: [tabler.getColor('bg-surface'), tabler.getColor('{{ data.color }}')],
values: {{ data.values }},
},
{% endif %}
{% if data.markers %}
markers: [
{% for marker in data.markers %}
{
coords: [{{ marker.coords }}],
name: "{{ marker.name }}",
},
{% endfor %}
],
markerStyle: {
initial: {
r: 4,
stroke: '#fff',
opacity: 1,
strokeWidth: 3,
stokeOpacity: .5,
fill: tabler.getColor('{{ color }}')
},
hover: {
fill: tabler.getColor('{{ color }}'),
stroke: tabler.getColor('{{ color }}')
}
},
markerLabelStyle: {
initial: {
fontSize: 10
},
},
labels: {
markers: {
render: function(marker) {
return marker.name
},
},
},
{% endif %}
{% if data.lines %}
lines: [
{% for line in data.lines %}
{
from: "{{ line.from }}",
to: "{{ line.to }}"
},
{% endfor %}
],
lineStyle: {
strokeDasharray:"4 4",
animation: true,
stroke: "rgba(98, 105, 118, .75)",
strokeWidth: .5,
},
{% endif %}
});
window.addEventListener("resize", () => {
map.updateSize();
});
});
// @formatter:off
</script>
{% endcapture %}
{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}
{% endif %}
preview/pages/_includes/ui/map.html
+39
View File
@@ -0,0 +1,39 @@
{% assign id = include.map-id %}
{% assign data = maps[id] %}
{% if data %}
<div class="ratio ratio-{{ data.ratio | default: include.ratio | default: '16x9' }}">
<div>
<div id="map-{{ id }}" class="w-100 h-100{% if data.card %} rounded{% endif %}"></div>
</div>
</div>
{% capture_global scripts %}
<script>
// @formatter:off
{% if environment == 'development' %}window.tabler_map = window.tabler_map || {};{% endif %}
document.addEventListener("DOMContentLoaded", function() {
mapboxgl.accessToken = '{{ site.mapboxKey }}';
var map = new mapboxgl.Map({
container: 'map-{{ id }}',
style: 'mapbox://styles/mapbox/{{ data.style | default: "streets-v11" }}',
zoom: {{ data.zoom | default: 13 }},
{% if data.center %}
center: [{{ data.center[1] }}, {{ data.center[0] }}],
{% else %}
center: [13.404900, 52.518827],
{% endif %}
});
{% for marker in data.markers %}
new mapboxgl.Marker({ color: tabler.getColor("{{ 'primary' }}") }).setLngLat([{{ marker.center[1] }}, {{ marker.center[0] }}]).addTo(map);
{% endfor %}
{% if environment == 'development' %}window.tabler_map["map-{{ map-id }}"] = map;{% endif %}
});
// @formatter:on
</script>
{% endcapture_global %}
{% endif %}
preview/pages/_includes/ui/marketing/browser.html
+21
View File
@@ -0,0 +1,21 @@
<div class="browser">
<div class="browser-header">
<div class="row align-items-center">
<div class="col-auto col-md-2">
<div class="browser-dots browser-dots-colored">
<div class="browser-dot"></div>
<div class="browser-dot"></div>
<div class="browser-dot"></div>
</div>
</div>
<div class="col-8">
<a href="{{ site.previewUrl }}" class="browser-input" target="_blank" rel="noopener noreferrer"
data-bs-toggle="tooltip" data-bs-placement="top" title="Open preview of Tabler dashboard!">
{% include "ui/icon.html" icon="lock" color="green" size="sm" class="me-2" %}
{% if include.url %}{{ include.url }}{% else %}{{ site.previewUrl }}{% endif %}
</a>
</div>
</div>
</div>
{% include "ui/responsive-image.html" src="static/marketing/preview.png" width=1040 height=760 %}
</div>
preview/pages/_includes/ui/modal.html
+12
View File
@@ -0,0 +1,12 @@
{% assign modal-id = include.modal-id | default: 'simple' %}
{% assign size = include['size'] %}
{% capture_global modals %}
<div class="modal modal-blur fade" id="modal-{{ modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog{% if size%} modal-{{ size }}{% endif %}{% unless include.top %} modal-dialog-centered{% endunless %}{% if include.scrollable %} modal-dialog-scrollable{% endif %}" role="document">
<div class="modal-content">
{% include "parts/modals/{{ modal-id }}.html" %}
</div>
</div>
</div>
{% endcapture_global %}
preview/pages/_includes/ui/modal/close.html
+1
View File
@@ -0,0 +1 @@
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
preview/pages/_includes/ui/modal/footer.html
+4
View File
@@ -0,0 +1,4 @@
<div class="modal-footer">
<button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
</div>
preview/pages/_includes/ui/modal/header.html
+4
View File
@@ -0,0 +1,4 @@
<div class="modal-header">
<h5 class="modal-title">{{ include.title | default: 'Modal title' }}</h5>
{% include "ui/modal/close.html" %}
</div>
preview/pages/_includes/ui/nav.html
+23
View File
@@ -0,0 +1,23 @@
<ul class="nav {% if include.pills %}nav-pills{% if include.header %} card-header-pills{% endif %}{% elsif include.tabs %}nav-tabs{% if include.header %} card-header-tabs{% endif %}{% endif %}">
<li class="nav-item">
<a class="nav-link active" href="#">
Active
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
{% include "ui/icon.html" icon="star" class="nav-link-icon" %}
Link
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
Disabled
</a>
</li>
<li class="nav-item ms-auto">
<a class="nav-link" href="#">
{% include "ui/icon.html" icon="settings" %}
</a>
</li>
</ul>
preview/pages/_includes/ui/pagination.html
+30
View File
@@ -0,0 +1,30 @@
{% assign count = include.count | default: 5 %}
{% assign active-item = include.active-item | default: 2 %}
<ul class="pagination {{ include.class }}">
<li class="page-item{% if include.prev-description %} page-prev{% endif %} disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">
{% if include.prev-description %}
<div class="page-item-subtitle">previous</div>
<div class="page-item-title">{{ include.prev-description }}</div>
{% else %}
{% if include.icons %}{% include "ui/icon.html" icon="chevron-left" %}{% else %}{% include "ui/icon.html" icon="chevron-left" %} prev{% endif %}
{% endif %}
</a>
</li>
{% for i in (1..count) %}
<li class="page-item{% if i == active-item %} active{% endif %}"><a class="page-link" href="#">{{ i }}</a></li>
{% endfor %}
<li class="page-item{% if include.prev-description %} page-next{% endif %}">
<a class="page-link" href="#">
{% if include.next-description %}
<div class="page-item-subtitle">next</div>
<div class="page-item-title">{{ include.next-description }}</div>
{% else %}
{% if include.icons %}{% include "ui/icon.html" icon="chevron-right" %}{% else %}next {% include "ui/icon.html" icon="chevron-right" %}{% endif %}
{% endif %}
</a>
</li>
</ul>
preview/pages/_includes/ui/payment.html
+1
View File
@@ -0,0 +1 @@
<span class="payment{% if include['size'] %} payment-{{ include.size }}{% endif %} payment-provider-{{ include.payment | default: 'visa'}}{% if include.dark %}-dark{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></span>
preview/pages/_includes/ui/photo.html
+22
View File
@@ -0,0 +1,22 @@
<!-- Photo -->
{% if include.id %}
{% assign id = include.id | default: 1 %}
{% if include.horizontal %}
{% assign filtered-photos = photos | where: 'horizontal', true %}
{% else %}
{% assign filtered-photos = photos %}
{% endif %}
{% assign photo = filtered-photos[id] %}
{% if include.background %}
<div{% if include.class %} class="{{ include.class }}"{% endif %} style="background-image: url({{ page | relative }}/static/photos/{{ photo.file }})"></div>
{% elsif include.ratio %}
<div class="img-responsive img-responsive-{{ include.ratio }}{% if include.class %} {{ include.class }}{% endif %}" style="background-image: url({{ page | relative }}/static/photos/{{ photo.file }})"></div>
{% else %}
<img src="{{ page | relative }}/static/photos/{{ photo.file }}"{% if include.class %} class="{{ include.class }}"{% endif %} alt="{{ photo.title }}" />
{% endif %}
{% else %}
{% include "ui/svg.html" width=640 height=480 border=true class=include.class %}
{% endif %}
preview/pages/_includes/ui/progress-description.html
+13
View File
@@ -0,0 +1,13 @@
{% assign size = include['size'] | default: 'sm' %}
{% assign color = include.color | default: 'blue' %}
<div{% if include.class %} class="{{ include.class }}"{% endif %}>
<div class="d-flex mb-1 align-items-center lh-1">
<div class="fs-5 font-weight-bolder m-0">{{ include.label | default: 'Label' }}</div>
{% if include.description %}
<div class="fs-6 text-secondary ms-2">{{ include.description }}</div>
{% endif %}
<span class="ms-auto fs-6 strong">{{ include.value }}%</span>
</div>
{% include "ui/progress.html" size=size value=include.value color=color %}
</div>
preview/pages/_includes/ui/progress.html
+20
View File
@@ -0,0 +1,20 @@
{% assign percentage = include.value | replace: '%', '' | default: 38 %}
{% assign colors = include.colors | default: include.color | default: 'blue,red,green,yellow,dark' | split: ',' %}
<div class="progress{% if include['size'] %} progress-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.width %} style="width: {{ include.width }}"{% endif %}>
{% if include.indeterminate %}
<div class="progress-bar progress-bar-indeterminate{% if include.color %} bg-{{ include.color }}{% endif %}"></div>
{% elsif include.values %}
{% assign values = include.values | split: ',' %}
{% for value in values %}
<div class="progress-bar bg-{{ colors[forloop.index0] }}" style="width: {{ value }}%" role="progressbar" aria-valuenow="{{ value }}" aria-valuemin="0" aria-valuemax="100"></div>
{% endfor %}
{% else %}
<div class="progress-bar{% if include.color %} bg-{{ include.color }}{% endif %}" style="width: {{ percentage }}%" role="progressbar" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ percentage }}% Complete">
{% if include.show-value %}
{{ percentage }}%
{% else %}
<span class="visually-hidden">{{ percentage }}% Complete</span>
{% endif %}
</div>
{% endif %}
</div>
preview/pages/_includes/ui/range.html
+33
View File
@@ -0,0 +1,33 @@
{% assign min = include.min | default: 0 %}
{% assign max = include.max | default: 100 %}
{% assign step = include.step | default: 10 %}
{% assign value = include.value | default: 50 %}
{% assign id = include.id %}
{% if id %}
<div class="form-range mb-2{% if include.class %} {{ include.class }}{% endif %}" id="range-{{ id }}"></div>
{% capture_global scripts %}
<script>
// @formatter:off
{% assign value = value | split: ',' %}
document.addEventListener("DOMContentLoaded", function () {
window.noUiSlider && (noUiSlider.create(document.getElementById('range-{{ id }}'), {
start: {% if value.size > 1 %}[{{ value | join: ', ' }}]{% else %}{{ value }}{% endif %},
{% if value.size > 1 or include.connect %}
connect: [{% for i in (2..value.size) %}{% cycle 'false', 'true' %}, {% endfor %}true, false],
{% endif %}
step: {{ step }},
range: {
min: {{ min }},
max: {{ max }}
}
}));
});
// @formatter:on
</script>
{% endcapture_global %}
{% else %}
<input type="range" class="form-range mb-2{% if include.class %} {{ include.class }}{% endif %}" value="{{ value }}" min="{{ min }}" max="{{ max }}" step="{{ step }}">
{% endif %}
preview/pages/_includes/ui/rating.html
+42
View File
@@ -0,0 +1,42 @@
{% assign id = include.id | default: include.icon | default: 'default' %}
{% assign icon = include.icon | default: 'star' %}
{% assign color = include.color %}
{% assign size = include.size | default: false %}
{% assign value = include.value %}
<select id="rating-{{ id }}">
<option value="">Select a rating</option>
<option value="5"{% if value == 5 %} selected{% endif %}>Excellent</option>
<option value="4"{% if value == 4 %} selected{% endif %}>Very Good</option>
<option value="3"{% if value == 3 %} selected{% endif %}>Average</option>
<option value="2"{% if value == 2 %} selected{% endif %}>Poor</option>
<option value="1"{% if value == 1 %} selected{% endif %}>Terrible</option>
</select>
{% capture star %}
{% include "ui/icon.html" class="gl-star-full" icon=icon color=color type="filled" size=size %}
{% endcapture %}
{% assign star = star | replace_regex: "[\t\s]+\n", "" | strip %}
{% assign star = star | replace_regex: "[\n\t]{2,}", " " | strip %}
{% assign star = star | replace_regex: "<!--[^-]*-->", "" | strip %}
{% capture_global scripts %}
<script>
// @formatter:off
{% if environment == 'development' %}window.tabler_rating = window.tabler_rating || {};{% endif %}
document.addEventListener("DOMContentLoaded", function () {
const rating = new StarRating('#rating-{{ id }}', {
tooltip: false,
clearable: false,
stars: function (el, item, index) {
el.innerHTML = `{{ star }}`;
},
classNames: {
}
})
{% if environment == 'development' %}window.tabler_rating["rating-{{ id }}"] = rating;{% endif %}
})
// @formatter:on
</script>
{% endcapture_global %}
preview/pages/_includes/ui/responsive-image.html
+5
View File
@@ -0,0 +1,5 @@
{% assign src = include.src %}
{% assign width = include.width | default: 507 %}
<picture>
<img src="{{ page | relative }}/{{ src }}" srcset="{{ page | relative }}/{{ src }} 1x, {{ page | relative }}/{{ src | replace: '.png', '@2x.png' }} 2x" alt="{{ include.alt }}" class="img-fluid {{ include.class }}" width="{{ width }}"{% if include.height %} height="{{ include.height }}"{% endif %} loading="lazy">
</picture>
preview/pages/_includes/ui/ribbon.html
+3
View File
@@ -0,0 +1,3 @@
<div class="ribbon{% if include.top %} ribbon-top{% endif %}{% if include.left %} ribbon-start{% endif %}{% if include.bottom %} ribbon-bottom{% endif %}{% if include.bookmark %} ribbon-bookmark{% endif %}{% if include.color %} bg-{{ include.color }}{% endif %}">
{% if include.text %}{{ include.text }}{% else %}{% include "ui/icon.html" icon="star" use-svg=true filled=include.filled %}{% endif %}
</div>
preview/pages/_includes/ui/select.html
+104
View File
@@ -0,0 +1,104 @@
{% assign id = include.id | default: include.key %}
{% assign value = include.value %}
{% if id %}
{% assign key = include.key | default: 'people' %}
{% assign data = selects[key] %}
<select type="text" class="form-select{% if include.class %} {{ include.class }}{% endif %}{% if include.state %} is-{{ include.state }}{% endif %}"{% if include.placeholder %} placeholder="{{ include.placeholder }}"{% endif %} id="select-{{ id }}" value="{{ value }}"{% if include.multiple or data.multiple %} multiple{% endif %}>
{% if include.values %}
{% assign values = include.values | split: ',' %}
{% for value in values %}
<option value="{{ value }}">{{ value }}</option>
{% endfor %}
{% else %}
{% assign options = data.options %}
{% if data.data == 'people' %}
{% for person in people limit: 20 %}
<option value="{{ person.id }}"{% if include.indicator == 'avatar' %} data-custom-properties="{% capture indicator %}{% include "ui/avatar.html" size='xs' person=person %}{% endcapture %}{{ indicator | strip | escape }}"{% endif %}>{{ person.full_name }}</option>
{% endfor %}
{% elsif data.data == 'optgroup' %}
{% for group in options %}
<optgroup label="{{ group.title }}">
{% for option in group.options %}
<option value="{{ option }}">{{ option }}</option>
{% endfor %}
</optgroup>
{% endfor %}
{% else %}
{% for option in options %}
{% if option.first %}
{% if include.indicator == 'flag' %}
{% capture indicator-html %}
{% assign country = option[1].flag %}
{% include "ui/flag.html" size="xs" flag=country %}
{% endcapture %}
{% elsif include.indicator == 'label' %}
{% capture indicator-html %}
{% assign label = option[1].label %}
<span class="badge bg-primary-lt">{{ label }}</span>
{% endcapture %}
{% endif %}
<option value="{{ option[0] }}"{% if include.indicator %} data-custom-properties="{{ indicator-html | strip | escape }}"{% endif %}{% if option[1].selected %} selected{% endif %}>{{ option[1].name }}</option>
{% else %}
<option value="{{ option }}">{{ option }}</option>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
</select>
{% capture script %}
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
{% if environment == 'development' %}
window.tabler_select = window.tabler_select || {};
{% endif %}
var el;
window.TomSelect && ({% if environment == 'development' %}window.tabler_select["select-{{ id }}"] = {% endif %}new TomSelect(el = document.getElementById('select-{{ id }}'), {
copyClassesToDropdown: false,
dropdownParent: 'body',
{% unless include.show-search %}
controlInput: '<input>',
{% endunless %}
render:{
item: function(data,escape) {
if( data.customProperties ){
return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
}
return '<div>' + escape(data.text) + '</div>';
},
option: function(data,escape){
if( data.customProperties ){
return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
}
return '<div>' + escape(data.text) + '</div>';
},
},
}));
});
// @formatter:on
</script>
{% endcapture %}
{% if include.show-scripts %}
{{ script }}
{% else %}
{% capture_global scripts %}
{{ script }}
{% endcapture_global %}
{% endif %}
{% endif %}
preview/pages/_includes/ui/shape.html
+3
View File
@@ -0,0 +1,3 @@
<div class="shape{% if include['size'] %} shape-{{ include['size'] }}{% endif %}{% if include.color %} shape-{{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.rounded %} rounded-circle{% endif %}">
{% include "ui/icon.html" icon=include.icon %}
</div>
preview/pages/_includes/ui/spinner.html
+2
View File
@@ -0,0 +1,2 @@
{% assign elem = include.element | default: 'div' %}
<{{ elem }} class="spinner-{{ include.type | default: 'border' }}{% if include.color %} text-{{ include.color }}{% endif %}{% if include['size'] %} spinner-{{ include.type | default: 'border' }}-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="status"></{{ elem }}>
preview/pages/_includes/ui/stars.html
+12
View File
@@ -0,0 +1,12 @@
{% assign count = include.count | default: 5 %}
{% assign rate = include.rate | default: 4 %}
{% assign icon = include.icon | default: 'star' %}
{% assign class = include.color | default: 'yellow' | prepend: 'text-' %}
{% assign filled = include.filled | default: false %}
<div class="stars">
{% for i in (1..5) %}
<span class="star {% if forloop.index <= rate %}{{ class }}{% endif %}">
{% include "ui/icon.html" icon=icon %}
</span>
{% endfor %}
</div>
preview/pages/_includes/ui/status-dot.html
+1
View File
@@ -0,0 +1 @@
<span class="status-dot{% if include.color %} status-{{ include.color }}{% endif %}{% if include.animated %} status-dot-animated{% endif %}"></span>
preview/pages/_includes/ui/status-indicator.html
+5
View File
@@ -0,0 +1,5 @@
<span class="status-indicator{% if include.color %} status-{{ include.color }}{% endif %}{% if include.animated %} status-indicator-animated{% endif %}">
<span class="status-indicator-circle"></span>
<span class="status-indicator-circle"></span>
<span class="status-indicator-circle"></span>
</span>
preview/pages/_includes/ui/status.html
+6
View File
@@ -0,0 +1,6 @@
<span class="status{% if include.color %} status-{{ include.color }}{% endif %}{% if include.lite %} status-lite{% endif %}">
{% if include.dot %}
<span class="status-dot{% if include.animated %} status-dot-animated{% endif %}"></span>
{% endif %}
{{ include.text | default: 'Status' }}
</span>
preview/pages/_includes/ui/steps.html
+11
View File
@@ -0,0 +1,11 @@
{% assign count = include.count | default: 4 %}
{% assign active = include.active | default: 3 %}
<div class="steps{% if include.numbers %} steps-counter{% endif %}{% if include.color %} steps-{{ include.color }}{% endif %}{% if include['size'] %} steps-{{ include['size'] }}{% endif %}">
{% for i in (1..count) %}
{% assign elem = 'a' %}
{% if i > active %}{% assign elem = 'span' %}{% endif %}
<{{ elem }} href="#" class="step-item{% if i == active %} active{% endif %}"{% if include.show-tooltip %} data-bs-toggle="tooltip" title="Step {{ i }} description"{% endif %}>{% if include.show-title %}
Step {{ i }}
{% endif %}</{{ elem }}>
{% endfor %}
</div>
preview/pages/_includes/ui/svg.html
+7
View File
@@ -0,0 +1,7 @@
{% assign width = include.width | default: include.size | default: 20 %}
{% assign height = include.height | default: include.size | default: 20 %}
<svg xmlns="http://www.w3.org/2000/svg"{% if include.class %} class="{{ include.class }}"{% endif %} preserveAspectRatio="{% if include.ratio %}xMidYMid meet{% else %}none{% endif %}" width="{{ width }}" height="{{ height }}" viewBox="0 0 {{ width }} {{ height }}" fill="transparent" stroke="var(--tblr-border-color, #b8cef1)"{% if include.border %} style="width: 100%; height: auto"{% endif %}>
{% if include.border %}<rect x=".5" y=".5" width="{{ width | minus: 1 }}" height="{{ height | minus: 1 }}" rx="2"></rect>{% endif %}
<line x1="0" y1="0" x2="{{ width }}" y2="{{ height }}"></line>
<line x1="0" y1="{{ height }}" x2="{{ width }}" y2="0"></line>
</svg>
preview/pages/_includes/ui/switch-icon.html
+19
View File
@@ -0,0 +1,19 @@
{% assign icon = include.icon | default: 'heart' %}
{% assign icon-b = include.icon-b | default: icon | default: 'heart' %}
{% assign icon-a-color = include.icon-a-color | default: 'muted' %}
{% assign icon-b-color = include.icon-b-color | default: 'red' %}
{% if icon == 'star' or icon == 'heart' %}
{% assign icon-b-class = 'icon-filled' %}
{% else %}
{% assign icon-b-class = include.icon-b-class %}
{% endif %}
<button class="switch-icon{% if include.variant %} switch-icon-{{ include.variant }}{% endif %}{% if include.active %} active{% endif %}" data-bs-toggle="switch-icon">
<span class="switch-icon-a text-{{ icon-a-color }}">
{% include "ui/icon.html" icon=icon %}
</span>
<span class="switch-icon-b text-{{ icon-b-color }}">
{% include "ui/icon.html" icon=icon-b class=icon-b-class %}
</span>
</button>
preview/pages/_includes/ui/table.html
+90
View File
@@ -0,0 +1,90 @@
{% assign roles = 'User,Admin,Owner' | split: ',' %}
{% assign limit = include.limit | default: 5 %}
<div class="table-responsive">
<table
class="table table-vcenter{% if include.mobile %} table-mobile-md{% endif %}{% if include.card %} card-table{% endif %}{% if include.stripped %} table-striped{% endif %}{% if include.nowrap %} table-nowrap{% endif %}">
<thead>
<tr>
<th>Name</th>
<th>Title</th>
{% unless include.avatars %}
<th>Email</th>
{% endunless %}
<th>Role</th>
{% if include.nowrap %}
<th></th>
{% endif %}
<th class="w-1"></th>
</tr>
</thead>
<tbody>
{% for person in people limit: limit offset: include.offset %}
<tr>
{% if include.avatars %}
<td {% if include.mobile %}data-label="Name" {% endif %}>
<div class="d-flex py-1 align-items-center">
{% include "ui/avatar.html" person-id=person.id class="me-2" %}
<div class="flex-fill">
<div class="font-weight-medium">{{ person.full_name }}</div>
<div class="text-secondary"><a href="#" class="text-reset">{{ person.email }}</a></div>
</div>
</div>
</td>
{% else %}
<td {% if include.mobile %}data-label="Name" {% endif %}>{{ person.full_name }}</td>
{% endif %}
{% if include.avatars %}
<td {% if include.mobile %}data-label="Title" {% endif %}>
<div>{{ person.job_title }}</div>
<div class="text-secondary">{{ person.department }}</div>
</td>
{% else %}
<td class="text-secondary" {% if include.mobile %}data-label="Title" {% endif %}>
{{ person.job_title }}, {{ person.department }}
</td>
{% endif %}
{% unless include.avatars %}
<td class="text-secondary" {% if include.mobile %}data-label="Email" {% endif %}><a href="#" class="text-reset">{{
person.email }}</a></td>
{% endunless %}
<td class="text-secondary" {% if include.mobile %}data-label="Role" {% endif %}>
{% assign role-id = forloop.index | random_number: 0, 2 %}
{{ roles[role-id] }}
</td>
{% if include.nowrap %}
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt
expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium
quaerat quo repellendus, voluptates.
</td>
{% endif %}
<td>
{% if include.buttons %}
<div class="btn-list flex-nowrap">
{% include "ui/button.html" text="Edit" %}
<div class="dropdown">
<button class="btn dropdown-toggle align-text-top" data-bs-toggle="dropdown">
Actions
</button>
{% include "ui/dropdown-menu.html" right=true %}
</div>
</div>
{% else %}
<a href="#">Edit</a>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
preview/pages/_includes/ui/tag.html
+25
View File
@@ -0,0 +1,25 @@
<span class="tag">
{% if include.flag %}
{% include "ui/flag.html" flag=include.flag size="xxs" class="tag-flag" %}
{% elsif include.icon %}
{% include "ui/icon.html" icon=include.icon size="xxs" class="tag-icon" %}
{% elsif include.person %}
{% include "ui/avatar.html" person=include.person size="xxs" class="tag-avatar" %}
{% elsif include.person-id %}
{% include "ui/avatar.html" person-id=include.person-id size="xxs" class="tag-avatar" %}
{% elsif include.payment %}
{% include "ui/payment.html" provider=include.payment size="xxs" class="tag-payment" %}
{% elsif include.status %}
{% include "ui/badge.html" color=include.status class="tag-status badge-empty" text="" %}
{% elsif include.legend %}
<span class="legend bg-{{ include.legend }}"></span>
{% elsif include.checkbox %}
<input type="checkbox" class="form-check-input tag-check"{% if include.checked %} checked{% endif %}/>
{% endif %}
{{ include.text }}
{% if include.badge %}
{% include "ui/badge.html" color=include.status class="tag-badge" text=include.badge size="sm" %}
{% endif %}
<a href="#" class="btn-close"></a>
</span>
preview/pages/_includes/ui/tinymce.html
+38
View File
@@ -0,0 +1,38 @@
{% assign id = include.id | default: 'mytextarea' %}
<form method="post">
<textarea id="tinymce-{{ id }}">Hello, <b>Tabler</b>!</textarea>
</form>
{% capture_global scripts %}
<script>
// @formatter:off
document.addEventListener("DOMContentLoaded", function () {
let options = {
selector: '#tinymce-{{ id }}',
height: 300,
menubar: false,
statusbar: false,
license_key: 'gpl',
plugins: [
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor',
'searchreplace', 'visualblocks', 'code', 'fullscreen',
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat',
content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }'
}
if (localStorage.getItem("tablerTheme") === 'dark') {
options.skin = 'oxide-dark';
options.content_css = 'dark';
}
tinyMCE.init(options);
})
// @formatter:on
</script>
{% endcapture_global %}
preview/pages/_includes/ui/toast.html
+24
View File
@@ -0,0 +1,24 @@
{% assign toast-id = include.toast-id | default: 'simple' %}
{% assign person-id = include.person-id | default: 2 %}
{% assign person = people[person-id] %}
<div class="toast {% if include.show %}show{% endif %}" id="toast-{{ toast-id }}" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
{% unless include.hide-header %}
<div class="toast-header">
{% include "ui/avatar.html" person=person class="me-2" size="xs" %}
<strong class="me-auto">{{ person.full_name }}</strong>
<small>{{ include.date | default: '11 mins ago' }}</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
{% endunless %}
<div class="toast-body">
{% if include.cookies %}
🍪&nbsp;Our site uses cookies. By continuing to use our site, you agree to our Cookie Policy.
<div class="mt-2 pt-2 border-top">
<a href="#" class="btn btn-primary btn-sm">I understand</a>
</div>
{% else %}
{{ include.text | default: 'Hello, world! This is a toast message.' }}
{% endif %}
</div>
</div>
preview/pages/_includes/ui/tracking.html
+14
View File
@@ -0,0 +1,14 @@
{% assign blocks = include.blocks | default: 30 %}
<div class="tracking{% if include.squares %} tracking-squares{% endif %}">
{% for i in (1..blocks) %}
{% if i == 5 or i == 18 %}
<div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime"></div>
{% elsif i == 22 or i == 23 %}
<div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data"></div>
{% elsif i == 14 %}
<div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Big load"></div>
{% else %}
<div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational"></div>
{% endif %}
{% endfor %}
</div>
preview/pages/_includes/ui/trending.html
+15
View File
@@ -0,0 +1,15 @@
{% assign value = include.value | default: 25 %}
{% if value > 0 %}
{% assign color = 'green' %}
{% assign icon = 'trending-up' %}
{% elsif value == 0 %}
{% assign color = 'yellow' %}
{% assign icon = 'minus' %}
{% else %}
{% assign color = 'red' %}
{% assign icon = 'trending-down' %}
{% endif %}
<span class="text-{{ color }} d-inline-flex align-items-center lh-1{% if include.class %} {{ include.class }}{% endif %}">
{{ value }}% {% include "ui/icon.html" icon=icon class="ms-1" %}
</span>
preview/pages/_includes/ui/typed.html
+19
View File
@@ -0,0 +1,19 @@
{% assign strings = include.strings | split: '|' %}
{% assign id = include.id | default: "typed" %}
<span class="text-primary" id="{{ id }}">{{ strings | first }}</span>
{% capture_global scripts %}
<script>
document.addEventListener("DOMContentLoaded", function() {
var typed = new Typed('#{{ id }}', {
strings: [{% for string in strings %}'{{ string }}'{% unless forloop.last %}, {% endunless %}{% endfor %}],
typeSpeed: 100,
backSpeed: 50,
backDelay: 1000,
startDelay: 1000,
loop: true,
fade: true
});
});
</script>
{% endcapture_global %}