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

feat: enhance documentation examples with improved layout and additional parameters for clarity

Browse Source
This commit is contained in:
codecalm
2025-04-19 20:40:43 +02:00
parent a037e8e429
commit 7295678c34
10 changed files with 56 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/js/src/countup.js
View File

@@ -5,15 +5,19 @@ if (elements.length) {
let options = {}; let options = {};
try { try {
const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {}; const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {};
options = Object.assign({'enableScrollSpy': true}, dataOptions); options = Object.assign({
'enableScrollSpy': true
}, dataOptions);
} catch (error) {} } catch (error) {}
const value = parseInt(element.innerHTML, 10); const value = parseInt(element.innerHTML, 10);
if (window.countUp && window.countUp.CountUp) {
const countUp = new window.countUp.CountUp(element, value, options); const countUp = new window.countUp.CountUp(element, value, options);
if (!countUp.error) { if (!countUp.error) {
countUp.start(); countUp.start();
} }
}
}); });
} }

17
docs/content/illustrations/introduction/preview.md Normal file
View File

@@ -0,0 +1,17 @@
---
title: Preview
summary: "Tabler Illustrations offers 80 illustrations in two themes: light and dark. You can use them in your projects to enhance the visual appeal and convey messages effectively."
---
Look at full list of illustrations below and see how they look.
{% assign all-illustrations = illustrations | sort %}
<div class="row g-2 gy-6">
{% for illustration in all-illustrations %}
<div class="col-6 col-md-4 col-lg-3 text-center">
<img src="/static/illustrations/light/{{ illustration }}.png" alt="{{ illustration }}" class="hide-theme-dark" />
<img src="/static/illustrations/dark/{{ illustration }}.png" alt="{{ illustration }}" class="hide-theme-light" />
<code>{{ illustration }}</code>
</div>
{% endfor %}
</div>

4
docs/content/ui/components/breadcrumb.md
View File

@@ -35,7 +35,7 @@ Look at the example below to see how breadcrumbs work in practice.
</li> </li>
</ol> </ol>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html vertical separated %}
## Different separators ## Different separators
@@ -105,7 +105,7 @@ You can use icons in breadcrumbs to make them more visually appealing. The examp
</li> </li>
</ol> </ol>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html vertical separated %}
## Muted breadcrumbs ## Muted breadcrumbs

94
docs/content/ui/components/cards.md
View File

