mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
Add documentation App (#2219)
This commit is contained in:
Paweł Kuna
GitHub
265
docs/content/ui/utilities/borders.md
Normal file
265
docs/content/ui/utilities/borders.md
Normal file
@@ -0,0 +1,265 @@
|
||||
---
|
||||
title: Borders
|
||||
summary: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
|
||||
description: Style elements with border utilities.
|
||||
---
|
||||
|
||||
## Border direction
|
||||
|
||||
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>
|
||||
<div class="border-top">2</div>
|
||||
<div class="border-end">3</div>
|
||||
<div class="border-bottom">4</div>
|
||||
<div class="border-start">5</div>
|
||||
<div class="border-x">6</div>
|
||||
<div class="border-y">7</div>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
|
||||
## Border size
|
||||
|
||||
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>
|
||||
<div class="border">2</div>
|
||||
<div class="border-wide">3</div>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Remove border
|
||||
|
||||
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>
|
||||
<div class="border border-end-0">2</div>
|
||||
<div class="border border-bottom-0">3</div>
|
||||
<div class="border border-start-0">4</div>
|
||||
<div class="border border-x-0">5</div>
|
||||
<div class="border border-y-0">6</div>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
|
||||
## Border color
|
||||
|
||||
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>
|
||||
<div class="border border-secondary">2</div>
|
||||
<div class="border border-success">3</div>
|
||||
<div class="border border-warning">4</div>
|
||||
<div class="border border-danger">5</div>
|
||||
<div class="border border-info">6</div>
|
||||
<div class="border border-dark">7</div>
|
||||
<div class="border border-light">8</div>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Border radius
|
||||
|
||||
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>
|
||||
<div class="border rounded">2</div>
|
||||
<div class="border rounded-1">3</div>
|
||||
<div class="border rounded-2">4</div>
|
||||
<div class="border rounded-3">5</div>
|
||||
<div class="border rounded-circle">6</div>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
|
||||
## 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>
|
||||
```
|
||||
64
docs/content/ui/utilities/cursors.md
Normal file
64
docs/content/ui/utilities/cursors.md
Normal file
@@ -0,0 +1,64 @@
|
||||
---
|
||||
title: Cursors
|
||||
summary: You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.
|
||||
description: Custom cursors for enhanced interaction.
|
||||
---
|
||||
|
||||
## Cursor utilities
|
||||
|
||||
Use one of the available cursor utilities depending on the action you want to indicate.
|
||||
|
||||
- `.cursor-auto`- the cursor style depends on what's inside a given element
|
||||
- `.cursor-pointer` - a pointing cursor, used to show that an element is clickable
|
||||
- `.cursor-move` - a cursor which shows that a given element can be moved
|
||||
- `.cursor-not-allowed` - a cursor which shows that a user is not allowed to perform an action on an element
|
||||
- `.cursor-zoom-in` - a cursor which shows that a user can zoom in
|
||||
- `.cursor-zoom-out` - a cursor which shows that a user can zoom out
|
||||
- `.cursor-default` - the default cursor
|
||||
- `.cursor-none` - no cursor
|
||||
- `.cursor-help` - a cursor which shows that help information is available
|
||||
- `.cursor-progress` - a cursor which shows that an action is in progress
|
||||
- `.cursor-wait` - a cursor which shows that a user cannot interact with the element because it is busy
|
||||
- `.cursor-text` - a cursor which shows that a user can type
|
||||
- `.cursor-v-text` - a cursor which shows that a user can type in a vertical text input
|
||||
- `.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
|
||||
<div class="cursor-auto">auto</div>
|
||||
<div class="cursor-pointer">pointer</div>
|
||||
<div class="cursor-move">move</div>
|
||||
<div class="cursor-not-allowed">not-allowed</div>
|
||||
<div class="cursor-zoom-in">zoom-in</div>
|
||||
<div class="cursor-zoom-out">zoom-out</div>
|
||||
<div class="cursor-default">default</div>
|
||||
<div class="cursor-none">none</div>
|
||||
<div class="cursor-help">help</div>
|
||||
<div class="cursor-progress">progress</div>
|
||||
<div class="cursor-wait">wait</div>
|
||||
<div class="cursor-text">text</div>
|
||||
<div class="cursor-v-text">vertical-text</div>
|
||||
<div class="cursor-grab">grab</div>
|
||||
<div class="cursor-grabbing">grabbing</div>
|
||||
```
|
||||
|
||||
The results can be seen in the example below.
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
5
docs/content/ui/utilities/index.md
Normal file
5
docs/content/ui/utilities/index.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Utilities
|
||||
order: 6
|
||||
description: Helper classes for layout and design.
|
||||
---
|
||||
28
docs/content/ui/utilities/interactions.md
Normal file
28
docs/content/ui/utilities/interactions.md
Normal file
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: Interactions
|
||||
summary: Utility classes that change how users interact with contents of a website.
|
||||
description: Modify user interactions efficiently.
|
||||
---
|
||||
|
||||
## Text selection
|
||||
|
||||
Change the way in which the content is selected when the user interacts with it.
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## Pointer events
|
||||
|
||||
Tabler provides `.pe-none` and `.pe-auto` classes to prevent or add element interactions.
|
||||
|
||||
{% capture html -%}
|
||||
<p>
|
||||
<a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.
|
||||
</p>
|
||||
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
242
docs/content/ui/utilities/margins.md
Normal file
242
docs/content/ui/utilities/margins.md
Normal file
@@ -0,0 +1,242 @@
|
||||
---
|
||||
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 the 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.
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
### 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>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
### 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>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
### 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>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
### 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>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
### 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>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
|
||||
### 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>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## 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>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## 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>
|
||||
```
|
||||
67
docs/content/ui/utilities/vertical-align.md
Normal file
67
docs/content/ui/utilities/vertical-align.md
Normal file
@@ -0,0 +1,67 @@
|
||||
---
|
||||
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>
|
||||
```
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
|
||||
## 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/content/ui/utilities/visually-hidden.md
Normal file
12
docs/content/ui/utilities/visually-hidden.md
Normal 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>
|
||||
```
|
||||
Reference in New Issue
Block a user