mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Add initial documentation for UI components, utilities, and plugins
This commit is contained in:
codecalm
4
docs/_includes/logo.html
Normal file
4
docs/_includes/logo.html
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="110" height="32" viewBox="0 0 232 68" class="navbar-brand-image">
|
||||
<path d="M64.6 16.2C63 9.9 58.1 5 51.8 3.4 40 1.5 28 1.5 16.2 3.4 9.9 5 5 9.9 3.4 16.2 1.5 28 1.5 40 3.4 51.8 5 58.1 9.9 63 16.2 64.6c11.8 1.9 23.8 1.9 35.6 0C58.1 63 63 58.1 64.6 51.8c1.9-11.8 1.9-23.8 0-35.6zM33.3 36.3c-2.8 4.4-6.6 8.2-11.1 11-1.5.9-3.3.9-4.8.1s-2.4-2.3-2.5-4c0-1.7.9-3.3 2.4-4.1 2.3-1.4 4.4-3.2 6.1-5.3-1.8-2.1-3.8-3.8-6.1-5.3-2.3-1.3-3-4.2-1.7-6.4s4.3-2.9 6.5-1.6c4.5 2.8 8.2 6.5 11.1 10.9 1 1.4 1 3.3.1 4.7zM49.2 46H37.8c-2.1 0-3.8-1-3.8-3s1.7-3 3.8-3h11.4c2.1 0 3.8 1 3.8 3s-1.7 3-3.8 3z" fill="#066fd1" style="fill: var(--tblr-primary, #066fd1)"></path>
|
||||
<path d="M105.8 46.1c.4 0 .9.2 1.2.6s.6 1 .6 1.7c0 .9-.5 1.6-1.4 2.2s-2 .9-3.2.9c-2 0-3.7-.4-5-1.3s-2-2.6-2-5.4V31.6h-2.2c-.8 0-1.4-.3-1.9-.8s-.9-1.1-.9-1.9c0-.7.3-1.4.8-1.8s1.2-.7 1.9-.7h2.2v-3.1c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v3.1h3.4c.8 0 1.4.3 1.9.8s.8 1.2.8 1.9-.3 1.4-.8 1.8-1.2.7-1.9.7h-3.4v13c0 .7.2 1.2.5 1.5s.8.5 1.4.5c.3 0 .6-.1 1.1-.2.5-.2.8-.3 1.2-.3zm28-20.7c.8 0 1.5.3 2.1.8.5.5.8 1.2.8 2.1v20.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2-.8-.8-1.2-.8-2.1c-.8.9-1.9 1.7-3.2 2.4-1.3.7-2.8 1-4.3 1-2.2 0-4.2-.6-6-1.7-1.8-1.1-3.2-2.7-4.2-4.7s-1.6-4.3-1.6-6.9c0-2.6.5-4.9 1.5-6.9s2.4-3.6 4.2-4.8c1.8-1.1 3.7-1.7 5.9-1.7 1.5 0 3 .3 4.3.8 1.3.6 2.5 1.3 3.4 2.1 0-.8.3-1.5.8-2.1.5-.5 1.2-.7 2-.7zm-9.7 21.3c2.1 0 3.8-.8 5.1-2.3s2-3.4 2-5.7-.7-4.2-2-5.8c-1.3-1.5-3-2.3-5.1-2.3-2 0-3.7.8-5 2.3-1.3 1.5-2 3.5-2 5.8s.6 4.2 1.9 5.7 3 2.3 5.1 2.3zm32.1-21.3c2.2 0 4.2.6 6 1.7 1.8 1.1 3.2 2.7 4.2 4.7s1.6 4.3 1.6 6.9-.5 4.9-1.5 6.9-2.4 3.6-4.2 4.8c-1.8 1.1-3.7 1.7-5.9 1.7-1.5 0-3-.3-4.3-.9s-2.5-1.4-3.4-2.3v.3c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.5-.8-1.2-.8-2.1V18.9c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v10c.8-1 1.8-1.8 3.2-2.5 1.3-.7 2.8-1 4.3-1zm-.7 21.3c2 0 3.7-.8 5-2.3s2-3.5 2-5.8-.6-4.2-1.9-5.7-3-2.3-5.1-2.3-3.8.8-5.1 2.3-2 3.4-2 5.7.7 4.2 2 5.8c1.3 1.6 3 2.3 5.1 2.3zm23.6 1.9c0 .8-.3 1.5-.8 2.1s-1.3.8-2.1.8-1.5-.3-2-.8-.8-1.3-.8-2.1V18.9c0-.8.3-1.5.8-2.1s1.3-.8 2.1-.8 1.5.3 2 .8.8 1.3.8 2.1v29.7zm29.3-10.5c0 .8-.3 1.4-.9 1.9-.6.5-1.2.7-2 .7h-15.8c.4 1.9 1.3 3.4 2.6 4.4 1.4 1.1 2.9 1.6 4.7 1.6 1.3 0 2.3-.1 3.1-.4.7-.2 1.3-.5 1.8-.8.4-.3.7-.5.9-.6.6-.3 1.1-.4 1.6-.4.7 0 1.2.2 1.7.7s.7 1 .7 1.7c0 .9-.4 1.6-1.3 2.4-.9.7-2.1 1.4-3.6 1.9s-3 .8-4.6.8c-2.7 0-5-.6-7-1.7s-3.5-2.7-4.6-4.6-1.6-4.2-1.6-6.6c0-2.8.6-5.2 1.7-7.2s2.7-3.7 4.6-4.8 3.9-1.7 6-1.7 4.1.6 6 1.7 3.4 2.7 4.5 4.7c.9 1.9 1.5 4.1 1.5 6.3zm-12.2-7.5c-3.7 0-5.9 1.7-6.6 5.2h12.6v-.3c-.1-1.3-.8-2.5-2-3.5s-2.5-1.4-4-1.4zm30.3-5.2c1 0 1.8.3 2.4.8.7.5 1 1.2 1 1.9 0 1-.3 1.7-.8 2.2-.5.5-1.1.8-1.8.7-.5 0-1-.1-1.6-.3-.2-.1-.4-.1-.6-.2-.4-.1-.7-.1-1.1-.1-.8 0-1.6.3-2.4.8s-1.4 1.3-1.9 2.3-.7 2.3-.7 3.7v11.4c0 .8-.3 1.5-.8 2.1-.5.6-1.2.8-2.1.8s-1.5-.3-2.1-.8c-.5-.6-.8-1.3-.8-2.1V28.8c0-.8.3-1.5.8-2.1.5-.6 1.2-.8 2.1-.8s1.5.3 2.1.8c.5.6.8 1.3.8 2.1v.6c.7-1.3 1.8-2.3 3.2-3 1.3-.7 2.8-1 4.3-1z" fill-rule="evenodd" clip-rule="evenodd" fill="#4a4a4a"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
1
docs/_includes/menu.html
Normal file
1
docs/_includes/menu.html
Normal file
@@ -0,0 +1 @@
|
||||
menu
|
||||
@@ -9,15 +9,20 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="container">
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum voluptatem rem beatae, quia odit quo corporis exercitationem modi, laborum commodi ratione quos possimus eius incidunt quas in mollitia, molestias magni?
|
||||
<div class="container-xl">
|
||||
<div class="navbar-brand">
|
||||
{% include "logo.html" %}
|
||||
</div>
|
||||
<div class="navbar-nav flex-row order-md-last">13</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-3">MENU</div>
|
||||
<div class="col-3">{{ include "menu.html" }}</div>
|
||||
<div class="col">{{ content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/core/js/tabler.esm.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -13,4 +13,17 @@ export default function (eleventyConfig) {
|
||||
dynamicPartials: true,
|
||||
jekyllWhere: true,
|
||||
});
|
||||
|
||||
return {
|
||||
dir: {
|
||||
output: "dist",
|
||||
includes: "_includes",
|
||||
data: "_data",
|
||||
layouts: "_layouts",
|
||||
},
|
||||
passthroughFileCopy: true,
|
||||
templateFormats: ["html", "md", "liquid"],
|
||||
htmlTemplateEngine: "liquid",
|
||||
markdownTemplateEngine: "liquid",
|
||||
}
|
||||
};
|
||||
@@ -3,6 +3,7 @@ title: Tabler 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
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Browse icons
|
||||
@@ -2,6 +2,7 @@
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -2,6 +2,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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -2,6 +2,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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: EPS version
|
||||
description: Download Tabler Icons in EPS format.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: PDF version
|
||||
description: Download Tabler Icons in PDF format.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: PNG version
|
||||
description: Download Tabler Icons in PNG format.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: SVG version
|
||||
description: Download Tabler Icons in SVG format.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -3,6 +3,7 @@ title: Tabler Illustrations
|
||||
order: 3
|
||||
description: Customizable illustrations for modern web and mobile designs.
|
||||
summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
! [ ] (/docs/cover-illustrations.png)
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Contents
|
||||
description: Explore Tabler Illustrations folder structure
|
||||
summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources.
|
||||
layout: default
|
||||
---
|
||||
|
||||
The Tabler Illustrations package offers a wide range of visual assets designed to meet the needs of modern web and graphic design. These illustrations are not only aesthetically pleasing but also highly versatile, supporting various formats and themes for seamless integration into different projects.
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Customization
|
||||
description: Customize the illustrations to match your brand.
|
||||
summary: Learn how to tailor Tabler Illustrations by adjusting colors, sizes, and formats. This section provides insights into seamlessly integrating illustrations to align with your design and branding.
|
||||
layout: default
|
||||
---
|
||||
|
||||
```html example columns={1} centered vertical height="25rem"
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Tabler Illustrations License
|
||||
layout: default
|
||||
---
|
||||
|
||||
### Personal License
|
||||
@@ -26,7 +27,9 @@ You **cannot**:
|
||||
|
||||
#### Example usage
|
||||
|
||||
Examples of usage **allowed** by the license:* Creating a personal website by yourself.
|
||||
Examples of usage **allowed** by the license:
|
||||
|
||||
* Creating a personal website by yourself.
|
||||
* Creating a website or web application for a client that will be owned by that client.
|
||||
* Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
|
||||
* Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
|
||||
@@ -85,6 +88,7 @@ Examples of use **not allowed** by the license:
|
||||
* Giving someone access to Tabler Illustrations when they purchase a product from you. For example, you can't use a Team License as a way to give someone access to Tabler Illustrations when they purchase an online course from you.
|
||||
* Selling access to your team account to people who don't work for you company.
|
||||
|
||||
layout: default
|
||||
---
|
||||
|
||||
In case of differences between above license agreements and the license agreements provided with the product, the license agreement provided with the product shall prevail.
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
layout: default
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
<ResponsiveImage src="/docs/tabler.png" src-dark="/docs/tabler-dark.png" alt="Tabler" width="816" height="620" className="mb-4" />
|
||||
|
||||
@@ -3,6 +3,7 @@ title: Colors
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Base colors
|
||||
@@ -3,6 +3,7 @@ title: Typography
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Headings
|
||||
@@ -3,6 +3,7 @@ title: Alerts
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,6 +3,7 @@ title: Autosize
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`.
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Avatars
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,6 +3,7 @@ title: Badges
|
||||
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/
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,6 +3,7 @@ title: Breadcrumb
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,6 +3,7 @@ title: Buttons
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Button tag
|
||||
@@ -3,6 +3,7 @@ title: Cards
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default card
|
||||
@@ -3,6 +3,7 @@ title: Carousel
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,6 +3,7 @@ title: Charts
|
||||
libs: apexcharts
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
|
||||
@@ -3,6 +3,7 @@ title: Countup
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
The countup component is used to display numbers dynamically. It is a great way to make the interface more interactive and engaging. The countup component is a simple and easy way to animate numbers in your application.
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Data grid
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
```html example vcentered height="460px"
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Divider
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,6 +3,7 @@ title: Dropdowns
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default dropdown
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Dropzone
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Basic usage
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Empty states
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,6 +3,7 @@ title: Icons
|
||||
summary: Use one of over 5000 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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
If you need to add icons to your website, you can use the Tabler Icons library. It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects. You can find the Tabler Icons library [here](https://tabler-icons.io/).
|
||||
@@ -3,6 +3,7 @@ title: Inline player
|
||||
libs: plyr
|
||||
summary: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
|
||||
description: Lightweight media player for websites.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Modals
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Offcanvas
|
||||
layout: default
|
||||
---
|
||||
|
||||
Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Placeholder
|
||||
summary: Placeholder is used to reserve space for content that soon will appear in a layout.
|
||||
description: Reserve space for upcoming content.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Placeholder line
|
||||
@@ -3,6 +3,7 @@ title: Popovers
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,6 +3,7 @@ title: Progress bars
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,6 +3,7 @@ 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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`.
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Ribbons
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Segmented Control
|
||||
summary: A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options.
|
||||
layout: default
|
||||
---
|
||||
|
||||
To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links.
|
||||
@@ -3,6 +3,7 @@ title: Spinners
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Statuses
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,6 +3,7 @@ title: Steps
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,6 +3,7 @@ title: Switch icon
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,6 +3,7 @@ title: Tables
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Basic Table
|
||||
@@ -3,6 +3,7 @@ title: Tabs
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Timelines
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Timeline
|
||||
@@ -3,6 +3,7 @@ title: TinyMCE
|
||||
libs: tinymce
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
[TinyMCE](https://www.tiny.cloud/docs/) documentation.
|
||||
@@ -3,6 +3,7 @@ title: Toasts
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -3,6 +3,7 @@ title: Tooltips
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Tracking
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Basic example
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Vector Maps
|
||||
description: Interactive guide to creating vector maps with jsVectorMap.
|
||||
summary: Vector maps are a great way to display geographical data in an interactive and visually appealing way. Learn how to create vector maps with jsVectorMap.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Installation
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Color check
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
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.
|
||||
@@ -5,6 +5,7 @@ bootstrapLink: components/forms/
|
||||
libs: nouislider
|
||||
description: Design user-friendly and effective forms.
|
||||
order: 1
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Classic inputs
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Form fieldset
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Form helpers
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Input help
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Image check
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Input mask
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Installation
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Form selectgroup
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Simple selectgroup
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Validation states
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Validation states
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Browser Support
|
||||
description: Check browser compatibility for Tabler.
|
||||
summary: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms.
|
||||
layout: default
|
||||
---
|
||||
|
||||
Tabler is fully optimized for all modern browsers, including the latest versions of Chrome, Firefox, Edge, Safari, and Opera. These browsers ensure a seamless and responsive experience, allowing users to enjoy Tabler's advanced UI components without compatibility issues.
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Customize Tabler
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Custom Google Font
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Download
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## CDN via jsDelivr
|
||||
@@ -3,6 +3,7 @@ title: FAQ
|
||||
summary: Answers to the most frequently asked questions.
|
||||
description: Common questions and answers.
|
||||
order: 12
|
||||
layout: default
|
||||
---
|
||||
|
||||
## I found an issue, what can I do?
|
||||
@@ -2,6 +2,7 @@
|
||||
title: How to Contribute
|
||||
summary: This guide explains how to contribute to Tabler, from setting up a development environment to making and testing changes. It covers essential steps like forking the repository, installing dependencies, and submitting a pull request to help improve Tabler's features and functionality.
|
||||
description: Guide to contributing to Tabler and setting up for development.
|
||||
layout: default
|
||||
---
|
||||
|
||||
Contributions are always welcome and highly encouraged! Whether you're new to open source or a seasoned contributor, your input helps make Tabler better for everyone. If you're new to open source, [start here](https://opensource.guide/how-to-contribute/) to learn more about contributing.
|
||||
@@ -3,6 +3,7 @@ title: Introduction
|
||||
summary: Free and open-source HTML Dashboard UI Kit built on Bootstrap
|
||||
order: 1
|
||||
description: Overview of Tabler UI Kit.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## What is Tabler?
|
||||
@@ -3,6 +3,7 @@ title: Installation
|
||||
order: 1
|
||||
summary: Learn how to set up Tabler in your project by creating a basic HTML file, adding Tabler’s CSS and JavaScript, and exploring its powerful components to build responsive and visually stunning web applications.
|
||||
description: "Set up Tabler: HTML, CSS, JS, and build stunning UIs."
|
||||
layout: default
|
||||
---
|
||||
|
||||
This guide will take you through the essential steps to set up Tabler in your project, from creating a basic HTML file to incorporating Tabler’s styles and scripts. Let’s dive in!
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Tabler License
|
||||
summary: The MIT license grants you the flexibility to use Tabler in commercial or personal projects, modify its code, and distribute it freely. Ensure you include the required license and copyright notices to stay compliant with the terms.
|
||||
description: "Tabler's MIT license: freedom to use, modify, and share."
|
||||
layout: default
|
||||
---
|
||||
|
||||
Tabler is an open-source project licensed under the **MIT license**, giving you extensive freedom to use, modify, and distribute the software. This license ensures that you can adapt Tabler to your needs while maintaining the required attributions. While attribution is not required, it is greatly appreciated to acknowledge the hard work of the developers.
|
||||
@@ -3,6 +3,7 @@ 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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Navbars
|
||||
summary: A navbar serves as a central navigation tool, offering users quick and easy access to key sections of a website or application, improving usability and enhancing the overall user experience.
|
||||
description: Create and customize responsive navigation bars with ease.
|
||||
layout: default
|
||||
---
|
||||
|
||||
The navbar is a core component of any website or application, serving as the primary navigation tool. It provides users with quick access to key sections, enhancing usability and improving the overall user experience. Positioned typically at the top of the page, the navbar can contain links, buttons, branding elements, and even interactive components like dropdown menus or search bars.
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Navs and tabs
|
||||
summary: This guide covered the basics of creating different types of navigation bars and tabs, including horizontal, vertical, pill-shaped, and underline-styled navs.
|
||||
description: "Essential guide to nav styles: tabs, pills, dropdowns, and more."
|
||||
layout: default
|
||||
---
|
||||
|
||||
Navigation bars are essential components of modern web applications, providing users with intuitive ways to navigate between different sections and content. This guide explores various types of navigation bars and tabs that can be easily implemented using predefined classes in HTML and CSS. Each type serves specific use cases, from horizontal and vertical layouts to tabbed interfaces and dropdown menus. By utilizing these examples, developers can enhance the usability and aesthetics of their web projects.
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Page headers
|
||||
summary: Page heading examples for Tabler
|
||||
description: Examples of Tabler page headers.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Simple header
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Page layouts
|
||||
summary: Learn how to build a sample version of the dashboard
|
||||
description: Learn to design dashboard layouts.
|
||||
layout: default
|
||||
---
|
||||
|
||||
<Callout>
|
||||
@@ -4,6 +4,7 @@ summary: Thanks to the Tabler flags plugin, you can create flags to visually rep
|
||||
plugin: flags
|
||||
libs: tabler-flags
|
||||
description: Visual representation of countries/languages.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Installation
|
||||
@@ -3,6 +3,7 @@ title: Payments
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Installation
|
||||
@@ -4,6 +4,7 @@ summary: Social icons are a great way to make your website more engaging and use
|
||||
plugin: socials
|
||||
libs: tabler-socials
|
||||
description: Connect users to your social profiles.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Installation
|
||||
@@ -2,6 +2,7 @@
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Border direction
|
||||
@@ -2,6 +2,7 @@
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Cursor utilities
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Interactions
|
||||
summary: Utility classes that change how users interact with contents of a website.
|
||||
description: Modify user interactions efficiently.
|
||||
layout: default
|
||||
---
|
||||
|
||||
## Text selection
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Margins
|
||||
summary: Use margin utilities to control the space between elements.
|
||||
description: Control the space between elements with margin utilities.
|
||||
layout: default
|
||||
---
|
||||
|
||||
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.
|
||||
@@ -2,6 +2,7 @@
|
||||
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.
|
||||
layout: default
|
||||
---
|
||||
|
||||
Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed.
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
title: Visually hidden
|
||||
summary: Use these helpers to visually hide elements but keep them accessible to assistive technologies.
|
||||
layout: default
|
||||
---
|
||||
|
||||
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.
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user