mirror of
https://github.com/tabler/tabler.git
synced 2026-08-05 01:44:41 +04:00
Restructure shared Astro sources and import aliases (#2737)
This commit is contained in:
Paweł Kuna
GitHub
@@ -7,7 +7,7 @@ summary: The compiled HTML files from the Tabler Emails package are ready to use
|
||||
seoDescription: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Compiled version of the template
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ summary: The Tabler Emails package contains files which can be used by everyone,
|
||||
seoDescription: todo
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Folder structure
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ summary: The source HTML files from the Tabler Emails package need a bit more wo
|
||||
seoDescription: The source HTML files from the Tabler Emails package need a bit more work than the compiled ones. Learn how to use them.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Source version of the template
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ summary: Tabler Icons for Astro provides an optimized collection of icons specif
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ summary: Tabler Icons for Preact provides an optimized collection of icons speci
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ summary: Tabler Icons for React offers a robust set of icons tailored for React
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ summary: Tabler Icons for SolidJS is a lightweight library offering a vast selec
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ summary: Tabler Icons for Svelte provides a clean and efficient way to use Table
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ summary: Tabler Icons for Vue offers a collection of customizable and scalable i
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ summary: Tabler Icons as a webfont allows you to easily include icons in your pr
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import DownloadButton from '@shared/components/docs/DownloadButton.astro'
|
||||
import DownloadButton from '@components/DownloadButton.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ description: Download Tabler Icons in EPS format.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ description: Download Tabler Icons in PDF format.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ description: Download Tabler Icons in PNG format.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -4,9 +4,9 @@ description: Download Tabler Icons in SVG format.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import Icon from '@shared/components/ui/Icon.astro'
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
import Icon from '@ui/Icon.astro'
|
||||
import Example from '@components/Example.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ 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: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
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.
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -2,7 +2,7 @@
|
||||
title: Tabler Illustrations License
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Personal License
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ description: Find comprehensive guides, examples, and resources to help you use
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Card from '@shared/components/docs/DocsCard.astro'
|
||||
import Card from '@components/DocsCard.astro'
|
||||
|
||||
<img src="/img/tabler.png" alt="Tabler" class="mb-4 hide-theme-dark border-0" width="816" height="620" />
|
||||
<img src="/img/tabler-dark.png" alt="Tabler" class="mb-4 hide-theme-light border-0" width="816" height="620" />
|
||||
|
||||
@@ -8,7 +8,7 @@ description: Impact of colors on user interface design.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Colors from '@shared/components/docs/Colors.astro'
|
||||
import Colors from '@components/Colors.astro'
|
||||
import site from '@data/site.json'
|
||||
|
||||
## Base colors
|
||||
|
||||
@@ -5,8 +5,8 @@ bootstrapLink: content/prose/
|
||||
description: Long-form content styles for markdown-like HTML.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Prose from '@shared/components/ui/Prose.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Prose from '@ui/Prose.astro';
|
||||
|
||||
## How it works
|
||||
|
||||
|
||||
@@ -5,8 +5,8 @@ bootstrapLink: content/typography/
|
||||
description: Role of typography in interface design.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Prose from '@shared/components/ui/Prose.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Prose from '@ui/Prose.astro';
|
||||
|
||||
## Headings
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@ summary: Use accordion panels to group related content and show one section at a
|
||||
description: Build collapsible content sections with accordion classes and modifiers.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
## Overview
|
||||
|
||||
|
||||
@@ -5,8 +5,8 @@ bootstrapLink: components/alerts/
|
||||
description: An alert message for user notification.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Alert from '@shared/components/ui/Alert.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Alert from '@ui/Alert.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ docs-libs: autosize
|
||||
description: Auto-adjusting textarea for better usability.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`.
|
||||
|
||||
|
||||
@@ -4,9 +4,9 @@ summary: An avatar helps customize interface elements and make the product exper
|
||||
description: Personalize UI with a user avatar.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import AvatarList from '@shared/components/ui/AvatarList.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
import AvatarList from '@ui/AvatarList.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -5,9 +5,9 @@ description: Add extra information with a badge.
|
||||
bootstrapLink: components/badge/
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import BadgesList from '@shared/components/ui/BadgesList.astro';
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Badge from '@shared/components/ui/Badge.astro';
|
||||
import BadgesList from '@ui/BadgesList.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Badge from '@ui/Badge.astro';
|
||||
import site from '@data/site.json';
|
||||
|
||||
export const colors = Object.entries(site.colors);
|
||||
|
||||
@@ -5,9 +5,9 @@ bootstrapLink: components/breadcrumb/
|
||||
description: A navigation aid for better structure.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Breadcrumb from '@shared/components/ui/Breadcrumb.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Breadcrumb from '@ui/Breadcrumb.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -5,9 +5,9 @@ bootstrapLink: components/buttons/
|
||||
description: A customizable button for user actions.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import ButtonGroup from '@shared/components/ui/ButtonGroup.astro';
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import ButtonGroup from '@ui/ButtonGroup.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
## Button tag
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ description: Build eye-catching cards with gradient variants, directions, and an
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Example from '@components/Example.astro'
|
||||
export const gradients = ['rainbow', 'sun', 'snow', 'ocean', 'mellow', 'disco', 'psychedelic', 'love', 'gold']
|
||||
|
||||
## Default markup
|
||||
|
||||
@@ -5,8 +5,8 @@ bootstrapLink: components/card/
|
||||
description: Organize content with a flexible card.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
## Default card
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ bootstrapLink: components/carousel/
|
||||
description: Display visual content with a carousel.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -6,8 +6,8 @@ description: Interactive data visualizations with ApexCharts.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Chart from '@shared/components/ui/Chart.astro'
|
||||
import Example from '@components/Example.astro'
|
||||
import Chart from '@ui/Chart.astro'
|
||||
|
||||
To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ docs-libs: countup
|
||||
description: Display numbers dynamically with a countup.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ summary: Use the data grid component to display detailed information about your
|
||||
description: Detailed product information in grids.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
<Example>
|
||||
<div class="datagrid"> <div class="datagrid-item"> <div class="datagrid-title">Registrar</div> <div class="datagrid-content">Third Party</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Nameservers</div> <div class="datagrid-content">Third Party</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Port number</div> <div class="datagrid-content">3306</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Expiration date</div> <div class="datagrid-content">–</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Creator</div> <div class="datagrid-content"> <div class="d-flex align-items-center"> <span class="avatar avatar-xs me-2 rounded" style="background-image: url(/static/avatars/027m.jpg)" ></span> Paweł Kuna </div> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Age</div> <div class="datagrid-content">15 days</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Edge network</div> <div class="datagrid-content"> <span class="status status-green"> Active </span> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Avatars list</div> <div class="datagrid-content"> <div class="avatar-list avatar-list-stacked"> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/029f.jpg)" ></span> <span class="avatar avatar-xs rounded">JL</span> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/015f.jpg)" ></span> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/004m.jpg)" ></span> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/037m.jpg)" ></span> <span class="avatar avatar-xs rounded">+3</span> </div> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Checkbox</div> <div class="datagrid-content"> <label class="form-check"> <input class="form-check-input" type="checkbox" checked /> <span class="form-check-label">Click me</span> </label> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Icon</div> <div class="datagrid-content"> <svg xmlns="http://www.w3.org/2000/svg" class="icon text-green" 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 d="M5 12l5 5l10 -10" /> </svg> Checked </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Form control</div> <div class="datagrid-content"> <input type="text" class="form-control form-control-flush" placeholder="Input placeholder" /> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Longer description</div> <div class="datagrid-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> </div> </div>
|
||||
|
||||
@@ -4,7 +4,7 @@ summary: Dividers help organize content and make the interface layout clear and
|
||||
description: Separate content with clear dividers.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ bootstrapLink: components/dropdowns
|
||||
description: Organize options with a dropdown menu.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Default dropdown
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ description: Drag-and-drop file upload tool.
|
||||
docs-libs: dropzone
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Basic usage
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@ summary: An empty state or blank page is commonly used as a placeholder for firs
|
||||
description: Engage users in an empty or error screen.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Illustration from '@shared/components/ui/Illustration.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Illustration from '@ui/Illustration.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -5,8 +5,8 @@ banner: icons
|
||||
description: Enhance a dashboard with a custom icon.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
If you need to add icons to your website, you can use the [Tabler Icons library](https://tabler.io/icons). 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.
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ summary: A simple, lightweight, accessible and customizable HTML5, YouTube and V
|
||||
description: Lightweight media player for websites.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import { Code } from 'astro:components';
|
||||
import { site } from '@shared/lib/site.ts';
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@ summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site f
|
||||
description: Dialogs for notifications and content.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
title: Offcanvas
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -3,8 +3,8 @@ title: Pagination
|
||||
summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Pagination from '@shared/components/ui/Pagination.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Pagination from '@ui/Pagination.astro';
|
||||
|
||||
## Basic Example
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ summary: Placeholder is used to reserve space for content that will soon appear
|
||||
description: Reserve space for upcoming content.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Placeholder line
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ bootstrapLink: components/popovers
|
||||
description: Provide extra information with a popover.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -5,8 +5,8 @@ new: true
|
||||
description: Use progress steps to display compact onboarding, checkout, and setup progress.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import ProgressSteps from '@shared/components/ui/ProgressSteps.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import ProgressSteps from '@ui/ProgressSteps.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -5,8 +5,8 @@ bootstrapLink: components/progress
|
||||
description: Track and display progress with a progress bar.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import ProgressBg from '@shared/components/ui/ProgressBg.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import ProgressBg from '@ui/ProgressBg.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ 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.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
To be able to use the range slider in your application you will need to install the noUiSlider dependency with `npm install nouislider`.
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@ summary: A ribbon is a graphical element that attracts user attention to a given
|
||||
description: Highlight an element with a graphical ribbon.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -3,8 +3,8 @@ 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: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ bootstrapLink: components/spinners/
|
||||
description: Indicate loading state with a spinner.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@ summary: Use star rating to show score values with static stars or interactive s
|
||||
description: Build star rating UI with stars classes and data-star-rating state selectors.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
## Overview
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ summary: A status dot is particularly useful when you want to make an interface
|
||||
description: Highlight an interface element with a status dot.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ new: true
|
||||
description: Simplify a complex process with a step.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -5,8 +5,8 @@ banner: icons
|
||||
description: Transition between two icons smoothly.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -5,8 +5,8 @@ bootstrapLink: components/navs/
|
||||
description: Organize content with an interactive tab.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ bootstrapLink: content/tables/
|
||||
description: Visualize data clearly with a table.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Basic Table
|
||||
|
||||
|
||||
@@ -4,11 +4,11 @@ summary: Use tags to show compact metadata values with optional media, badges, a
|
||||
description: Build inline tag elements with the tag class API and related tag part classes.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Flag from '@shared/components/ui/Flag.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Payment from '@shared/components/ui/Payment.astro';
|
||||
import TagsList from '@shared/components/ui/TagsList.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Flag from '@ui/Flag.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
import Payment from '@ui/Payment.astro';
|
||||
import TagsList from '@ui/TagsList.astro';
|
||||
|
||||
## Overview
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@ summary: A timeline is a perfect way to visualize processes and projects, as it'
|
||||
description: Visualize events and processes clearly.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Timeline from '@shared/components/ui/Timeline.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Timeline from '@ui/Timeline.astro';
|
||||
|
||||
## Timeline
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ bootstrapLink: components/toasts/
|
||||
description: Display a lightweight alert notification with a toast.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ bootstrapLink: components/tooltips/
|
||||
description: Guide users with an informative tooltip.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@ summary: Component for visualizing activity logs or other monitoring-related dat
|
||||
description: Monitor data activity visually.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Subheader from '@shared/components/ui/Subheader.astro';
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Subheader from '@ui/Subheader.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Basic example
|
||||
|
||||
|
||||
@@ -6,8 +6,8 @@ summary: A vector map is a great way to display geographical data in an interact
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import MapVector from '@shared/components/ui/MapVector.astro'
|
||||
import Example from '@components/Example.astro'
|
||||
import MapVector from '@ui/MapVector.astro'
|
||||
import { Code } from 'astro:components'
|
||||
import { site } from '@shared/lib/site.ts'
|
||||
|
||||
|
||||
@@ -6,8 +6,8 @@ description: Flexible WYSIWYG editor for content.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Wysiwyg from '@shared/components/ui/Wysiwyg.astro'
|
||||
import Example from '@components/Example.astro'
|
||||
import Wysiwyg from '@ui/Wysiwyg.astro'
|
||||
|
||||
[HugeRTE](https://hugerte.org/) documentation.
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ description: Enhance forms with color checks.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Example from '@components/Example.astro'
|
||||
import InputColor from '@shared/components/parts/form/InputColor.astro'
|
||||
|
||||
Your input controls can come in a variety of colors, depending on your preferences. See the [full list of available colors](/ui/base/colors) for more details.
|
||||
|
||||
@@ -7,7 +7,7 @@ description: Design user-friendly and effective forms.
|
||||
order: 1
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Classic inputs
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ summary: By grouping form elements together with the fieldset element, you can i
|
||||
description: Group form elements for clarity.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@ summary: Use form helpers to provide additional information about a form element
|
||||
description: Provide additional guidance in forms.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import FormHint from '@shared/components/ui/FormHint.astro';
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import FormHint from '@ui/FormHint.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Input help
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ summary: The image check is a great way to make your form more user-friendly and
|
||||
description: Add visual appeal to forms with images.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
|
||||
@@ -6,8 +6,8 @@ docs-libs: imask
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import Example from '@components/Example.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ summary: Use selectgroup to make your form more intuitive by providing users wit
|
||||
description: Improve form UX with select groups.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Simple selectgroup
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ summary: To inform users whether the entered value is correct or not, use either
|
||||
description: Indicate valid or invalid inputs.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Validation states
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ 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: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ summary: Tabler has been designed so that it can be adjusted to your needs and r
|
||||
description: Adjust fonts, colors, and styles.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## Custom Google Font
|
||||
|
||||
|
||||
@@ -5,9 +5,9 @@ description: Get Tabler CSS, JS, and source code.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
|
||||
import CdnImportPlugin from '@shared/components/docs/CdnImportPlugin.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
||||
import CdnImportPlugin from '@components/CdnImportPlugin.astro'
|
||||
|
||||
## CDN via jsDelivr
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ description: Common questions and answers.
|
||||
order: 12
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
## I found an issue, what can I do?
|
||||
|
||||
|
||||
@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, register CSS and JS in `angular.json`, a
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
|
||||
import Steps from '@shared/components/docs/Steps.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
||||
import Steps from '@components/Steps.astro'
|
||||
|
||||
Angular manages global assets through its build configuration, and Tabler fits that model well: register the compiled CSS and JS once in `angular.json`, and every component template can use Tabler classes right away.
|
||||
|
||||
|
||||
@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and client-side JS in Astro,
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
|
||||
import Steps from '@shared/components/docs/Steps.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
||||
import Steps from '@components/Steps.astro'
|
||||
|
||||
Astro ships zero JavaScript by default, which suits Tabler well: most components are pure CSS, and the interactive ones need just one script that Astro bundles and runs only in the browser.
|
||||
|
||||
|
||||
@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, load CSS and optional JS in Django templ
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
|
||||
import Steps from '@shared/components/docs/Steps.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
||||
import Steps from '@components/Steps.astro'
|
||||
|
||||
Django templates render server-side HTML, which makes Tabler a drop-in: add Tabler classes to your markup and serve the compiled CSS and JS through Django's static files system — no Node build step required at runtime.
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ hide-pagination: true
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import DocsCard from '@shared/components/docs/DocsCard.astro'
|
||||
import DocsCard from '@components/DocsCard.astro'
|
||||
import { getDocsChildren } from '@shared/lib/docs-children'
|
||||
|
||||
Tabler is framework-agnostic: it styles standard HTML, so it works with any stack that renders markup. Each guide below shows the fastest path to a working Tabler page — installing `@tabler/core`, wiring the styles and scripts where your framework expects them, and rendering a first component.
|
||||
|
||||
@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and JS with Vite, and render
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
|
||||
import Steps from '@shared/components/docs/Steps.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
||||
import Steps from '@components/Steps.astro'
|
||||
|
||||
Laravel pairs naturally with Tabler: Blade templates render plain server-side HTML, so every Tabler component works out of the box — no wrappers or adapters needed. Styling comes from Tabler CSS, and a small JavaScript bundle powers interactive components such as dropdowns and modals.
|
||||
|
||||
|
||||
@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and JS in Next.js, and render
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
|
||||
import Steps from '@shared/components/docs/Steps.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
||||
import Steps from '@components/Steps.astro'
|
||||
|
||||
Next.js renders on the server first, which is great for performance but means browser-only code needs care: Tabler CSS can be imported globally, while `tabler.min.js` must load on the client. This guide shows an App Router pattern that handles both cleanly.
|
||||
|
||||
|
||||
@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and client-only JS in Nuxt, a
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
|
||||
import Steps from '@shared/components/docs/Steps.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
||||
import Steps from '@components/Steps.astro'
|
||||
|
||||
Nuxt renders on the server by default, so Tabler integrates in two parts: CSS registered globally in `nuxt.config.ts`, and `tabler.min.js` loaded through a client-only plugin so it never runs during server-side rendering.
|
||||
|
||||
|
||||
@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, load CSS and optional JS in Rails, and r
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
|
||||
import Steps from '@shared/components/docs/Steps.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
||||
import Steps from '@components/Steps.astro'
|
||||
|
||||
Rails renders server-side HTML through ERB templates, so Tabler classes work directly in your views, and the compiled CSS and JS integrate with the standard Rails bundling gems (`cssbundling-rails` and `jsbundling-rails`).
|
||||
|
||||
|
||||
@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and JS in React, and render a
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
|
||||
import Steps from '@shared/components/docs/Steps.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
||||
import Steps from '@components/Steps.astro'
|
||||
|
||||
React components render standard HTML, so Tabler slots in as the styling layer: you write JSX with Tabler classes and `@tabler/core` provides the CSS. JavaScript is only needed for interactive components such as dropdowns, modals, and tooltips.
|
||||
|
||||
|
||||
@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and optional JS in SvelteKit,
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
|
||||
import Steps from '@shared/components/docs/Steps.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
||||
import Steps from '@components/Steps.astro'
|
||||
|
||||
Svelte components compile to plain HTML and Tabler provides the styling on top. The only SvelteKit-specific step is loading `tabler.min.js` on the client, since pages render on the server first.
|
||||
|
||||
|
||||
@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and JS with Symfony asset too
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
|
||||
import Steps from '@shared/components/docs/Steps.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
||||
import Steps from '@components/Steps.astro'
|
||||
|
||||
Symfony's Twig templates render server-side HTML, so Tabler components work without any adapters — you add Tabler classes to your markup and let the asset pipeline deliver the CSS and JS.
|
||||
|
||||
|
||||
@@ -8,9 +8,9 @@ seoDescription: Install `@tabler/core`, import CSS and JS in Vue, and render a m
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
|
||||
import Steps from '@shared/components/docs/Steps.astro'
|
||||
import TabsPackage from '@components/TabsPackage.astro'
|
||||
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
||||
import Steps from '@components/Steps.astro'
|
||||
|
||||
Vue single-file components render standard HTML templates, so Tabler classes work directly in your markup while `@tabler/core` supplies the styling. JavaScript is only needed for interactive components such as dropdowns, modals, and tooltips.
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@ summary: This guide explains how to contribute to Tabler, from setting up a deve
|
||||
description: Guide to contributing to Tabler and setting up for development.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Steps from '@shared/components/docs/Steps.astro'
|
||||
import Example from '@components/Example.astro';
|
||||
import Steps from '@components/Steps.astro'
|
||||
|
||||
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, we recommend reading a [how to contribute](https://opensource.guide/how-to-contribute/) guide to learn more about contributing.
|
||||
|
||||
@@ -78,13 +78,13 @@ Tabler is a pnpm monorepo. The packages you will work with most often are:
|
||||
- `core/` - the framework itself: SCSS sources in `core/scss/` and JavaScript in `core/js/`. This is where CSS classes and components are defined.
|
||||
- `preview/` - the demo website built with [Astro](https://astro.build). Pages live in `preview/pages/*.astro`.
|
||||
- `docs/` - the documentation website, also built with Astro. Pages live in `docs/pages/**/*.mdx`.
|
||||
- `shared/astro/` - Astro components, layouts and helpers shared by the preview and docs websites. Import them with the `@shared` alias, for example `import Button from '@shared/components/ui/Button.astro'`.
|
||||
- `shared/` - Astro components, layouts and helpers shared by the preview and docs websites. Import UI with `@ui` (for example `import Button from '@ui/Button.astro'`), other shared pieces with `@shared`. Also holds `data/` (`@data`) and `static/`.
|
||||
- `shared/data/` - JSON data used by demo pages. Import it with the `@data` alias.
|
||||
|
||||
A few practical rules:
|
||||
|
||||
- If you add a new CSS class or component style, change it in `core/scss/` and show it on a preview page.
|
||||
- If you add or change a reusable piece of markup, put it in `shared/astro/components/`, not in a single page.
|
||||
- If you add or change a reusable piece of markup, put it in `shared/components/`, not in a single page.
|
||||
- If you add a new feature, document it in `docs/pages/`.
|
||||
|
||||
## Add a changeset
|
||||
|
||||
@@ -6,11 +6,11 @@ description: 'Set up Tabler: HTML, CSS, JS, and build stunning UIs.'
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
|
||||
import Example from '@components/Example.astro'
|
||||
import CdnImportPackage from '@components/CdnImportPackage.astro'
|
||||
import { Code } from 'astro:components'
|
||||
import { site } from '@shared/lib/site.ts'
|
||||
import Steps from '@shared/components/docs/Steps.astro'
|
||||
import Steps from '@components/Steps.astro'
|
||||
|
||||
Using a framework? See [Tabler framework integration guides](/ui/getting-started/frameworks).
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ summary: The MIT license grants you the flexibility to use Tabler in commercial
|
||||
description: "Tabler's MIT license: freedom to use, modify, and share."
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
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,7 +3,7 @@ title: 3rd-party Libraries & Resources
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import OpenSourceResources from '@shared/components/docs/OpenSourceResources.astro'
|
||||
import OpenSourceResources from '@components/OpenSourceResources.astro'
|
||||
|
||||
Tabler uses the following open source resources:
|
||||
|
||||
|
||||
@@ -5,9 +5,9 @@ description: Create and customize responsive navigation bars with ease.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Example from '@components/Example.astro'
|
||||
import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro'
|
||||
import Icon from '@shared/components/ui/Icon.astro'
|
||||
import Icon from '@ui/Icon.astro'
|
||||
|
||||
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.
|
||||
|
||||
@@ -4,7 +4,7 @@ summary: This guide covers the basics of creating different types of navigation
|
||||
description: "Essential guide to nav styles: tabs, pills, dropdowns, and more."
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
|
||||
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.
|
||||
|
||||
|
||||
@@ -4,8 +4,8 @@ summary: Page heading examples for Tabler
|
||||
description: Examples of Tabler page headers.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/ui/Icon.astro';
|
||||
import Example from '@components/Example.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
## Simple header
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ description: Learn to design dashboard layouts.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Example from '@components/Example.astro'
|
||||
|
||||
Before you start with this section, make sure you have followed the [installation guideline](/ui/getting-started/installation).
|
||||
|
||||
|
||||
@@ -7,9 +7,9 @@ description: Visual representation of countries/languages.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Flags from '@shared/components/docs/Flags.astro'
|
||||
import CdnImportPlugin from '@shared/components/docs/CdnImportPlugin.astro'
|
||||
import Example from '@components/Example.astro'
|
||||
import Flags from '@components/Flags.astro'
|
||||
import CdnImportPlugin from '@components/CdnImportPlugin.astro'
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@@ -6,9 +6,9 @@ description: User-friendly payment provider icons.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Payments from '@shared/components/docs/Payments.astro'
|
||||
import CdnImportPlugin from '@shared/components/docs/CdnImportPlugin.astro'
|
||||
import Example from '@components/Example.astro'
|
||||
import Payments from '@components/Payments.astro'
|
||||
import CdnImportPlugin from '@components/CdnImportPlugin.astro'
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@@ -7,9 +7,9 @@ description: Connect users to your social profiles.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Socials from '@shared/components/docs/Socials.astro'
|
||||
import CdnImportPlugin from '@shared/components/docs/CdnImportPlugin.astro'
|
||||
import Example from '@components/Example.astro'
|
||||
import Socials from '@components/Socials.astro'
|
||||
import CdnImportPlugin from '@components/CdnImportPlugin.astro'
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user