mirror of
https://github.com/tabler/tabler.git
synced 2026-08-08 12:22:23 +04:00
Enhance documentation with descriptions and summaries for various UI and icon sections
This commit is contained in:
codecalm
+2
-93
@@ -1,101 +1,10 @@
|
||||
---
|
||||
title: Tabler Icons
|
||||
description: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customisation options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
|
||||
summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customisation options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
|
||||
order: 2
|
||||
description: Over 5000 pixel-perfect icons for web design and development
|
||||
---
|
||||
|
||||
```html example centered separated
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-ghost" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7"></path>
|
||||
<path d="M10 10l.01 0"></path>
|
||||
<path d="M14 10l.01 0"></path>
|
||||
<path d="M10 14a3.5 3.5 0 0 0 4 0"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-star" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-yin-yang" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
|
||||
<path d="M12 3a4.5 4.5 0 0 0 0 9a4.5 4.5 0 0 1 0 9"></path>
|
||||
<circle cx="12" cy="7.5" r=".5" fill="currentColor"></circle>
|
||||
<circle cx="12" cy="16.5" r=".5" fill="currentColor"></circle>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
|
||||
</svg>
|
||||
```
|
||||
|
||||
## Customize stroke
|
||||
|
||||
The `stroke-width` property is a powerful tool for customizing icons. This property allows you to control the thickness of the stroke used to outline an icon, giving you precise control over its appearance. By adjusting the `stroke-width` property, you can make an icon more or less prominent, change its emphasis, or create unique visual effects. For example, a thinner stroke may be ideal for icons with intricate designs or fine details, while a thicker stroke can add visual weight and impact to simpler, bolder icons.
|
||||
|
||||
All icons are designed by default with `2px` stroke.
|
||||
|
||||
```html example centered separated
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-cherry" width="24" height="24" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="stroke-width: 1">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0"></path>
|
||||
<path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
||||
<path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6"></path>
|
||||
<path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9"></path>
|
||||
<path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-cherry" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="stroke-width: 1.5">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0"></path>
|
||||
<path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
||||
<path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6"></path>
|
||||
<path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9"></path>
|
||||
<path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-cherry" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" style="stroke-width: 2">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M7.5 16.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0"></path>
|
||||
<path d="M17 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
|
||||
<path d="M9 13c.366 -2 1.866 -3.873 4.5 -5.6"></path>
|
||||
<path d="M17 15c-1.333 -2.333 -2.333 -5.333 -1 -9"></path>
|
||||
<path d="M5 6c3.667 -2.667 7.333 -2.667 11 0c-3.667 2.667 -7.333 2.667 -11 0"></path>
|
||||
</svg>
|
||||
```
|
||||
|
||||
```html
|
||||
<svg stroke-width="1" ...>
|
||||
...
|
||||
</svg>
|
||||
<svg stroke-width="1.5" ...>
|
||||
...
|
||||
</svg>
|
||||
<svg stroke-width="2" ...>
|
||||
...
|
||||
</svg>
|
||||
```
|
||||
|
||||
## Filled version of icons
|
||||
|
||||
```html example centered separated
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-bell-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M14.235 19c.865 0 1.322 1.024 .745 1.668a3.992 3.992 0 0 1 -2.98 1.332a3.992 3.992 0 0 1 -2.98 -1.332c-.552 -.616 -.158 -1.579 .634 -1.661l.11 -.006h4.471z" stroke-width="0" fill="currentColor"></path>
|
||||
<path d="M12 2c1.358 0 2.506 .903 2.875 2.141l.046 .171l.008 .043a8.013 8.013 0 0 1 4.024 6.069l.028 .287l.019 .289v2.931l.021 .136a3 3 0 0 0 1.143 1.847l.167 .117l.162 .099c.86 .487 .56 1.766 -.377 1.864l-.116 .006h-16c-1.028 0 -1.387 -1.364 -.493 -1.87a3 3 0 0 0 1.472 -2.063l.021 -.143l.001 -2.97a8 8 0 0 1 3.821 -6.454l.248 -.146l.01 -.043a3.003 3.003 0 0 1 2.562 -2.29l.182 -.017l.176 -.004z" stroke-width="0" fill="currentColor"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-diamond-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M18 4a1 1 0 0 1 .783 .378l.074 .108l3 5a1 1 0 0 1 -.032 1.078l-.08 .103l-8.53 9.533a1.7 1.7 0 0 1 -1.215 .51c-.4 0 -.785 -.14 -1.11 -.417l-.135 -.126l-8.5 -9.5a1 1 0 0 1 -.172 -1.067l.06 -.115l3.013 -5.022l.064 -.09a.982 .982 0 0 1 .155 -.154l.089 -.064l.088 -.05l.05 -.023l.06 -.025l.109 -.032l.112 -.02l.117 -.005h12zm-8.886 3.943a1 1 0 0 0 -1.371 .343l-.6 1l-.06 .116a1 1 0 0 0 .177 1.07l2 2.2l.09 .088a1 1 0 0 0 1.323 -.02l.087 -.09a1 1 0 0 0 -.02 -1.323l-1.501 -1.65l.218 -.363l.055 -.103a1 1 0 0 0 -.398 -1.268z" stroke-width="0" fill="currentColor"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-discount-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M12.01 2.011a3.2 3.2 0 0 1 2.113 .797l.154 .145l.698 .698a1.2 1.2 0 0 0 .71 .341l.135 .008h1a3.2 3.2 0 0 1 3.195 3.018l.005 .182v1c0 .27 .092 .533 .258 .743l.09 .1l.697 .698a3.2 3.2 0 0 1 .147 4.382l-.145 .154l-.698 .698a1.2 1.2 0 0 0 -.341 .71l-.008 .135v1a3.2 3.2 0 0 1 -3.018 3.195l-.182 .005h-1a1.2 1.2 0 0 0 -.743 .258l-.1 .09l-.698 .697a3.2 3.2 0 0 1 -4.382 .147l-.154 -.145l-.698 -.698a1.2 1.2 0 0 0 -.71 -.341l-.135 -.008h-1a3.2 3.2 0 0 1 -3.195 -3.018l-.005 -.182v-1a1.2 1.2 0 0 0 -.258 -.743l-.09 -.1l-.697 -.698a3.2 3.2 0 0 1 -.147 -4.382l.145 -.154l.698 -.698a1.2 1.2 0 0 0 .341 -.71l.008 -.135v-1l.005 -.182a3.2 3.2 0 0 1 3.013 -3.013l.182 -.005h1a1.2 1.2 0 0 0 .743 -.258l.1 -.09l.698 -.697a3.2 3.2 0 0 1 2.269 -.944zm3.697 7.282a1 1 0 0 0 -1.414 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-lg icon-tabler icon-tabler-shield-check-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M11.998 2l.118 .007l.059 .008l.061 .013l.111 .034a.993 .993 0 0 1 .217 .112l.104 .082l.255 .218a11 11 0 0 0 7.189 2.537l.342 -.01a1 1 0 0 1 1.005 .717a13 13 0 0 1 -9.208 16.25a1 1 0 0 1 -.502 0a13 13 0 0 1 -9.209 -16.25a1 1 0 0 1 1.005 -.717a11 11 0 0 0 7.531 -2.527l.263 -.225l.096 -.075a.993 .993 0 0 1 .217 -.112l.112 -.034a.97 .97 0 0 1 .119 -.021l.115 -.007zm3.71 7.293a1 1 0 0 0 -1.415 0l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.32 1.497l2 2l.094 .083a1 1 0 0 0 1.32 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z" stroke-width="0" fill="currentColor"></path>
|
||||
</svg>
|
||||
```
|
||||
|
||||
## Browse icons
|
||||
|
||||
Tabler Icons is a comprehensive icon library that features over <IconsCount rounded /> high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
---
|
||||
title: Libraries
|
||||
description: Explore Tabler Icons libraries.
|
||||
summary: The libraries section offers various integrations of Tabler Icons for popular frameworks and technologies, making it easy to incorporate icons into any project.
|
||||
---
|
||||
@@ -1,5 +1,7 @@
|
||||
---
|
||||
title: Tabler Icons for Preact
|
||||
title: Preact
|
||||
description: Tabler Icons library for Preact framework.
|
||||
summary: Tabler Icons for Preact provides an optimized collection of icons specifically designed for use with Preact. These lightweight and scalable icons are easy to integrate into Preact-based projects.
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
---
|
||||
title: Tabler Icons for React
|
||||
title: React
|
||||
description: Tabler Icons library for React framework.
|
||||
summary: Tabler Icons for React offers a robust set of icons tailored for React applications, providing developers with a seamless way to enhance their user interfaces with high-quality, scalable graphics.
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
---
|
||||
title: Tabler Icons for SolidJS
|
||||
title: SolidJS
|
||||
description: Tabler Icons library for SolidJS framework.
|
||||
summary: Tabler Icons for SolidJS is a lightweight library offering a vast selection of high-quality icons. It is designed for seamless integration with SolidJS, enabling developers to build visually appealing interfaces.
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
---
|
||||
title: Tabler Icons for Svelte
|
||||
title: Svelte
|
||||
description: Tabler Icons library for Svelte framework.
|
||||
summary: Tabler Icons for Svelte provides a clean and efficient way to use Tabler's comprehensive icon set in Svelte applications, helping developers deliver polished, user-friendly designs.
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
---
|
||||
title: Tabler Icons for Vue
|
||||
title: Vue
|
||||
description: Tabler Icons library for Vue framework.
|
||||
summary: Tabler Icons for Vue offers a collection of customizable and scalable icons designed for use in Vue applications, providing a powerful tool for creating modern and engaging interfaces.
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
---
|
||||
title: Webfont
|
||||
description: Tabler Icons as a webfont.
|
||||
summary: Tabler Icons as a webfont allows you to easily include icons in your projects using simple CSS classes, offering a lightweight and scalable solution for web development.
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
---
|
||||
title: Figma plugin
|
||||
description: Use Tabler Icons directly in Figma.
|
||||
summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler Icons into their Figma projects, providing quick access to a vast library of customizable icons that enhance the design workflow.
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
---
|
||||
title: Plugins
|
||||
description: Icon plugins for seamless integration.
|
||||
---
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: EPS version
|
||||
description: Download Tabler Icons in EPS format.
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
---
|
||||
title: Static files
|
||||
description: Download static file formats of icons.
|
||||
summary: Static files provide multiple formats of Tabler Icons, including EPS, PDF, PNG, and SVG, offering flexibility for different design and development workflows.
|
||||
---
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: PDF version
|
||||
description: Download Tabler Icons in PDF format.
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: PNG version
|
||||
description: Download Tabler Icons in PNG format.
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: SVG version
|
||||
description: Download Tabler Icons in SVG format.
|
||||
---
|
||||
|
||||
|
||||
|
||||
+5
-3
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Welcome to Tabler Docs
|
||||
title: Welcome to Tabler Documentation
|
||||
summary: Tabler Docs provides a comprehensive guide to help you get started with the Tabler ecosystem, including its UI components, plugins, and icons. Explore detailed documentation to understand and leverage the full potential of Tabler in your projects.
|
||||
---
|
||||
|
||||
<ResponsiveImage src="/docs/tabler.png" src-dark="/docs/tabler-dark.png" alt="Tabler" width="816" height="620" className="mb-4" />
|
||||
@@ -9,6 +10,7 @@ Find all the guides and resources you need to develop with Tabler and our other
|
||||
<Cards>
|
||||
<Card title="UI Components" href="/docs/ui" icon="paint">Free and open source web application UI kit based on Bootstrap</Card>
|
||||
<Card title="Icons" href="/docs/icons" icon="ghost"><IconsCount /> pixel-perfect icons for web design and development</Card>
|
||||
<Card title="Illustrations" href="/docs/illustrations" icon="brand-figma" disabled><IllustrationsCount /> customizable SVG illustrations for your web project</Card>
|
||||
<Card title="Email Templates" href="/docs/emails" icon="mail" disabled><EmailsCount /> responsive email templates for your project</Card>
|
||||
<Card title="Illustrations" icon="brand-figma" disabled badge="Comming soon"><IllustrationsCount /> customizable SVG illustrations for your web project</Card>
|
||||
<Card title="Email Templates" icon="mail" disabled badge="Comming soon"><EmailsCount /> responsive email templates ready to use in your marketing campaigns</Card>
|
||||
<Card title="Avatars" icon="user-circle" disabled badge="Comming soon">Package of over 100 avatars for your next web project</Card>
|
||||
</Cards>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Colors
|
||||
description: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.
|
||||
summary: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out.
|
||||
bootstrapLink: utilities/colors/
|
||||
description: Impact of colors on user interface design.
|
||||
---
|
||||
|
||||
## Base colors
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
---
|
||||
title: Base
|
||||
order: 2
|
||||
description: Foundational elements for UI design.
|
||||
summary: The base section includes foundational elements such as colors, typography, and spacing that form the building blocks of a cohesive and consistent user interface.
|
||||
---
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Typography
|
||||
description: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
|
||||
summary: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
|
||||
bootstrapLink: content/typography/
|
||||
description: Role of typography in interface design.
|
||||
---
|
||||
|
||||
## Headings
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Alerts
|
||||
description: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.
|
||||
summary: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app.
|
||||
bootstrapLink: components/alerts/
|
||||
description: Alert messages for user notifications.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Autosize
|
||||
description: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
|
||||
summary: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
|
||||
libs: autosize
|
||||
description: Auto-adjusting textarea for better usability.
|
||||
---
|
||||
|
||||
To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Avatars
|
||||
description: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.
|
||||
summary: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media.
|
||||
description: Personalize UI with user avatars.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Badges
|
||||
description: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
|
||||
summary: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info.
|
||||
description: Add extra information with badges.
|
||||
bootstrapLink: components/badge/
|
||||
---
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
description: Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.
|
||||
summary: Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure.
|
||||
bootstrapLink: components/breadcrumb/
|
||||
description: Navigation aid for better structure.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Buttons
|
||||
description: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
|
||||
summary: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more.
|
||||
bootstrapLink: components/buttons/
|
||||
description: Customizable buttons for user actions.
|
||||
---
|
||||
|
||||
## Button tag
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Cards
|
||||
description: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
|
||||
summary: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content.
|
||||
bootstrapLink: components/card/
|
||||
description: Organize content with flexible cards.
|
||||
---
|
||||
|
||||
## Default card
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Carousel
|
||||
description: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.
|
||||
summary: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.
|
||||
bootstrapLink: components/carousel/
|
||||
description: Display visual content with carousels.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Charts
|
||||
libs: apexcharts
|
||||
description: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
|
||||
summary: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
|
||||
description: Interactive data visualizations with ApexCharts.
|
||||
---
|
||||
|
||||
To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Countup
|
||||
description: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
|
||||
summary: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
|
||||
libs: countup
|
||||
description: Display numbers dynamically with countups.
|
||||
---
|
||||
|
||||
To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Data grid
|
||||
description: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
|
||||
summary: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
|
||||
description: Detailed product information in grids.
|
||||
---
|
||||
|
||||
```html example vcentered height="460px"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Divider
|
||||
description: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
|
||||
bootstrapLink: components/dropdowns/#dividers
|
||||
summary: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
|
||||
description: Separate content with clear dividers.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Dropdowns
|
||||
description: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
|
||||
summary: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear.
|
||||
bootstrapLink: components/dropdowns
|
||||
description: Organize options with dropdown menus.
|
||||
---
|
||||
|
||||
## Default dropdown
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Dropzone
|
||||
description: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people.
|
||||
summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people.
|
||||
description: Drag-and-drop file upload tool.
|
||||
---
|
||||
|
||||
## Default Dropzone
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Empty states
|
||||
description: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.
|
||||
summary: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app.
|
||||
description: Engage users in empty or error screens.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Icons
|
||||
description: Use one of over 3000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
|
||||
summary: Use one of over 3000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects.
|
||||
banner: icons
|
||||
description: Enhance dashboards with custom icons.
|
||||
---
|
||||
|
||||
## Base icon
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
---
|
||||
title: Components
|
||||
order: 4
|
||||
description: Various components to enhance UI.
|
||||
summary: Tabler UI includes a variety of components to help you build web applications that are both functional and visually appealing. From buttons and cards to modals and navigation, these components provide a wide range of features to enhance your site.
|
||||
---
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Inline player
|
||||
libs: plyr
|
||||
description: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
|
||||
summary: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
|
||||
description: Lightweight media player for websites.
|
||||
---
|
||||
|
||||
## Sample demo
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Modals
|
||||
description: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
|
||||
summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
|
||||
description: Dialogs for notifications and content.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Placeholder
|
||||
description: Placeholder is used to reserve space for content that soon will appear in a layout.
|
||||
summary: Placeholder is used to reserve space for content that soon will appear in a layout.
|
||||
description: Reserve space for upcoming content.
|
||||
---
|
||||
|
||||
## Placeholder line
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Popovers
|
||||
description: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
|
||||
summary: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
|
||||
bootstrapLink: components/popovers
|
||||
description: Provide extra information with popovers.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Progress bars
|
||||
description: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
|
||||
summary: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated.
|
||||
bootstrapLink: components/progress
|
||||
description: Track and display progress visually.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
---
|
||||
title: Range slider
|
||||
libs: nouislider
|
||||
description: Adjust values with range sliders.
|
||||
summary: Range sliders allow users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.
|
||||
---
|
||||
|
||||
To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Ribbons
|
||||
description: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
|
||||
summary: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out.
|
||||
description: Highlight elements with graphical ribbons.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Spinners
|
||||
description: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
|
||||
summary: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete.
|
||||
bootstrapLink: components/spinners/
|
||||
description: Indicate loading state with spinners.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Statuses
|
||||
description: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.
|
||||
summary: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space.
|
||||
description: Highlight interface elements with status dots.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Steps
|
||||
description: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
|
||||
summary: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.
|
||||
new: true
|
||||
description: Simplify complex processes with steps.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Switch icon
|
||||
description: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.
|
||||
summary: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.
|
||||
banner: icons
|
||||
description: Transition between two icons smoothly.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Tables
|
||||
description: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
|
||||
summary: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity.
|
||||
bootstrapLink: content/tables/
|
||||
description: Visualize data clearly with tables.
|
||||
---
|
||||
|
||||
## Basic Table
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Tabs
|
||||
description: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.
|
||||
summary: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate.
|
||||
bootstrapLink: components/navs/
|
||||
description: Organize content with interactive tabs.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Timelines
|
||||
description: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.
|
||||
summary: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.
|
||||
description: Visualize events and processes clearly.
|
||||
---
|
||||
|
||||
## Timeline
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: TinyMCE
|
||||
libs: tinymce
|
||||
description: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. TinyMCE can handle any challenge, from the most simple implementation through to the most complex use case.
|
||||
summary: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. TinyMCE can handle any challenge, from the most simple implementation through to the most complex use case.
|
||||
description: Flexible WYSIWYG editor for content.
|
||||
---
|
||||
|
||||
[TinyMCE](https://www.tiny.cloud/docs/) documentation.
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Toasts
|
||||
description: Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.
|
||||
summary: Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.
|
||||
bootstrapLink: components/toasts/
|
||||
description: Display lightweight alert notifications.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Tooltips
|
||||
description: Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software.
|
||||
summary: Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software.
|
||||
bootstrapLink: components/tooltips/
|
||||
description: Guide users with informative tooltips.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Tracking
|
||||
description: Component for visualising activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience.
|
||||
summary: Component for visualising activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience.
|
||||
description: Monitor data activity visually.
|
||||
---
|
||||
|
||||
## Basic example
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Color check
|
||||
description: The color check is a great way to make your form more user-friendly and engaging. You can use the color check to create a visually appealing form that will help users make decisions quickly and easily.
|
||||
summary: The color check is a great way to make your form more user-friendly and engaging. You can use the color check to create a visually appealing form that will help users make decisions quickly and easily.
|
||||
description: Enhance forms with color checks.
|
||||
---
|
||||
|
||||
Your input controls can come in a variety of colors, depending on your preferences. Click [here](/docs/ui/base/colors) to see the list of available colors.
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
---
|
||||
title: Form elements
|
||||
description: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
|
||||
summary: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
|
||||
bootstrapLink: components/forms/
|
||||
libs: nouislider
|
||||
description: Design user-friendly and effective forms.
|
||||
order: 1
|
||||
---
|
||||
|
||||
## Classic inputs
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Form fieldset
|
||||
description: By grouping form elements together with the fieldset element, you can improve the organization and accessibility of your forms, making it easier for users to understand the purpose of each input and provide accurate information.
|
||||
summary: By grouping form elements together with the fieldset element, you can improve the organization and accessibility of your forms, making it easier for users to understand the purpose of each input and provide accurate information.
|
||||
description: Group form elements for clarity.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Form helpers
|
||||
description: Use form helpers to provide additional information about a form element. You can use input help, required field, form hint, and additional info inside the label.
|
||||
summary: Use form helpers to provide additional information about a form element. You can use input help, required field, form hint, and additional info inside the label.
|
||||
description: Provide additional guidance in forms.
|
||||
---
|
||||
|
||||
## Input help
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Image check
|
||||
description: The image check is a great way to make your form more user-friendly and engaging. You can use the image check to create a visually appealing form that will help users make decisions quickly and easily.
|
||||
summary: The image check is a great way to make your form more user-friendly and engaging. You can use the image check to create a visually appealing form that will help users make decisions quickly and easily.
|
||||
description: Add visual appeal to forms with images.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Input mask
|
||||
description: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
|
||||
summary: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
|
||||
description: Clarify input formats for users.
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Form selectgroup
|
||||
description: Use selectgroup to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectgroup with a label, use icons only or icons with labels. Alternatively, you can use pill selectgroup if they go well with your design.
|
||||
summary: Use selectgroup to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectgroup with a label, use icons only or icons with labels. Alternatively, you can use pill selectgroup if they go well with your design.
|
||||
description: Improve form UX with select groups.
|
||||
---
|
||||
|
||||
## Simple selectgroup
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Validation states
|
||||
description: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
|
||||
summary: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
|
||||
description: Indicate valid or invalid inputs.
|
||||
---
|
||||
|
||||
## Validation states
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
---
|
||||
title: Forms
|
||||
order: 5
|
||||
description: Build and manage web forms.
|
||||
summary: The forms section provides a collection of components and tools for creating user-friendly and accessible forms, enhancing user interaction and improving data collection.
|
||||
---
|
||||
@@ -1,5 +1,7 @@
|
||||
---
|
||||
title: Browser Support
|
||||
description: Check browser compatibility for Tabler.
|
||||
summaty: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms.
|
||||
---
|
||||
|
||||
As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones.
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Customize Tabler
|
||||
description: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.
|
||||
summary: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.
|
||||
description: Adjust fonts, colors, and styles.
|
||||
---
|
||||
|
||||
## Custom Google Font
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Download
|
||||
description: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.
|
||||
summary: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.
|
||||
description: Get Tabler CSS, JS, and source code.
|
||||
---
|
||||
|
||||
## CDN via jsDelivr
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: FAQ
|
||||
description: Answers to the most frequently asked questions.
|
||||
summary: Answers to the most frequently asked questions.
|
||||
description: Common questions and answers.
|
||||
---
|
||||
|
||||
## I found an issue, what can I do?
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: Free and open-source HTML Dashboard UI Kit built on Bootstrap
|
||||
summary: Free and open-source HTML Dashboard UI Kit built on Bootstrap
|
||||
order: 1
|
||||
description: Overview of Tabler UI Kit.
|
||||
---
|
||||
|
||||
## What is Tabler?
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
---
|
||||
title: Tabler UI
|
||||
order: 1
|
||||
description: Free and open source web application UI kit based on Bootstrap
|
||||
summary: Tabler UI is a carefully crafted collection of modern and responsive user interface components. Built on top of Bootstrap, it helps developers create stunning and functional web applications quickly and efficiently.
|
||||
---
|
||||
@@ -1,4 +1,6 @@
|
||||
---
|
||||
title: Layout
|
||||
order: 3
|
||||
description: Structure your UI effectively.
|
||||
summary: The layout section covers essential tools and techniques for structuring content and organizing UI elements, helping you build visually appealing and functional designs.
|
||||
---
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Page headers
|
||||
description: Page heading examples for Tabler
|
||||
summary: Page heading examples for Tabler
|
||||
description: Examples of Tabler page headers.
|
||||
---
|
||||
|
||||
## Simple header
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Page layouts
|
||||
description: Learn how to build a sample version of the dashboard
|
||||
summary: Learn how to build a sample version of the dashboard
|
||||
description: Learn to design dashboard layouts.
|
||||
---
|
||||
|
||||
<Callout>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Flags
|
||||
description: Thanks to the Tabler flags plugin, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.
|
||||
summary: Thanks to the Tabler flags plugin, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.
|
||||
plugin: flags
|
||||
libs: tabler-flags
|
||||
description: Visual representation of countries/languages.
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
---
|
||||
title: Plugins
|
||||
order: 7
|
||||
description: Enhance Tabler UI with useful plugins.
|
||||
summary: Tabler plugins extend the functionality of the framework, providing additional tools and features to enhance your projects and streamline the development process.
|
||||
---
|
||||
@@ -1,7 +1,8 @@
|
||||
---
|
||||
title: Payments
|
||||
description: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly.
|
||||
summary: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly.
|
||||
plugin: payments
|
||||
description: User-friendly payment provider icons.
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Social Icons
|
||||
description: Social icons are a great way to make your website more engaging and user-friendly. You can use social icons to help users quickly find your social media profiles and connect with you.
|
||||
summary: Social icons are a great way to make your website more engaging and user-friendly. You can use social icons to help users quickly find your social media profiles and connect with you.
|
||||
plugin: socials
|
||||
libs: tabler-socials
|
||||
description: Connect users to your social profiles.
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Borders
|
||||
description: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
|
||||
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
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Cursors
|
||||
description: 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.
|
||||
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
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Utilities
|
||||
order: 6
|
||||
description: Helper classes for layout and design.
|
||||
---
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Interactions
|
||||
description: Utility classes that change how users interact with contents of a website.
|
||||
summary: Utility classes that change how users interact with contents of a website.
|
||||
description: Modify user interactions efficiently.
|
||||
---
|
||||
|
||||
## Text selection
|
||||
|
||||
Reference in New Issue
Block a user