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

fix: improve Introduction, Base, Layout and Plugins sections in documentation (#2288)

Browse Source
This commit is contained in:
BG-Software
2025-04-26 19:32:15 +02:00
committed by GitHub
parent 78c9c71365
commit 8f701859ad
10 changed files with 49 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/cold-jokes-allow.md Normal file
View File

@@ -0,0 +1,5 @@
---
"@tabler/docs": patch
---
fix: improve Introduction, Base, Layout and Plugins sections in documentation

110
docs/content/ui/base/typography.md
View File

@@ -10,15 +10,6 @@ description: Role of typography in interface design.
Use HTML headings to organize content on your website and make the structure clear and user-friendly. The `h1` to `h6` tags are used to define HTML headings.
The `h1` tag is the highest level and the `h6` tag is the lowest level.
```html
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
```
Below are examples of headings with different levels:
{% capture html -%}
@@ -29,7 +20,7 @@ Below are examples of headings with different levels:
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
{%- endcapture %}
{% include "docs/example.html" html=html vertical %}
{% include "docs/example.html" html=html %}
## Paragraphs
@@ -55,32 +46,15 @@ If you use a second paragraph, it will be separated from the first one by a blan
Use a variety of semantic text elements, depending on how you want to display particular fragments of content.
```html
<abbr title="Internationalization">I18N</abbr>
<strong>Bold</strong>
<cite>Citation</cite>
<code>Hello World!</code>
<del>Deleted</del>
<em>Emphasis</em>
<i>Italic</i>
<ins>Inserted</ins>
<kbd>Ctrl + S</kbd>
<mark>Highlighted</mark>
<s>Strikethrough</s>
<samp>Sample</samp>
Text <sub>Subscripted</sub> Text <sup>Superscripted</sup>
<time>20:00</time>
<u>Underline</u>
<var>x</var> = <var>y</var> + 2
```
Here are examples of semantic text elements:
{% capture html -%}
<div>
<abbr title="Internationalization">I18N</abbr>
</div>
<div><strong>Bold</strong></div>
<div>
<strong>Bold</strong>
</div>
<div>
<cite>Citation</cite>
</div>
@@ -111,19 +85,23 @@ Here are examples of semantic text elements:
<div>
<samp>Sample</samp>
</div>
<div>Text <sub>Subscripted</sub></div>
<div>Text <sup>Superscripted</sup></div>
<div>
Text <sub>Subscript</sub>
</div>
<div>
Text <sup>Superscript</sup>
</div>
<div>
<time>20:00</time>
</div>
<div>
<u>Underline</u>
</div>
<div><var>x</var> = <var>y</var> + 2</div>
<div>
<var>x</var> = <var>y</var> + 2
</div>
{%- endcapture %}
{% include "docs/example.html" html=html vertical %}
{% include "docs/example.html" html=html %}
## Horizontal rules
@@ -144,15 +122,11 @@ Use the `hr` tag to represent a thematic break between paragraphs within one sec
</p>
</div>
{%- endcapture %}
{% include "docs/example.html" html=html vertical %}
```html
<hr />
```
{% include "docs/example.html" html=html %}
## Horizontal rules with label
You can also add a label to a horizontal rule and align it as you see fit.
You can also add a label to a horizontal rule and align it as you see fit. Centered label is the default.
{% capture html -%}
<p>
@@ -173,15 +147,22 @@ You can also add a label to a horizontal rule and align it as you see fit.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<div class="hr-text hr-text-end">
<div class="hr-text hr-text-start">
<span>Rule text</span>
</div>
<p>
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div class="hr-text hr-text-end">
<span>Rule text</span>
</div>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
{%- endcapture %}
{% include "docs/example.html" html=html raw %}
{% include "docs/example.html" html=html %}
## Optimized for different alphabets
@@ -198,45 +179,33 @@ Tabler has been optimized to correctly display content in any language. It suppo
<p>אלפבית עברי</p>
<p>อักษรไทย</p>
{%- endcapture %}
{% include "docs/example.html" html=html raw %}
{% include "docs/example.html" html=html %}
## Text transform
Transform the content of components with text capitalization classes.
{% capture html -%}
<div class="text-lowercase">Lowercased text.</div>
<div class="text-uppercase">Uppercased text.</div>
<div class="text-capitalize">Capitalized text.</div>
{%- endcapture %}
{% include "docs/example.html" html=html raw %}
```html
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
```
{%- endcapture %}
{% include "docs/example.html" html=html %}
## Letter spacing
Control the tracking (letter spacing) of an element and make it tight, wide or normal.
{% capture html -%}
<div class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</div>
<div class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</div>
<div class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</div>
{%- endcapture %}
{% include "docs/example.html" html=html raw %}
```html
<p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
<p class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p>
<p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
```
{%- endcapture %}
{% include "docs/example.html" html=html %}
## Line height
Control the leading (line height) of an element.
Control the leading (line height) of an element using the `.lh-*` classes. The line height is the vertical space between lines of text.
{% capture html -%}
<p class="lh-1">
@@ -254,15 +223,6 @@ Control the leading (line height) of an element.
{%- endcapture %}
{% include "docs/example.html" html=html %}
To control the line height of an element, use the following classes:
```html
<p class="lh-1">...</p>
<p class="lh-sm">...</p>
<p class="lh-base">...</p>
<p class="lh-lg">...</p>
```
## Antialiasing
Control the font smoothing of an element.
@@ -273,21 +233,17 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use
<div class="antialiased">Text with antialiasing</div>
<div class="subpixel-antialiased">Text without antialiasing</div>
{%- endcapture %}
{% include "docs/example.html" html=html raw %}
{% include "docs/example.html" html=html %}
## Keyboard input
Use the `<kbd>` to indicate input that is typically entered via keyboard.
{% capture html -%}
<div>To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.</div>
To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.
{%- endcapture %}
{% include "docs/example.html" html=html %}
```html
To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.
```
## Markdown elements
If you can't use the CSS classes you want, or you just want to use HTML tags, use the `.markdown` class in a container. It will apply the default styles for markdown elements.

2
docs/content/ui/getting-started/faq.md
View File

@@ -27,4 +27,4 @@ Tabler is an HTML template that can be used for any purpose. However, it is not
## How do I get notified of new Tabler versions?
You may watch the releases on GitHub, follow us on [X](https://x.com/tabler_io) or stay up to date with our [changelog]({{ site.homepage }}/changelog).
You may watch [the releases on GitHub](https://github.com/tabler/tabler/releases), follow us on [X](https://x.com/tabler_io) or stay up to date with our [changelog]({{ site.homepage }}/changelog).

33
docs/content/ui/layout/navs-tabls.md → docs/content/ui/layout/navs-tabs.md
View File

@@ -10,20 +10,6 @@ Navigation bars are essential components of modern web applications, providing u
If you want to create a horizontal navigation bar, you can use the `.nav` class. The `.nav-item` class is used to style each item within the navigation bar, and `.nav-link` is applied to the links. The `.active` class highlights the current active link, while the `.disabled` class styles non-clickable links.
```html
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
</ul>
```
Look at the example below to see how the horizontal navigation bar is displayed.
{% capture html -%}
@@ -34,9 +20,6 @@ Look at the example below to see how the horizontal navigation bar is displayed.
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
@@ -64,9 +47,6 @@ There is an example below to see how the vertical navigation bar is displayed.
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
@@ -84,7 +64,7 @@ To create a tabbed navigation interface, use the `.nav-tabs` class. This is idea
</ul>
```
Example below shows how the tabbed navigation interface is displayed.
The example below shows how the tabbed navigation interface is displayed.
{% capture html -%}
<ul class="nav nav-tabs">
@@ -94,9 +74,6 @@ Example below shows how the tabbed navigation interface is displayed.
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
@@ -106,7 +83,7 @@ Example below shows how the tabbed navigation interface is displayed.
## Pills
For a pill-shaped navigation style, use the `.nav-pills` class. This is a great choice for a sleek, modern look, especially in interactive UI components.
For a pill-shaped navigation style, use the `.nav-pills` class. This is a great choice for a sleek, modern look, especially in the interactive UI components.
{% capture html -%}
<ul class="nav nav-pills">
@@ -116,9 +93,6 @@ For a pill-shaped navigation style, use the `.nav-pills` class. This is a great
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>
@@ -138,9 +112,6 @@ To create a navigation bar with an underline effect for active links, use the `.
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>

15
docs/content/ui/plugins/flags.md
View File

@@ -28,12 +28,7 @@ To create a flag, add the `flag` class to a component and choose the country who
## Country flags
To use the flag of a particular country, add the `flag-country-(country name)` class. For example, to create a flag of Andorra, you should use the following class: `.flag-country-ad`. The full list of countries can be found below.
```html
<span class="flag flag-country-ad"></span>
<span class="flag flag-country-ae"></span>
```
To use the flag of a particular country, add the `flag-country-(country name)` class. For example, to create a flag of Andorra, you should use the following class: `.flag-country-ad`. The full list of countries can be found at the end of this page.
{% capture html -%}
<span class="flag flag-country-tg"></span>
@@ -55,14 +50,6 @@ Using Bootstrap’s typical naming structure, you can create a standard flag, or
{%- endcapture %}
{% include "docs/example.html" html=html %}
```html
<span class="flag flag-xl ..."></span>
<span class="flag flag-lg ..."></span>
<span class="flag flag-md ..."></span>
<span class="flag flag-sm ..."></span>
<span class="flag flag-xs ..."></span>
```
## Flags list
The full list of countries can be found below.

2
docs/content/ui/plugins/payments.md
View File

@@ -17,7 +17,7 @@ You can also include the plugin via CDN:
## Payment
To create a payment provider icon, add the `payment` class to a component and specify the payment provider. The full list of payment providers can be found below.
To create a payment provider icon, add the `payment` class to a component and specify the payment provider with the `payment-provider-*` class. The full list of payment providers can be found at the end of this page.
{% capture html -%}
<span class="payment payment-provider-shopify"></span>

2
docs/content/ui/plugins/social-icons.md
View File

@@ -18,7 +18,7 @@ You can also include the plugin via CDN:
## Social icons
To create a social icon, add the `social` class to a component and also add the class for the specific social app whose icon you want to use.
To create a social icon, add the `social` class to a component and provide the class `social-app-*` with the social app whose icon you want to use.
{% capture html -%}
<span class="social social-app-facebook"></span>

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

@@ -3,7 +3,7 @@
<tr>
<th class="w-1">Flag</th>
<th>Name</th>
<th class="w-1">Code</th>
<th class="w-1">Country code</th>
<th>CSS class</th>
</tr>
</thead>

5
shared/includes/docs/payments.html
View File

@@ -1,8 +1,9 @@
<table class="table table-vcenter">
<thead>
<tr>
<th class="w-1">Provider</th>
<th>Name</th>
<th class="w-1">Icon light</th>
<th class="w-1">Icon dark</th>
<th>Provider name</th>
<th>CSS class</th>
</tr>
</thead>

2
shared/includes/docs/tabs-package.html
View File

@@ -1,5 +1,5 @@
{% assign packages = 'npm,pnpm,yarn' | split: ',' -%}
<ul class="nav" id="myTab" role="tablist">
<ul class="nav nav-tabs" id="myTab" role="tablist">
{%- for package in packages -%}
<li class="nav-item" role="presentation">
<button class="nav-link{% if forloop.index == 1 %} active{% endif %}" id="{{ package }}-tab" data-bs-toggle="tab" data-bs-target="#{{ package }}" type="button" role="tab"