Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity

Enhance documentation (#2048)

Browse Source
This commit is contained in:
Paweł Kuna
2025-01-10 22:31:24 +01:00
committed by GitHub
parent 5cca710ac6
commit b0b07b94da
37 changed files with 1402 additions and 435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
docs/ui/utilities/borders.mdx
View File

@@ -6,17 +6,7 @@ description: Style elements with border utilities.
## Border direction
The following border utilities classes will add border to any side of an element.
```html example centered separated background="white"
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-top">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-end">3</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-bottom">4</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-start">5</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-x">6</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-y">7</div>
```
Borders can be applied to specific sides of an element using utility classes. This is particularly useful for styling individual sides of a box, such as highlighting the top border for emphasis or applying a separator between elements. Below are examples of how to set borders for each side of an element.
```html
<div class="border">1</div>
@@ -28,15 +18,20 @@ The following border utilities classes will add border to any side of an element
<div class="border-y">7</div>
```
```html example centered separated background="white"
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-top">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-end">3</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-bottom">4</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-start">5</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-x">6</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-y">7</div>
```
## Border size
Below are the available border size utilities classes.
```html example centered separated background="white"
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-0">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-wide">3</div>
```
Border size utilities allow you to control the thickness of borders, providing flexibility to suit different design needs. You can add no border, a standard border, or a wide border for a more prominent effect. These classes are especially useful for creating visual hierarchy or highlighting specific elements.
```html
<div class="border-0">1</div>
@@ -44,18 +39,15 @@ Below are the available border size utilities classes.
<div class="border-wide">3</div>
```
```html example centered separated background="white"
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-0">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border-wide">3</div>
```
## Remove border
You can remove a border on a single side of an element by using the following border utilities classes.
```html example centered separated background="white"
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-top-0">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-end-0">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-bottom-0">3</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-start-0">4</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-x-0">5</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-y-0">6</div>
```
If you want to selectively remove borders from specific sides of an element, you can use border removal utilities. This feature simplifies styling tasks, such as creating a seamless connection between elements or achieving minimalistic designs.
```html
<div class="border border-top-0">1</div>
@@ -66,20 +58,19 @@ You can remove a border on a single side of an element by using the following bo
<div class="border border-y-0">6</div>
```
```html example centered separated background="white"
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-top-0">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-end-0">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-bottom-0">3</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-start-0">4</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-x-0">5</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-y-0">6</div>
```
## Border color
You can set a border color of any side of an element by adding the following utilities classes below.
```html example centered separated background="white"
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-primary">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-secondary">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-success">3</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-warning">4</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-danger">5</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-info">6</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-dark">7</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-light">8</div>
```
Customizing the border color helps to enhance the visual appeal and consistency of your design. With utility classes, you can easily apply specific colors to borders, allowing for greater flexibility in creating visually distinct sections.
```html
<div class="border border-primary">1</div>
@@ -92,18 +83,20 @@ You can set a border color of any side of an element by adding the following uti
<div class="border border-light">8</div>
```
```html example centered separated background="white"
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-primary">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-secondary">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-success">3</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-warning">4</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-danger">5</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-info">6</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-dark">7</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border border-light">8</div>
```
## Border radius
You can set a border to any element by using the following utilities classes below.
```html example centered separated background="white"
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border rounded-0">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border rounded">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border rounded-1">3</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border rounded-2">4</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border rounded-3">5</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-5 h-5 bg-light border rounded-circle">6</div>
```
Adding border radius gives elements smooth, rounded edges, which can make designs feel more modern and approachable. You can choose from various levels of rounding, including full circles, using the available utility classes.
```html
<div class="border rounded-0">1</div>
@@ -113,3 +106,29 @@ You can set a border to any element by using the following utilities classes bel
<div class="border rounded-3">5</div>
<div class="border rounded-circle">6</div>
```
```html example centered separated background="white"
<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-0">1</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded">2</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-1">3</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-2">4</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-3">5</div>
<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-circle">6</div>
```
## Border opacity
You can adjust the opacity of borders to create subtle visual effects or to blend elements seamlessly into the background. By using border opacity utilities, you can control the transparency of borders, allowing for more creative and visually appealing designs. To change the opacity of a border, add the `border-opacity-*` class to the element.
```html
<div class="border border-success border-opacity-50">This is 50% opacity success border</div>
```
```html example
<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>
```

70
docs/ui/utilities/cursors.mdx
View File

@@ -24,56 +24,6 @@ Use one of the available cursor utilities depending on the action you want to in
- `.cursor-grab` - a cursor which shows that a user can grab an element
- `.cursor-grabbing` - a cursor which shows that a user is grabbing an element
```html example background="white" height="20rem" vcentered
<div class="row row-cards text-center">
<div class="col-2">
<div class="cursor-auto bg-light py-3">auto</div>
</div>
<div class="col-2">
<div class="cursor-pointer bg-light py-3">pointer</div>
</div>
<div class="col-2">
<div class="cursor-move bg-light py-3">move</div>
</div>
<div class="col-2">
<div class="cursor-not-allowed bg-light py-3">not-allowed</div>
</div>
<div class="col-2">
<div class="cursor-zoom-in bg-light py-3">zoom-in</div>
</div>
<div class="col-2">
<div class="cursor-zoom-out bg-light py-3">zoom-out</div>
</div>
<div class="col-2">
<div class="cursor-default bg-light py-3">default</div>
</div>
<div class="col-2">
<div class="cursor-none bg-light py-3">none</div>
</div>
<div class="col-2">
<div class="cursor-help bg-light py-3">help</div>
</div>
<div class="col-2">
<div class="cursor-progress bg-light py-3">progress</div>
</div>
<div class="col-2">
<div class="cursor-wait bg-light py-3">wait</div>
</div>
<div class="col-2">
<div class="cursor-text bg-light py-3">text</div>
</div>
<div class="col-2">
<div class="cursor-v-text bg-light py-3">vertical-text</div>
</div>
<div class="col-2">
<div class="cursor-grab bg-light py-3">grab</div>
</div>
<div class="col-2">
<div class="cursor-grabbing bg-light py-3">grabbing</div>
</div>
</div>
```
```html
<div class="cursor-auto">auto</div>
<div class="cursor-pointer">pointer</div>
@@ -91,3 +41,23 @@ Use one of the available cursor utilities depending on the action you want to in
<div class="cursor-grab">grab</div>
<div class="cursor-grabbing">grabbing</div>
```
The results can be seen in the example below.
```html example height="20rem" separated centered
<div class="cursor-auto bg-light p-3">auto</div>
<div class="cursor-pointer bg-light p-3">pointer</div>
<div class="cursor-move bg-light p-3">move</div>
<div class="cursor-not-allowed bg-light p-3">not-allowed</div>
<div class="cursor-zoom-in bg-light p-3">zoom-in</div>
<div class="cursor-zoom-out bg-light p-3">zoom-out</div>
<div class="cursor-default bg-light p-3">default</div>
<div class="cursor-none bg-light p-3">none</div>
<div class="cursor-help bg-light p-3">help</div>
<div class="cursor-progress bg-light p-3">progress</div>
<div class="cursor-wait bg-light p-3">wait</div>
<div class="cursor-text bg-light p-3">text</div>
<div class="cursor-v-text bg-light p-3">vertical-text</div>
<div class="cursor-grab bg-light p-3">grab</div>
<div class="cursor-grabbing bg-light p-3">grabbing</div>
```

4
docs/ui/utilities/interactions.mdx
View File

@@ -8,7 +8,7 @@ description: Modify user interactions efficiently.
Change the way in which the content is selected when the user interacts with it.
```html example
```html example columns={1} centered separated
<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
@@ -18,7 +18,7 @@ Change the way in which the content is selected when the user interacts with it.
Tabler provides `.pe-none` and `.pe-auto` classes to prevent or add element interactions.
```html example
```html example columns={1} centered separated
<p>
<a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.
</p>

234
docs/ui/utilities/margins.mdx Normal file
View File

@@ -0,0 +1,234 @@
---
title: Margins
summary: Use margin utilities to control the space between elements.
description: Control the space between elements with margin utilities.
---
Margin utilities allow you to control the space between elements, providing flexibility to suit different design needs. These utilities are especially useful for creating spacing between components or aligning them consistently. Below are examples of how to use margin utilities for various directions and sizes.
### Margin size
In table below you can see the available margin sizes.
Name|Value
-|-
0|0
1|0.25rem
2|0.5rem
3|1rem
4|1.5rem
5|2rem
6|3rem
7|5rem
8|8rem
### Margin
Use the `.m-*` utilities to control the margin of an element. Margin utilities are used to create consistent spacing around an element, ensuring that the layout is visually balanced.
```html example hide-code centered separated vertical
<div class="d-flex">
<div class="bg-purple-lt">
<div class="px-3 py-2 m-0 bg-purple rounded text-white font-monospace">.m-0</div>
</div>
</div>
<div class="d-flex">
<div class="bg-purple-lt">
<div class="px-3 py-2 m-4 bg-purple rounded text-white font-monospace">.m-4</div>
</div>
</div>
<div class="d-flex">
<div class="bg-purple-lt">
<div class="px-3 py-2 m-8 bg-purple rounded text-white font-monospace">.m-8</div>
</div>
</div>
```
### Start margin
Start margins control the spacing to the left of an element, helping to create consistent horizontal gaps between elements. Start margin class names are prefixed with `ms-`.
```html
<div class="ms-4">...</div>
```
```html example hide-code centered separated vertical
<div class="d-flex">
<div class="bg-red-lt">
<div class="px-3 py-2 ms-0 bg-red rounded text-white font-monospace">.ms-0</div>
</div>
</div>
<div class="d-flex">
<div class="bg-red-lt">
<div class="px-3 py-2 ms-4 bg-red rounded text-white font-monospace">.ms-4</div>
</div>
</div>
<div class="d-flex">
<div class="bg-red-lt">
<div class="px-3 py-2 ms-8 bg-red rounded text-white font-monospace">.ms-8</div>
</div>
</div>
```
### End margin
End margins control the spacing on the right side of an element. These utilities are helpful for creating visual separation between elements that flow horizontally. End margin class names are prefixed with `me-`.
```html
<div class="me-4">...</div>
```
```html example hide-code centered separated vertical
<div class="d-flex">
<div class="bg-orange-lt">
<div class="px-3 py-2 ms-0 bg-orange rounded text-white font-monospace">.me-0</div>
</div>
</div>
<div class="d-flex">
<div class="bg-orange-lt">
<div class="px-3 py-2 me-4 bg-orange rounded text-white font-monospace">.me-4</div>
</div>
</div>
<div class="d-flex">
<div class="bg-orange-lt">
<div class="px-3 py-2 me-8 bg-orange rounded text-white font-monospace">.me-8</div>
</div>
</div>
```
### Top margin
Top margins define the spacing above an element. This is useful for separating stacked components or creating vertical spacing between sections. Top margin class names are prefixed with `mt-`.
```html
<div class="mt-4">...</div>
```
```html example hide-code centered separated vertical
<div class="d-flex">
<div class="bg-yellow-lt">
<div class="px-3 py-2 mt-0 bg-yellow rounded text-white font-monospace">.mt-0</div>
</div>
</div>
<div class="d-flex">
<div class="bg-yellow-lt">
<div class="px-3 py-2 mt-4 bg-yellow rounded text-white font-monospace">.mt-4</div>
</div>
</div>
<div class="d-flex">
<div class="bg-yellow-lt">
<div class="px-3 py-2 mt-8 bg-yellow rounded text-white font-monospace">.mt-8</div>
</div>
</div>
```
### Bottom margin
Bottom margins control the spacing below an element, helping to create consistent vertical gaps between stacked elements. Bottom margin class names are prefixed with `mb-`.
```html
<div class="mb-4">...</div>
```
```html example hide-code centered separated vertical
<div class="d-flex">
<div class="bg-lime-lt">
<div class="px-3 py-2 mb-0 bg-lime rounded text-white font-monospace">.mb-0</div>
</div>
</div>
<div class="d-flex">
<div class="bg-lime-lt">
<div class="px-3 py-2 mb-4 bg-lime rounded text-white font-monospace">.mb-4</div>
</div>
</div>
<div class="d-flex">
<div class="bg-lime-lt">
<div class="px-3 py-2 mb-8 bg-lime rounded text-white font-monospace">.mb-8</div>
</div>
</div>
```
### Horizontal margin
Use the `mx-*` utilities to control the horizontal margin of an element. Horizontal margin utilities are used to create consistent spacing between elements that flow horizontally.
```html
<div class="mx-4">...</div>
```
```html example hide-code centered separated vertical
<div class="d-flex">
<div class="bg-azure-lt">
<div class="px-3 py-2 mx-0 bg-azure rounded text-white font-monospace">.mx-0</div>
</div>
</div>
<div class="d-flex">
<div class="bg-azure-lt">
<div class="px-3 py-2 mx-4 bg-azure rounded text-white font-monospace">.mx-4</div>
</div>
</div>
<div class="d-flex">
<div class="bg-azure-lt">
<div class="px-3 py-2 mx-8 bg-azure rounded text-white font-monospace">.mx-8</div>
</div>
</div>
```
### Vertical margin
Use the `my-*` utilities to control the vertical margin of an element. Vertical margin utilities are used to create consistent spacing between elements that flow vertically.
```html
<div class="my-4">...</div>
```
```html example hide-code centered separated vertical
<div class="d-flex">
<div class="bg-blue-lt">
<div class="px-3 py-2 my-0 bg-blue rounded text-white font-monospace">.my-0</div>
</div>
</div>
<div class="d-flex">
<div class="bg-blue-lt">
<div class="px-3 py-2 my-4 bg-blue rounded text-white font-monospace">.my-4</div>
</div>
</div>
<div class="d-flex">
<div class="bg-blue-lt">
<div class="px-3 py-2 my-8 bg-blue rounded text-white font-monospace">.my-8</div>
</div>
</div>
```
## Horizontal centering
Additionally, Tabler also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a width set—by setting the horizontal margins to `auto`.
```html
<div class="mx-auto">...</div>
```
```html example hide-code centered vertical
<div class="bg-teal-lt w-100 d-flex">
<div class="px-3 py-2 mx-auto bg-teal rounded text-white font-monospace">.mx-auto</div>
</div>
```
## Gap
Use the `.gap-*` utilities to control the space between elements in a grid layout. The gap utilities are used to create consistent spacing between grid items, ensuring that the layout is visually balanced.
```html
<div class="d-grid gap-6">...</div>
```
```html example
<div class="d-grid gap-6 bg-indigo-lt">
<div class="px-3 py-2 bg-indigo text-white rounded">Grid item 1</div>
<div class="px-3 py-2 bg-indigo text-white rounded">Grid item 2</div>
<div class="px-3 py-2 bg-indigo text-white rounded">Grid item 3</div>
</div>
```

66
docs/ui/utilities/vertical-align.mdx Normal file
View File

@@ -0,0 +1,66 @@
---
title: Vertical align
description: Quickly and easily align elements vertically with utility classes.
summary: Easily modify the vertical alignment of elements such as inline, inline-block, inline-table, and table-cell to ensure proper positioning and alignment within their parent containers, allowing for more precise control over your layout and design.
---
Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed.
## Inline elements
Use vertical alignment utilities to align inline-level elements relative to their surrounding text or baseline. These classes are particularly useful for aligning small inline elements like icons or badges alongside text.
```html
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
```
```html example centered
<div>
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
</div>
```
## Table cells
Vertical alignment utilities are also applicable to table cells, allowing you to control the alignment of content within a cell. This is especially useful for creating well-structured and visually appealing tables where the content aligns consistently across rows and columns.
```html
<table>
<tbody>
<tr>
<td class="align-baseline">baseline</td>
<td class="align-top">top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
<td class="align-text-top">text-top</td>
<td class="align-text-bottom">text-bottom</td>
</tr>
</tbody>
</table>
```
```html example
<table style="height: 100px;">
<tbody>
<tr>
<td class="align-baseline">baseline</td>
<td class="align-top">top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
<td class="align-text-top">text-top</td>
<td class="align-text-bottom">text-bottom</td>
</tr>
</tbody>
</table>
```

12
docs/ui/utilities/visually-hidden.mdx Normal file
View File

@@ -0,0 +1,12 @@
---
title: Visually hidden
summary: Use these helpers to visually hide elements but keep them accessible to assistive technologies.
---
Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus.
```html
<h2 class="visually-hidden">Title for screen readers</h2>
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>
```