Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-08 12:22:23 +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
docs/content/illustrations/introduction/preview.md
+17
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>
docs/content/ui/components/breadcrumb.md
+2 -2
View File
@@ -35,7 +35,7 @@ Look at the example below to see how breadcrumbs work in practice.
</li>
</ol>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html vertical separated %}
## Different separators
@@ -105,7 +105,7 @@ You can use icons in breadcrumbs to make them more visually appealing. The examp
</li>
</ol>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html vertical separated %}
## Muted breadcrumbs
docs/content/ui/components/cards.md
+4 -90
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>
{%- endcapture %}
{% include "docs/example.html" html=html bg="surface-secondary" %}
{% include "docs/example.html" html=html bg="surface-secondary" column %}
## 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>
{%- endcapture %}
{% include "docs/example.html" html=html bg="surface-secondary" %}
{% include "docs/example.html" html=html bg="surface-secondary" column %}
```html
<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>
{%- 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
@@ -89,7 +89,7 @@ To create a more visually appealing card, add a title and an image. Thanks to th
</div>
</div>
{%- endcapture %}
{% include "docs/example.html" html=html bg="surface-secondary" %}
{% include "docs/example.html" html=html bg="surface-secondary" column %}
## 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 %}
{% 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
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 %}
{% 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>
```
docs/content/ui/components/countup.md
+10 -10
View File
@@ -24,7 +24,7 @@ The results can be seen in the example below.
{% capture html -%}
<h1 data-countup>30000</h1>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html centered %}
## 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":6}'>30000</h1>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html vertical separated %}
## 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":47655}'>30000</h1>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html vertical separated %}
## 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":3}'>3.123</h1>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html vertical separated %}
## 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='{"useEasing": false}'>30000</h1>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html vertical separated %}
## Use grouping
@@ -108,7 +108,7 @@ Example below shows how grouping affects the animation.
<h1 data-countup>30000</h1>
<h1 data-countup='{"useGrouping": false}'>30000</h1>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html vertical separated %}
## Separator
@@ -124,7 +124,7 @@ This example shows how the separator affects the animation.
<h1 data-countup>3000000</h1>
<h1 data-countup='{"separator":" "}'>3000000</h1>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html vertical separated %}
## 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,"decimal":","}'>3.12</h1>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html vertical separated %}
## 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>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html vertical separated %}
## 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>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html vertical separated %}
docs/content/ui/components/empty.md
+4 -19
View File
@@ -57,7 +57,7 @@ Use the default empty state to engage users in the critical moments of their exp
</div>
</div>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html bg="surface-secondary" %}
## Empty state with illustration
@@ -66,7 +66,7 @@ Make your empty state screen more attractive and engaging by adding an illustrat
{% capture html -%}
<div class="empty">
<div class="empty-img">
<img src="..." height="128" alt="" />
{% include "ui/illustration.html" image="boy-with-key" alt="Empty state illustration" %}
</div>
<p class="empty-title">Invoices are managed from here</p>
<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>
{%- endcapture %}
{% include "docs/example.html" html=html %}
{% include "docs/example.html" html=html bg="surface-secondary" %}
## Empty state with header
@@ -132,20 +132,5 @@ Instead of adding an icon or illustration you can simply give the text:
</div>
</div>
{%- 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>
```