@@ -16,7 +16,7 @@ Use the `.card` and `.card-body` classes to create a card and use it as the basi
</div> </div>
</div> </div>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html bg="surface-secondary" %} {% include "docs/example.html" html=html bg="surface-secondary" column %}
## Card padding ## Card padding
@@ -38,7 +38,7 @@ Cards with the `.card-sm` class are well suited for small items such as widgets,
<div class="card-body">This is some text within a card body.</div> <div class="card-body">This is some text within a card body.</div>
</div> </div>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html bg="surface-secondary" %} {% include "docs/example.html" html=html bg="surface-secondary" column %}
```html ```html
<div class="card card-sm">...</div> <div class="card card-sm">...</div>
@@ -67,7 +67,7 @@ Add a title to your card by including the `.card-title` class within `.card-body
</div> </div>
</div> </div>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html bg="surface-secondary" column vertical %} {% include "docs/example.html" html=html bg="surface-secondary" column %}
## Card with title and image ## Card with title and image
@@ -89,7 +89,7 @@ To create a more visually appealing card, add a title and an image. Thanks to th
</div> </div>
</div> </div>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html bg="surface-secondary" %} {% include "docs/example.html" html=html bg="surface-secondary" column %}
## Blog post card ## Blog post card
@@ -230,29 +230,6 @@ Add a status color to your card, either at the top or on the side of the card, t
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html bg="surface-secondary" %} {% include "docs/example.html" html=html bg="surface-secondary" %}
```html
<div class="card">
<div class="card-status-top bg-danger"></div>
<div class="card-body">
<h3 class="card-title">Card with top status</h3>
<p class="text-secondary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
</p>
</div>
</div>
<div class="card">
<div class="card-status-start bg-green"></div>
<div class="card-body">
<h3 class="card-title">Card with side status</h3>
<p class="text-secondary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt,
iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem.
</p>
</div>
</div>
```
## Stacked card ## Stacked card
Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect. Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.
@@ -332,66 +309,3 @@ Organize multiple cards into tabs to be able to display more content in a well-o
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html bg="surface-secondary" column %} {% include "docs/example.html" html=html bg="surface-secondary" column %}
```html
<!-- Cards with tabs component -->
<div class="card-tabs">
<!-- Cards navigation -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a>
</li>
<li class="nav-item">
<a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a>
</li>
<li class="nav-item">
<a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a>
</li>
<li class="nav-item">
<a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a>
</li>
</ul>
<div class="tab-content">
<!-- Content of card #1 -->
<div id="tab-top-1" class="card tab-pane active show">
<div class="card-body">
<div class="card-title">Content of tab #1</div>
<p class="text-secondary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
</p>
</div>
</div>
<!-- Content of card #2 -->
<div id="tab-top-2" class="card tab-pane">
<div class="card-body">
<div class="card-title">Content of tab #2</div>
<p class="text-secondary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
</p>
</div>
</div>
<!-- Content of card #3 -->
<div id="tab-top-3" class="card tab-pane">
<div class="card-body">
<div class="card-title">Content of tab #3</div>
<p class="text-secondary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
</p>
</div>
</div>
<!-- Content of card #4 -->
<div id="tab-top-4" class="card tab-pane">
<div class="card-body">
<div class="card-title">Content of tab #4</div>
<p class="text-secondary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid
distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
</p>
</div>
</div>
</div>
</div>
```

20
docs/content/ui/components/countup.md
View File

@@ -24,7 +24,7 @@ The results can be seen in the example below.
{% capture html -%} {% capture html -%}
<h1 data-countup>30000</h1> <h1 data-countup>30000</h1>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html centered %}
## Duration ## Duration
@@ -41,7 +41,7 @@ Look at the example below to see how the duration affects the animation.
<h1 data-countup='{"duration":4}'>30000</h1> <h1 data-countup='{"duration":4}'>30000</h1>
<h1 data-countup='{"duration":6}'>30000</h1> <h1 data-countup='{"duration":6}'>30000</h1>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html vertical separated %}
## Starting value ## Starting value
@@ -58,7 +58,7 @@ To see how the starting value affects the animation, look at the example below.
<h1 data-countup='{"startVal":12345}'>30000</h1> <h1 data-countup='{"startVal":12345}'>30000</h1>
<h1 data-countup='{"startVal":47655}'>30000</h1> <h1 data-countup='{"startVal":47655}'>30000</h1>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html vertical separated %}
## Decimal places ## Decimal places
@@ -76,7 +76,7 @@ Look at the example below to see how the number of decimal places affects the an
<h1 data-countup='{"decimalPlaces":2}'>3.123</h1> <h1 data-countup='{"decimalPlaces":2}'>3.123</h1>
<h1 data-countup='{"decimalPlaces":3}'>3.123</h1> <h1 data-countup='{"decimalPlaces":3}'>3.123</h1>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html vertical separated %}
## Easing ## Easing
@@ -92,7 +92,7 @@ Look at the example below to see how easing affects the animation.
<h1 data-countup>30000</h1> <h1 data-countup>30000</h1>
<h1 data-countup='{"useEasing": false}'>30000</h1> <h1 data-countup='{"useEasing": false}'>30000</h1>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html vertical separated %}
## Use grouping ## Use grouping
@@ -108,7 +108,7 @@ Example below shows how grouping affects the animation.
<h1 data-countup>30000</h1> <h1 data-countup>30000</h1>
<h1 data-countup='{"useGrouping": false}'>30000</h1> <h1 data-countup='{"useGrouping": false}'>30000</h1>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html vertical separated %}
## Separator ## Separator
@@ -124,7 +124,7 @@ This example shows how the separator affects the animation.
<h1 data-countup>3000000</h1> <h1 data-countup>3000000</h1>
<h1 data-countup='{"separator":" "}'>3000000</h1> <h1 data-countup='{"separator":" "}'>3000000</h1>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html vertical separated %}
## Decimal separator ## Decimal separator
@@ -140,7 +140,7 @@ Look at the example below to see how the decimal separator affects the animation
<h1 data-countup='{"decimalPlaces":2}'>3.12</h1> <h1 data-countup='{"decimalPlaces":2}'>3.12</h1>
<h1 data-countup='{"decimalPlaces":2,"decimal":","}'>3.12</h1> <h1 data-countup='{"decimalPlaces":2,"decimal":","}'>3.12</h1>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html vertical separated %}
## Prefix ## Prefix
@@ -156,7 +156,7 @@ Look at the example below to see how the prefix affects the animation.
<h1 data-countup='{"prefix":"$"}'>30000</h1> <h1 data-countup='{"prefix":"$"}'>30000</h1>
<h1 data-countup='{"prefix":"€"}'>30000</h1> <h1 data-countup='{"prefix":"€"}'>30000</h1>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html vertical separated %}
## Suffix ## Suffix
@@ -172,4 +172,4 @@ Look at the example below to see how the suffix affects the animation.
<h1 data-countup='{"suffix":"%"}'>300</h1> <h1 data-countup='{"suffix":"%"}'>300</h1>
<h1 data-countup='{"suffix":"‰"}'>300</h1> <h1 data-countup='{"suffix":"‰"}'>300</h1>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html vertical separated %}

23
docs/content/ui/components/empty.md
View File

@@ -57,7 +57,7 @@ Use the default empty state to engage users in the critical moments of their exp
</div> </div>
</div> </div>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html bg="surface-secondary" %}
## Empty state with illustration ## Empty state with illustration
@@ -66,7 +66,7 @@ Make your empty state screen more attractive and engaging by adding an illustrat
{% capture html -%} {% capture html -%}
<div class="empty"> <div class="empty">
<div class="empty-img"> <div class="empty-img">
<img src="..." height="128" alt="" /> {% include "ui/illustration.html" image="boy-with-key" alt="Empty state illustration" %}
</div> </div>
<p class="empty-title">Invoices are managed from here</p> <p class="empty-title">Invoices are managed from here</p>
<p class="empty-subtitle text-secondary"> <p class="empty-subtitle text-secondary">
@@ -95,7 +95,7 @@ Make your empty state screen more attractive and engaging by adding an illustrat
</div> </div>
</div> </div>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html bg="surface-secondary" %}
## Empty state with header ## Empty state with header
@@ -132,20 +132,5 @@ Instead of adding an icon or illustration you can simply give the text:
</div> </div>
</div> </div>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html %} {% include "docs/example.html" html=html bg="surface-secondary" %}
```html
<div class="empty">
<div class="empty-header">404</div>
<p class="empty-title">Oops… You just found an error page</p>
<p class="empty-subtitle text-secondary">
Try adjusting your search or filter to find what you're looking for.
</p>
<div class="empty-action">
<a href="#" class="btn btn-primary">
{% include "ui/icon.html" icon="arrow-left" %}
Take me home
</a>
</div>
</div>
```

6
shared/data/sri.json
View File

@@ -1,6 +1,6 @@
{ {
"css": "sha384-KSBcNt/Mulg3JQzroX3d1zEP/Tc56uS+xE5k+uXt33zVlRwz1j7BQp4eRUH5P+X4", "css": "sha384-IBrVf7Odj7RWoMpL3vakQPUmgqjDCU7WUZLi2kJY/VHMq1vwt3EYKnKiWJ4H28Oc",
"css-rtl": "sha384-5hIjOeu7y3tXjZQO/1xmN9svs+x+3LGjFOW6YH54qRh38/c/uiYqRU0orgjXAGDp", "css-rtl": "sha384-XEafVtpnCab8PIASAoWtYQC/yLMJCj3NMPhvefuQbwWBhJHFUfoPKa0jIZw8ZbYb",
"css-flags": "sha384-fStl5MKxnUStSlpPiHGSFmUTTzr2KEY7jtgmvTswVDaQJ+sLbmEF+26m57M2sbCm", "css-flags": "sha384-fStl5MKxnUStSlpPiHGSFmUTTzr2KEY7jtgmvTswVDaQJ+sLbmEF+26m57M2sbCm",
"css-flags-rtl": "sha384-i8KVpZYtpnZDkTYzaYlaeiF91VNnmyORipMLZh6hKGh5Jj80QN6962xlHQPkx/xr", "css-flags-rtl": "sha384-i8KVpZYtpnZDkTYzaYlaeiF91VNnmyORipMLZh6hKGh5Jj80QN6962xlHQPkx/xr",
"css-marketing": "sha384-IILX0Nea/+/hbVhEsrQ/djsqtSJmb4CM9hPzWd7Yh8hzbyYp4N/4hWMQL5kIPEuZ", "css-marketing": "sha384-IILX0Nea/+/hbVhEsrQ/djsqtSJmb4CM9hPzWd7Yh8hzbyYp4N/4hWMQL5kIPEuZ",
@@ -15,7 +15,7 @@
"css-themes-rtl": "sha384-er5SohDm2dJxg5UhUf1RI96jOlVA7RwgVm5++ribGoWmjds4MntkV6Mxg66xCQQg", "css-themes-rtl": "sha384-er5SohDm2dJxg5UhUf1RI96jOlVA7RwgVm5++ribGoWmjds4MntkV6Mxg66xCQQg",
"css-vendors-rtl": "sha384-irFOyZsTL/op6ReHkogsg+DkyAcog2eS/KdjjclmEPqJ6EuT2/okOK49HogVr0vC", "css-vendors-rtl": "sha384-irFOyZsTL/op6ReHkogsg+DkyAcog2eS/KdjjclmEPqJ6EuT2/okOK49HogVr0vC",
"css-vendors": "sha384-CW4ecnQUl53vx8YMR5fr7mJTTQqoFz5pBEM2GoWprNI+H/t+WG6bosZLrQMdnbCh", "css-vendors": "sha384-CW4ecnQUl53vx8YMR5fr7mJTTQqoFz5pBEM2GoWprNI+H/t+WG6bosZLrQMdnbCh",
"js": "sha384-PRkENR4f5wQma0mCHb6RLYzjdNtqhICPI0A0k27raTkeKg17hM+tNMvCx1ZiwAQ7", "js": "sha384-bOI13MQRvtBDkXKOx4PXrPh6/LDliTRkHou3x8+2cQZUG28UdQrgtPmoCkYR2SGT",
"js-theme": "sha384-3Z3TIkq5YSKOncCfiURX/S03AUHfI0nVzd39uRc9KLhtLi7M228qgWBjnRXwt2j0", "js-theme": "sha384-3Z3TIkq5YSKOncCfiURX/S03AUHfI0nVzd39uRc9KLhtLi7M228qgWBjnRXwt2j0",
"demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA", "demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
"demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z" "demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"

2
shared/includes/docs/example.html
View File

@@ -1,6 +1,6 @@
<div <div
class="example fs-base border rounded my-5{% unless include.raw %} d-flex flex-wrap justify-content-center{% endunless %} overflow-{{ include.overflow | default: 'auto' }} position-relative {% if include.bg %}bg-{{ include.bg }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.height %} style="height: {{ include.height }}"{% endif %}{% unless include.bg %} style="background: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\'><rect fill=\'rgba(0, 0, 0, .01)\' x=\'0\' y=\'0\' width=\'10\' height=\'10\' /><rect fill=\'rgba(0, 0, 0, .01)\' x=\'10\' y=\'10\' width=\'10\' height=\'10\' /></svg>')"{% endunless %}}> class="example fs-base border rounded my-5{% unless include.raw %} d-flex flex-wrap justify-content-center{% endunless %} overflow-{{ include.overflow | default: 'auto' }} position-relative {% if include.bg %}bg-{{ include.bg }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.height %} style="height: {{ include.height }}"{% endif %}{% unless include.bg %} style="background: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'20\' height=\'20\' viewBox=\'0 0 20 20\'><rect fill=\'rgba(0, 0, 0, .01)\' x=\'0\' y=\'0\' width=\'10\' height=\'10\' /><rect fill=\'rgba(0, 0, 0, .01)\' x=\'10\' y=\'10\' width=\'10\' height=\'10\' /></svg>')"{% endunless %}}>
{%- unless include.raw -%}<div class="p-6 w-full{% if include.centered %} d-flex justify-content-center flex-fill flex-wrap{% if include.vertical %} flex-column{% endif %} gap-2{% endif %}" {% if include.column %}style="max-width: 25rem;"{% endif %}>{%- endunless -%} {%- unless include.raw -%}<div class="p-6 w-full{% if include.column %} d-flex gap-3 flex-column{% elsif include.centered %} justify-content-center flex-fill flex-wrap gap-2{% if include.vertical %} flex-column{% endif %}{% endif %}" {% if include.column %}style="max-width: 25rem;"{% endif %}>{%- endunless -%}
{{ html | remove-href }} {{ html | remove-href }}
{%- unless include.raw -%}</div>{%- endunless -%} {%- unless include.raw -%}</div>{%- endunless -%}
</div> </div>

3
shared/includes/ui/illustration.html
View File

@@ -1,6 +1,6 @@
{% removeemptylines %}
{% assign image = include.image | replace: '.svg', '' %} {% assign image = include.image | replace: '.svg', '' %}
{% assign height = include.height | default: 128 %} {% assign height = include.height | default: 128 %}
{% assign src = "/free-illustrations/autodark/" | append: image %}
{% assign illustration = free-illustrations.autodark[image] %} {% assign illustration = free-illustrations.autodark[image] %}
@@ -13,3 +13,4 @@
{% assign illustration = illustration | replace: 'width="800" height="600"', replace-to-height %} {% assign illustration = illustration | replace: 'width="800" height="600"', replace-to-height %}
{{ illustration }} {{ illustration }}
{% endremoveemptylines %}

8
shared/layouts/docs/default.html
View File

@@ -135,19 +135,19 @@
</div> </div>
</div> </div>
<script src="/dist/js/tabler{% if environment != 'development' %}.min{% endif %}.js"></script>
<script src="/js/docs{% if environment != 'development' %}.min{% endif %}.js" defer></script>
{% if docs-libs -%} {% if docs-libs -%}
{% for lib in libs.js -%} {% for lib in libs.js -%}
{% if docs-libs contains lib[0] or libs.global-libs contains lib[0] -%} {% if docs-libs contains lib[0] or libs.global-libs contains lib[0] -%}
{% for file in lib[1] -%} {% for file in lib[1] -%}
<script <script
src="{% if file contains 'http://' or file contains 'https://' %}{{ file | replace: 'GOOGLE_MAPS_KEY', google-maps-key }}{% else %}/libs/{% if environment != 'development' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}{% endif %}" src="{% if file contains 'http://' or file contains 'https://' %}{{ file | replace: 'GOOGLE_MAPS_KEY', google-maps-key }}{% else %}/libs/{% if environment != 'development' %}{{ file | replace: '@', '' }}{% else %}{{ file }}{% endif %}{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}{% endif %}"
defer></script> ></script>
{% endfor -%} {% endfor -%}
{% endif -%} {% endif -%}
{% endfor -%} {% endfor -%}
{% endif -%} {% endif -%}
<script src="/dist/js/tabler{% if environment != 'development' %}.min{% endif %}.js"></script>
<script src="/js/docs{% if environment != 'development' %}.min{% endif %}.js" defer></script>
</body> </body>
</html> </html>