mirror of
https://github.com/tabler/tabler.git
synced 2026-08-29 21:31:28 +04:00
Add markdown documentation rules for component pages (#2616)
This commit is contained in:
Paweł Kuna
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
title: Alert
|
||||
summary: An alert message is used to inform users about the status of their action and help them solve problems that may occur. Good alert design is important for the overall user experience of a website or app.
|
||||
bootstrapLink: components/alerts/
|
||||
description: Alert messages for user notifications.
|
||||
description: An alert message for user notification.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Avatars
|
||||
summary: Avatars help customize various elements of a user interface and make the product experience more personalized. They are often used in communication apps, collaboration tools and social media.
|
||||
description: Personalize UI with user avatars.
|
||||
title: Avatar
|
||||
summary: An avatar helps customize interface elements and make the product experience more personalized. It is often used in communication apps, collaboration tools, and social media.
|
||||
description: Personalize UI with a user avatar.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,7 +1,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.
|
||||
title: Badge
|
||||
summary: A badge is a small count and labeling component used to add extra information to an interface element. You can use it to draw user attention to a new element, notify about unread messages, or provide additional context.
|
||||
description: Add extra information with a badge.
|
||||
bootstrapLink: components/badge/
|
||||
---
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
summary: A breadcrumb is used to show the current website or app location and reduce the number of actions users need to take. It helps users navigate the website hierarchy and better understand its structure.
|
||||
bootstrapLink: components/breadcrumb/
|
||||
description: Navigation aid for better structure.
|
||||
description: A navigation aid for better structure.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
title: Button
|
||||
summary: Use a button style that best suits your design and encourages users to take the desired action. You can customize button properties to improve user experience by changing size, shape, color, and more.
|
||||
bootstrapLink: components/buttons/
|
||||
description: Customizable buttons for user actions.
|
||||
description: A customizable button for user actions.
|
||||
---
|
||||
|
||||
## Button tag
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
title: Card
|
||||
summary: A card is a flexible user interface element that helps organize content into meaningful sections and display it across different screen sizes. It can contain smaller elements such as images, text, links, and buttons, and can act as an entry point to more detailed information.
|
||||
bootstrapLink: components/card/
|
||||
description: Organize content with flexible cards.
|
||||
description: Organize content with a flexible card.
|
||||
---
|
||||
|
||||
## Default card
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
summary: A carousel is used to display multiple pieces of visual content without taking up too much space. It eliminates the need to scroll down the page to see all content and is a popular method of presenting marketing information.
|
||||
bootstrapLink: components/carousel/
|
||||
description: Display visual content with carousels.
|
||||
description: Display visual content with a carousel.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Charts
|
||||
title: Chart
|
||||
docs-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.
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Countup
|
||||
summary: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
|
||||
docs-libs: countup
|
||||
description: Display numbers dynamically with countups.
|
||||
description: Display numbers dynamically with a countup.
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Dropdowns
|
||||
summary: Use dropdowns to display lists of options or include more items 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.
|
||||
title: Dropdown
|
||||
summary: A dropdown is used to display a list of options or include more items in a menu without overwhelming users with too many buttons and long lists. It improves interaction with your website or software and keeps the interface clear.
|
||||
bootstrapLink: components/dropdowns
|
||||
description: Organize options with dropdown menus.
|
||||
description: Organize options with a dropdown menu.
|
||||
---
|
||||
|
||||
## Default dropdown
|
||||
@@ -1,7 +1,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.
|
||||
title: Empty State
|
||||
summary: An empty state or blank page is commonly used as a placeholder for first-use, empty data, or an error screen. Its goal is to engage users when there is no content to display, which makes its design important for the overall user experience of your website or app.
|
||||
description: Engage users in an empty or error screen.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Icons
|
||||
summary: Use any 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.
|
||||
title: Icon
|
||||
summary: Use an icon from over 5000 options created specifically for Tabler to make your dashboard more attractive. Each icon is available under the MIT license, so it can be used in both private and commercial projects.
|
||||
banner: icons
|
||||
description: Enhance dashboards with custom icons.
|
||||
description: Enhance a dashboard with a custom icon.
|
||||
---
|
||||
|
||||
If you need to add icons to your website, you can use the [Tabler Icons library]({{ site.icons.link }}). 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.
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Modals
|
||||
title: Modal
|
||||
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.
|
||||
---
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Popovers
|
||||
summary: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient.
|
||||
title: Popover
|
||||
summary: A popover is used to provide additional information for elements where a simple tooltip is not sufficient.
|
||||
bootstrapLink: components/popovers
|
||||
description: Provide extra information with popovers.
|
||||
description: Provide extra information with a popover.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
title: Progress Bar
|
||||
summary: A progress bar is used to provide feedback on an action status and inform users about current progress. Although it is a small interface element, it is extremely helpful in managing user expectations and preventing abandonment of an initiated process.
|
||||
bootstrapLink: components/progress
|
||||
description: Track and display progress visually.
|
||||
description: Track and display progress with a progress bar.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Range slider
|
||||
docs-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.
|
||||
description: Adjust values with a range slider.
|
||||
summary: A range slider allows 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,7 +1,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.
|
||||
title: Ribbon
|
||||
summary: A ribbon is a graphical element that attracts user attention to a given interface element and makes it stand out.
|
||||
description: Highlight an element with a graphical ribbon.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
title: Spinner
|
||||
summary: A spinner is used to show the loading state of a component or page. It provides feedback for an action that takes longer to complete.
|
||||
bootstrapLink: components/spinners/
|
||||
description: Indicate loading state with spinners.
|
||||
description: Indicate loading state with a spinner.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,7 +1,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.
|
||||
title: Status
|
||||
summary: A status dot is particularly useful when you want to make an interface element more noticeable in limited space.
|
||||
description: Highlight an interface element with a status dot.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
title: Step
|
||||
summary: A step is used to guide users through a complex process and make it easier to complete. Breaking a multi-step process into smaller parts and tracking progress along the way helps users finish it successfully.
|
||||
new: true
|
||||
description: Simplify complex processes with steps.
|
||||
description: Simplify a complex process with a step.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
title: Tab
|
||||
summary: A tab allows users to alternate between equally important views within the same context. By dividing content into meaningful sections, it improves organization and makes navigation easier.
|
||||
bootstrapLink: components/navs/
|
||||
description: Organize content with interactive tabs.
|
||||
description: Organize content with an interactive tab.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Tables
|
||||
summary: Tables are useful interface elements that allow you to visualize 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.
|
||||
title: Table
|
||||
summary: A table is a useful interface element that lets you visualize data and arrange it clearly. It allows users to browse a lot of information at once, and a good table design improves readability.
|
||||
bootstrapLink: content/tables/
|
||||
description: Visualize data clearly with tables.
|
||||
description: Visualize data clearly with a table.
|
||||
---
|
||||
|
||||
## Basic Table
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Timelines
|
||||
title: Timeline
|
||||
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.
|
||||
---
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
title: Toast
|
||||
summary: A toast is a lightweight alert box that displays for a few seconds after a user action to communicate state or outcome. It is useful after actions like clicking a button or submitting a form, where feedback is needed without prompting another action.
|
||||
bootstrapLink: components/toasts/
|
||||
description: Display lightweight alert notifications.
|
||||
description: Display a lightweight alert notification with a toast.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
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.
|
||||
title: Tooltip
|
||||
summary: A tooltip is a text label that appears when a user hovers over an interface element. It explains unclear elements and guides users when they need help. When used properly, it can significantly enhance user experience and add value to your website or software.
|
||||
bootstrapLink: components/tooltips/
|
||||
description: Guide users with informative tooltips.
|
||||
description: Guide users with an informative tooltip.
|
||||
---
|
||||
|
||||
## Default markup
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
---
|
||||
title: Vector Maps
|
||||
title: Vector Map
|
||||
docs-libs: [jsvectormap]
|
||||
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.
|
||||
description: Interactive guide to creating a vector map with jsVectorMap.
|
||||
summary: A vector map is a great way to display geographical data in an interactive and visually appealing way. Learn how to create a vector map with jsVectorMap.
|
||||
---
|
||||
|
||||
## Installation
|
||||
@@ -135,7 +135,7 @@ If you want to use the image check as a radio button, you can change the input t
|
||||
|
||||
## Avatars
|
||||
|
||||
If you want to use the image check with avatars, you can use an [avatar component](/ui/components/avatars) instead of an image.
|
||||
If you want to use the image check with avatars, you can use an [avatar component](/ui/components/avatar) instead of an image.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="mb-3">
|
||||
|
||||
Reference in New Issue
Block a user