mirror of
https://github.com/tabler/tabler.git
synced 2026-08-05 01:44:41 +04:00
Add framework integration guides to the docs (#2707)
Co-authored-by: codecalm <codecalm@gmail.com> Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Bartosz-Do
GitHub
@@ -6,6 +6,8 @@ description: Lightweight media player for websites.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import { Code } from 'astro:components';
|
||||
import { site } from '@shared/lib/site.ts';
|
||||
|
||||
## Overview
|
||||
|
||||
@@ -15,16 +17,17 @@ The Inline Player is a versatile, modern media player designed for seamless inte
|
||||
|
||||
To use the Inline Player, you need to include the Plyr library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the Plyr library from a CDN:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/libs/plyr/dist/plyr.min.js"></script>
|
||||
```
|
||||
<Code
|
||||
lang="html"
|
||||
code={`<script src="${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js"></script>`}
|
||||
/>
|
||||
|
||||
## YouTube video
|
||||
|
||||
Integrating the Inline Player into your website is straightforward. Below is a sample implementation for a YouTube video:
|
||||
|
||||
<Example>
|
||||
<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div> <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/libs/plyr/dist/plyr.min.js"></script> <script>{`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-youtube"); });`}</script>
|
||||
<div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div> <script is:inline src={`${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js`}></script> <script>{`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-youtube"); });`}</script>
|
||||
</Example>
|
||||
|
||||
## Vimeo file
|
||||
@@ -32,7 +35,7 @@ Integrating the Inline Player into your website is straightforward. Below is a s
|
||||
For the Vimeo video you just need to change the `data-plyr-provider`.
|
||||
|
||||
<Example>
|
||||
<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="707012696"></div> <script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/libs/plyr/dist/plyr.min.js"></script> <script>{`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-vimeo"); });`}</script>
|
||||
<div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="707012696"></div> <script is:inline src={`${site.cdnUrl}/dist/libs/plyr/dist/plyr.min.js`}></script> <script>{`document.addEventListener("DOMContentLoaded", function () { window.Plyr && new Plyr("#player-vimeo"); });`}</script>
|
||||
</Example>
|
||||
|
||||
## HTML5 video and audio
|
||||
|
||||
@@ -8,15 +8,18 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import MapVector from '@shared/components/ui/MapVector.astro'
|
||||
import { Code } from 'astro:components'
|
||||
import { site } from '@shared/lib/site.ts'
|
||||
|
||||
## Installation
|
||||
|
||||
To use vector maps in your project, you need to include the jsVectorMap library in your project. You can install it via npm or include it directly from a CDN. The following example demonstrates how to include the jsVectorMap library from a CDN:
|
||||
|
||||
```html
|
||||
<script src="{{ cdnUrl }}/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
|
||||
<script src="{{ cdnUrl }}/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>
|
||||
```
|
||||
<Code
|
||||
lang="html"
|
||||
code={`<script src="${site.cdnUrl}/dist/libs/jsvectormap/dist/js/jsvectormap.min.js"></script>
|
||||
<script src="${site.cdnUrl}/dist/libs/jsvectormap/dist/maps/js/jsvectormap-world.js"></script>`}
|
||||
/>
|
||||
|
||||
## Default map
|
||||
|
||||
|
||||
@@ -6,24 +6,18 @@ 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'
|
||||
|
||||
## CDN via jsDelivr
|
||||
|
||||
All files included in the `@tabler/core` npm package are available over a jsDelivr CDN. Use it to deliver cached versions of Tabler’s compiled CSS and JS to your project.
|
||||
|
||||
```html
|
||||
<script src="{{ cdnUrl }}/dist/js/tabler.min.js"></script>
|
||||
<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler.min.css" />
|
||||
```
|
||||
<CdnImportPackage />
|
||||
|
||||
You can also include additional Tabler plugins:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-flags.min.css" />
|
||||
<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-payments.min.css" />
|
||||
<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-social.min.css" />
|
||||
<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-vendors.min.css" />
|
||||
```
|
||||
<CdnImportPlugin plugins={['flags', 'payments', 'socials', 'vendors']} />
|
||||
|
||||
## Package managers
|
||||
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
title: Angular
|
||||
order: 5
|
||||
summary: Set up Tabler in Angular and build a first working page.
|
||||
description: Integrate Tabler with Angular.
|
||||
icon: brand-angular
|
||||
seoDescription: Install `@tabler/core`, register CSS and JS in `angular.json`, and render a minimal Angular page with a Tabler card.
|
||||
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'
|
||||
|
||||
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.
|
||||
|
||||
This guide uses the Angular CLI. You will install `@tabler/core`, register its assets in the build config, and render a first component template with a Tabler card.
|
||||
|
||||
## Setup
|
||||
|
||||
<Steps>
|
||||
|
||||
### Install Tabler package
|
||||
|
||||
Install `@tabler/core` with your preferred package manager:
|
||||
|
||||
<TabsPackage name="@tabler/core" />
|
||||
|
||||
You can also use CDN files when you need a quick setup:
|
||||
|
||||
<CdnImportPackage />
|
||||
|
||||
### Import styles
|
||||
|
||||
Register Tabler CSS in the Angular build config (`angular.json`) under `projects.<app>.architect.build.options.styles`:
|
||||
|
||||
```json
|
||||
{
|
||||
"styles": ["src/styles.scss", "node_modules/@tabler/core/dist/css/tabler.min.css"]
|
||||
}
|
||||
```
|
||||
|
||||
Alternatively, import the compiled CSS directly in `src/styles.scss`:
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/dist/css/tabler.min.css';
|
||||
```
|
||||
|
||||
For full theme customization, import SCSS sources in `src/styles.scss` instead:
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/scss/tabler';
|
||||
```
|
||||
|
||||
### Import and initialize JavaScript
|
||||
|
||||
Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips. Register it in `angular.json` under `projects.<app>.architect.build.options.scripts`:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": ["node_modules/@tabler/core/dist/js/tabler.min.js"]
|
||||
}
|
||||
```
|
||||
|
||||
Angular-specific note: use `angular.json` for global CSS and JS registration so assets are included in both development and production builds.
|
||||
|
||||
### Minimal working example
|
||||
|
||||
Use a simple root component template in `src/app/app.component.html`:
|
||||
|
||||
```html
|
||||
<div class="page">
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl py-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Angular + Tabler</h3>
|
||||
<p class="text-secondary mb-0">Your Tabler setup is working.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
A minimal `angular.json` example (relevant part):
|
||||
|
||||
```json
|
||||
{
|
||||
"projects": {
|
||||
"my-app": {
|
||||
"architect": {
|
||||
"build": {
|
||||
"options": {
|
||||
"styles": ["src/styles.scss", "node_modules/@tabler/core/dist/css/tabler.min.css"],
|
||||
"scripts": ["node_modules/@tabler/core/dist/js/tabler.min.js"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Run the app:
|
||||
|
||||
```shell
|
||||
ng serve
|
||||
```
|
||||
|
||||
Open the local Angular URL and confirm the card is styled with Tabler.
|
||||
|
||||
### Next steps
|
||||
|
||||
- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
|
||||
- Explore [Layout](/ui/layout) to choose page structures.
|
||||
- Browse [Components](/ui/components) to add UI building blocks.
|
||||
|
||||
</Steps>
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
title: Astro
|
||||
order: 11
|
||||
summary: Set up Tabler in Astro and build a first working page.
|
||||
description: Integrate Tabler with Astro.
|
||||
icon: brand-astro
|
||||
seoDescription: Install `@tabler/core`, import CSS and client-side JS in Astro, and render a minimal page layout with a Tabler card.
|
||||
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'
|
||||
|
||||
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.
|
||||
|
||||
You will install `@tabler/core`, import its CSS in a base layout, add the client script, and render a first page with a Tabler card.
|
||||
|
||||
## Setup
|
||||
|
||||
<Steps>
|
||||
|
||||
### Install Tabler package
|
||||
|
||||
Install `@tabler/core` with your preferred package manager:
|
||||
|
||||
<TabsPackage name="@tabler/core" />
|
||||
|
||||
You can also use CDN files when you need a quick setup:
|
||||
|
||||
<CdnImportPackage />
|
||||
|
||||
### Import styles
|
||||
|
||||
Import Tabler CSS once in the frontmatter of your base layout (`src/layouts/Layout.astro`):
|
||||
|
||||
```js
|
||||
import '@tabler/core/dist/css/tabler.min.css'
|
||||
```
|
||||
|
||||
For full theme customization, import SCSS sources instead:
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/scss/tabler';
|
||||
```
|
||||
|
||||
### Import and initialize JavaScript
|
||||
|
||||
Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
|
||||
|
||||
Astro-specific note: a plain `<script>` tag in an Astro component is bundled and runs only in the browser, so importing `tabler.min.js` there is safe — it never executes during server-side rendering:
|
||||
|
||||
```astro
|
||||
<script>
|
||||
import '@tabler/core/dist/js/tabler.min.js'
|
||||
</script>
|
||||
```
|
||||
|
||||
### Minimal working example
|
||||
|
||||
Create a base layout in `src/layouts/Layout.astro` that loads Tabler CSS and JavaScript:
|
||||
|
||||
```astro
|
||||
---
|
||||
import '@tabler/core/dist/css/tabler.min.css'
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Astro + Tabler</title>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
<script>
|
||||
import '@tabler/core/dist/js/tabler.min.js'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Then add a minimal page in `src/pages/index.astro`:
|
||||
|
||||
```astro
|
||||
---
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
---
|
||||
|
||||
<Layout>
|
||||
<div class="page">
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl py-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Astro + Tabler</h3>
|
||||
<p class="text-secondary mb-0">Your Tabler setup is working.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
```
|
||||
|
||||
Run the app:
|
||||
|
||||
```shell
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open the local Astro URL and confirm the card is styled with Tabler.
|
||||
|
||||
### Next steps
|
||||
|
||||
- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
|
||||
- Explore [Layout](/ui/layout) to choose page structures.
|
||||
- Browse [Components](/ui/components) to add UI building blocks.
|
||||
|
||||
</Steps>
|
||||
@@ -0,0 +1,129 @@
|
||||
---
|
||||
title: Django
|
||||
order: 8
|
||||
summary: Set up Tabler in Django and build a first working page.
|
||||
description: Integrate Tabler with Django.
|
||||
icon: brand-django
|
||||
seoDescription: Install `@tabler/core`, load CSS and optional JS in Django templates, and render a minimal page layout with a Tabler card.
|
||||
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'
|
||||
|
||||
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.
|
||||
|
||||
You will install `@tabler/core`, copy its compiled assets into your static directory, and render a first template with a Tabler card.
|
||||
|
||||
## Setup
|
||||
|
||||
<Steps>
|
||||
|
||||
### Install Tabler package
|
||||
|
||||
Install `@tabler/core` with your preferred package manager:
|
||||
|
||||
<TabsPackage name="@tabler/core" />
|
||||
|
||||
You can also use CDN files when you need a quick setup:
|
||||
|
||||
<CdnImportPackage />
|
||||
|
||||
### Import styles
|
||||
|
||||
Django can use Tabler in two common ways:
|
||||
|
||||
- Build frontend assets with npm and serve compiled files.
|
||||
- Copy static CSS/JS files into your Django static directory.
|
||||
|
||||
If you use static files directly, copy the compiled files from the installed npm package into your static directory:
|
||||
|
||||
```shell
|
||||
mkdir -p static/css static/js
|
||||
cp node_modules/@tabler/core/dist/css/tabler.min.css static/css/
|
||||
cp node_modules/@tabler/core/dist/js/tabler.min.js static/js/
|
||||
```
|
||||
|
||||
Then add Tabler CSS to your base template:
|
||||
|
||||
```jinja
|
||||
{% load static %}
|
||||
<link rel="stylesheet" href="{% static 'css/tabler.min.css' %}" />
|
||||
```
|
||||
|
||||
For full theme customization, build from SCSS sources:
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/scss/tabler';
|
||||
```
|
||||
|
||||
### Import and initialize JavaScript
|
||||
|
||||
Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
|
||||
|
||||
If you use static files, include Tabler JS in your base template:
|
||||
|
||||
```jinja
|
||||
{% load static %}
|
||||
<script src="{% static 'js/tabler.min.js' %}"></script>
|
||||
```
|
||||
|
||||
Django-specific note: when serving local static assets in production, run `collectstatic` so Tabler files are included in your final static output.
|
||||
|
||||
### Minimal working example
|
||||
|
||||
Create a minimal base template in `templates/base.html`:
|
||||
|
||||
```jinja
|
||||
{% load static %}
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="{% static 'css/tabler.min.css' %}" />
|
||||
</head>
|
||||
<body>
|
||||
{% block content %}{% endblock %}
|
||||
<script src="{% static 'js/tabler.min.js' %}"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Then add a simple page in `templates/home.html`:
|
||||
|
||||
```jinja
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="page">
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl py-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Django + Tabler</h3>
|
||||
<p class="text-secondary mb-0">Your Tabler setup is working.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
Run the app:
|
||||
|
||||
```shell
|
||||
python manage.py runserver
|
||||
```
|
||||
|
||||
Open the local Django URL and confirm the card is styled with Tabler.
|
||||
|
||||
### Next steps
|
||||
|
||||
- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
|
||||
- Explore [Layout](/ui/layout) to choose page structures.
|
||||
- Browse [Components](/ui/components) to add UI building blocks.
|
||||
|
||||
</Steps>
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
title: Frameworks
|
||||
description: Step-by-step guides for integrating Tabler with popular frameworks.
|
||||
summary: Pick your framework and get a working Tabler page in minutes.
|
||||
hide-pagination: true
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import DocsCard from '@shared/components/docs/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.
|
||||
|
||||
<div class="row g-3">
|
||||
{getDocsChildren('/ui/getting-started/frameworks/').map((child) => (
|
||||
<DocsCard href={child.url} icon={child.icon} title={child.title} description={child.description} />
|
||||
))}
|
||||
|
||||
<DocsCard title="ASP.NET Core" icon="brand-c-sharp" description="Integrate Tabler with ASP.NET Core." />
|
||||
|
||||
<DocsCard title="Flask" icon="flask" description="Integrate Tabler with Flask." />
|
||||
|
||||
<DocsCard title="HTMX" icon="html" description="Integrate Tabler with HTMX." />
|
||||
</div>
|
||||
@@ -0,0 +1,123 @@
|
||||
---
|
||||
title: Laravel
|
||||
order: 1
|
||||
summary: Set up Tabler in Laravel with Vite and build a first working page.
|
||||
description: Integrate Tabler with Laravel.
|
||||
icon: brand-laravel
|
||||
seoDescription: Install `@tabler/core`, import CSS and JS with Vite, and render a minimal Laravel view with Tabler styles.
|
||||
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'
|
||||
|
||||
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.
|
||||
|
||||
This guide uses Laravel's default Vite setup. You will install `@tabler/core`, wire the CSS and JS into your Vite entry files, and render a first Blade view with a Tabler card.
|
||||
|
||||
## Setup
|
||||
|
||||
<Steps>
|
||||
|
||||
### Install Tabler package
|
||||
|
||||
Install `@tabler/core` with your preferred package manager:
|
||||
|
||||
<TabsPackage name="@tabler/core" />
|
||||
|
||||
You can also use CDN files when you do not want a Node-based build step:
|
||||
|
||||
<CdnImportPackage />
|
||||
|
||||
### Import styles
|
||||
|
||||
In a standard Laravel setup, import Tabler CSS in `resources/css/app.css`:
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/dist/css/tabler.min.css';
|
||||
```
|
||||
|
||||
For full theme customization, you can import SCSS sources from the package:
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/scss/tabler';
|
||||
```
|
||||
|
||||
### Import and initialize JavaScript
|
||||
|
||||
Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips. Import it in `resources/js/app.js`:
|
||||
|
||||
```js
|
||||
import '@tabler/core/dist/js/tabler.min.js'
|
||||
```
|
||||
|
||||
Laravel-specific note: keep Tabler imports in Vite entry files (`resources/css/app.css` and `resources/js/app.js`) so they are compiled into your application bundles.
|
||||
|
||||
### Minimal working example
|
||||
|
||||
First, load compiled assets in your base Blade layout (for example `resources/views/layouts/app.blade.php`):
|
||||
|
||||
```blade
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
@vite(["resources/css/app.css", "resources/js/app.js"])
|
||||
</head>
|
||||
<body>
|
||||
@yield("content")
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Then create a simple page route in `routes/web.php`:
|
||||
|
||||
```php
|
||||
<?php
|
||||
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get("/", function () {
|
||||
return view("welcome");
|
||||
});
|
||||
```
|
||||
|
||||
Then add a small Tabler layout with one card in `resources/views/welcome.blade.php`:
|
||||
|
||||
```blade
|
||||
@extends("layouts.app")
|
||||
|
||||
@section("content")
|
||||
<div class="page">
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl py-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Laravel + Tabler</h3>
|
||||
<p class="text-secondary mb-0">Your Tabler setup is working.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
```
|
||||
|
||||
Run the dev server and Vite:
|
||||
|
||||
```shell
|
||||
php artisan serve
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open the local URL from `php artisan serve` and confirm the card is styled with Tabler.
|
||||
|
||||
### Next steps
|
||||
|
||||
- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
|
||||
- Explore [Layout](/ui/layout) to choose page structures.
|
||||
- Browse [Components](/ui/components) to add UI building blocks.
|
||||
|
||||
</Steps>
|
||||
@@ -0,0 +1,126 @@
|
||||
---
|
||||
title: Next.js
|
||||
order: 3
|
||||
summary: Set up Tabler in Next.js and build a first working page.
|
||||
description: Integrate Tabler with Next.js.
|
||||
icon: brand-nextjs
|
||||
seoDescription: Install `@tabler/core`, import CSS and JS in Next.js, and render a minimal page layout with a Tabler card.
|
||||
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'
|
||||
|
||||
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.
|
||||
|
||||
You will install `@tabler/core`, add its CSS to your global stylesheet, mount a small client component for Tabler JavaScript, and render a first page with a Tabler card.
|
||||
|
||||
## Setup
|
||||
|
||||
<Steps>
|
||||
|
||||
### Install Tabler package
|
||||
|
||||
Install `@tabler/core` with your preferred package manager:
|
||||
|
||||
<TabsPackage name="@tabler/core" />
|
||||
|
||||
You can also use CDN files when you need a quick setup:
|
||||
|
||||
<CdnImportPackage />
|
||||
|
||||
### Import styles
|
||||
|
||||
Import Tabler CSS once in your global stylesheet (`app/globals.css`):
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/dist/css/tabler.min.css';
|
||||
```
|
||||
|
||||
For full theme customization, import SCSS sources:
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/scss/tabler';
|
||||
```
|
||||
|
||||
### Import and initialize JavaScript
|
||||
|
||||
Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
|
||||
|
||||
Next.js-specific note: `tabler.min.js` accesses `document`, so load it only on the client. If you import it during SSR, Next.js throws `document is not defined`.
|
||||
|
||||
Use a client component and dynamic import (`app/tabler-scripts.jsx`):
|
||||
|
||||
```jsx
|
||||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
|
||||
export function TablerScripts() {
|
||||
useEffect(() => {
|
||||
import('@tabler/core/dist/js/tabler.min.js')
|
||||
}, [])
|
||||
|
||||
return null
|
||||
}
|
||||
```
|
||||
|
||||
### Minimal working example
|
||||
|
||||
Load styles globally and mount client-only scripts in the app layout.
|
||||
|
||||
`app/layout.jsx`:
|
||||
|
||||
```jsx
|
||||
import './globals.css'
|
||||
import { TablerScripts } from './tabler-scripts'
|
||||
|
||||
export default function RootLayout({ children }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body>
|
||||
<TablerScripts />
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
`app/page.jsx`:
|
||||
|
||||
```jsx
|
||||
export default function Page() {
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-wrapper">
|
||||
<div className="container-xl py-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<h3 className="card-title">Next.js + Tabler</h3>
|
||||
<p className="text-secondary mb-0">Your Tabler setup is working.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
Run the app:
|
||||
|
||||
```shell
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open the local Next.js URL and confirm the card is styled with Tabler.
|
||||
|
||||
### Next steps
|
||||
|
||||
- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
|
||||
- Explore [Layout](/ui/layout) to choose page structures.
|
||||
- Browse [Components](/ui/components) to add UI building blocks.
|
||||
|
||||
</Steps>
|
||||
@@ -0,0 +1,98 @@
|
||||
---
|
||||
title: Nuxt
|
||||
order: 6
|
||||
summary: Set up Tabler in Nuxt and build a first working page.
|
||||
description: Integrate Tabler with Nuxt.
|
||||
icon: brand-nuxt
|
||||
seoDescription: Install `@tabler/core`, import CSS and client-only JS in Nuxt, and render a minimal page layout with a Tabler card.
|
||||
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'
|
||||
|
||||
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.
|
||||
|
||||
You will install `@tabler/core`, register the styles, add the client plugin, and render a first page with a Tabler card.
|
||||
|
||||
## Setup
|
||||
|
||||
<Steps>
|
||||
|
||||
### Install Tabler package
|
||||
|
||||
Install `@tabler/core` with your preferred package manager:
|
||||
|
||||
<TabsPackage name="@tabler/core" />
|
||||
|
||||
You can also use CDN files when you need a quick setup:
|
||||
|
||||
<CdnImportPackage />
|
||||
|
||||
### Import styles
|
||||
|
||||
Register Tabler CSS in `nuxt.config.ts`:
|
||||
|
||||
```ts
|
||||
export default defineNuxtConfig({
|
||||
css: ['@tabler/core/dist/css/tabler.min.css'],
|
||||
})
|
||||
```
|
||||
|
||||
For full theme customization, import SCSS sources in your app stylesheet:
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/scss/tabler';
|
||||
```
|
||||
|
||||
### Import and initialize JavaScript
|
||||
|
||||
Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
|
||||
|
||||
Nuxt-specific note: `tabler.min.js` accesses `document`, so load it only on the client. If you import it during SSR, Nuxt throws `document is not defined`.
|
||||
|
||||
Create a client-only plugin in `plugins/tabler.client.ts`:
|
||||
|
||||
```ts
|
||||
export default defineNuxtPlugin(async () => {
|
||||
await import('@tabler/core/dist/js/tabler.min.js')
|
||||
})
|
||||
```
|
||||
|
||||
### Minimal working example
|
||||
|
||||
Create a minimal `pages/index.vue` page:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl py-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Nuxt + Tabler</h3>
|
||||
<p class="text-secondary mb-0">Your Tabler setup is working.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
Run the app:
|
||||
|
||||
```shell
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open the local Nuxt URL and confirm the card is styled with Tabler.
|
||||
|
||||
### Next steps
|
||||
|
||||
- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
|
||||
- Explore [Layout](/ui/layout) to choose page structures.
|
||||
- Browse [Components](/ui/components) to add UI building blocks.
|
||||
|
||||
</Steps>
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
title: Rails
|
||||
order: 9
|
||||
summary: Set up Tabler in Rails and build a first working page.
|
||||
description: Integrate Tabler with Rails.
|
||||
icon: diamond
|
||||
seoDescription: Install `@tabler/core`, load CSS and optional JS in Rails, and render a minimal page layout with a Tabler card.
|
||||
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'
|
||||
|
||||
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`).
|
||||
|
||||
You will install `@tabler/core`, import its assets in your application bundles, and render a first view with a Tabler card.
|
||||
|
||||
## Setup
|
||||
|
||||
<Steps>
|
||||
|
||||
### Install Tabler package
|
||||
|
||||
Install `@tabler/core` with your preferred package manager:
|
||||
|
||||
<TabsPackage name="@tabler/core" />
|
||||
|
||||
You can also use CDN files when you need a quick setup:
|
||||
|
||||
<CdnImportPackage />
|
||||
|
||||
### Import styles
|
||||
|
||||
For Rails with `cssbundling-rails`, import Tabler CSS in `app/assets/stylesheets/application.scss`:
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/dist/css/tabler.min.css';
|
||||
```
|
||||
|
||||
For full theme customization, import SCSS sources instead:
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/scss/tabler';
|
||||
```
|
||||
|
||||
### Import and initialize JavaScript
|
||||
|
||||
Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
|
||||
|
||||
If you use `jsbundling-rails`, import Tabler JS in `app/javascript/application.js`:
|
||||
|
||||
```js
|
||||
import '@tabler/core/dist/js/tabler.min.js'
|
||||
```
|
||||
|
||||
Rails-specific note: if you use `importmap-rails` without npm bundling, prefer CDN for Tabler JS or add compiled files to your asset pipeline and include them from your layout.
|
||||
|
||||
### Minimal working example
|
||||
|
||||
Create a simple layout in `app/views/layouts/application.html.erb`:
|
||||
|
||||
```erb
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<%= csrf_meta_tags %>
|
||||
<%= csp_meta_tag %>
|
||||
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
|
||||
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
|
||||
</head>
|
||||
<body>
|
||||
<%= yield %>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Then add a simple page in `app/views/home/index.html.erb`:
|
||||
|
||||
```html
|
||||
<div class="page">
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl py-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Rails + Tabler</h3>
|
||||
<p class="text-secondary mb-0">Your Tabler setup is working.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Run the app:
|
||||
|
||||
```shell
|
||||
bin/rails server
|
||||
```
|
||||
|
||||
Open the local Rails URL and confirm the card is styled with Tabler.
|
||||
|
||||
### Next steps
|
||||
|
||||
- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
|
||||
- Explore [Layout](/ui/layout) to choose page structures.
|
||||
- Browse [Components](/ui/components) to add UI building blocks.
|
||||
|
||||
</Steps>
|
||||
@@ -0,0 +1,129 @@
|
||||
---
|
||||
title: React
|
||||
order: 2
|
||||
summary: Set up Tabler in React and build a first working page.
|
||||
description: Integrate Tabler with React.
|
||||
icon: brand-react
|
||||
seoDescription: Install `@tabler/core`, import CSS and JS in React, and render a minimal page layout with a Tabler card.
|
||||
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'
|
||||
|
||||
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.
|
||||
|
||||
This guide uses a standard Vite-based React setup. You will install `@tabler/core`, import its CSS and JS in your entry file, and render a first page with a Tabler card.
|
||||
|
||||
## Setup
|
||||
|
||||
<Steps>
|
||||
|
||||
### Install Tabler package
|
||||
|
||||
Install `@tabler/core` with your preferred package manager:
|
||||
|
||||
<TabsPackage name="@tabler/core" />
|
||||
|
||||
You can also use CDN files when you want a quick no-build setup:
|
||||
|
||||
<CdnImportPackage />
|
||||
|
||||
### Import styles
|
||||
|
||||
Import Tabler CSS once in your React entry file (`src/main.jsx`):
|
||||
|
||||
```jsx
|
||||
import '@tabler/core/dist/css/tabler.min.css'
|
||||
```
|
||||
|
||||
For full theme customization, import SCSS sources instead:
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/scss/tabler';
|
||||
```
|
||||
|
||||
### Import and initialize JavaScript
|
||||
|
||||
Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips. Import it once in `src/main.jsx`:
|
||||
|
||||
```jsx
|
||||
import '@tabler/core/dist/js/tabler.min.js'
|
||||
```
|
||||
|
||||
React-specific note: do not initialize DOM-based behavior during render. Use `useEffect`:
|
||||
|
||||
```jsx
|
||||
import { useEffect } from 'react'
|
||||
import { Tooltip } from '@tabler/core'
|
||||
|
||||
export function TooltipExample() {
|
||||
useEffect(() => {
|
||||
// Run DOM initialization only after the component is mounted.
|
||||
const elements = document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
elements.forEach((element) => new Tooltip(element))
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<button data-bs-toggle="tooltip" title="Example">
|
||||
Hover me
|
||||
</button>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Minimal working example
|
||||
|
||||
Create a simple `src/main.jsx` that loads Tabler assets and renders the app:
|
||||
|
||||
```jsx
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import '@tabler/core/dist/css/tabler.min.css'
|
||||
import '@tabler/core/dist/js/tabler.min.js'
|
||||
import App from './App.jsx'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
```
|
||||
|
||||
Then create `src/App.jsx` with a minimal Tabler layout and one card:
|
||||
|
||||
```jsx
|
||||
export default function App() {
|
||||
return (
|
||||
<div className="page">
|
||||
<div className="page-wrapper">
|
||||
<div className="container-xl py-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<h3 className="card-title">React + Tabler</h3>
|
||||
<p className="text-secondary mb-0">Your Tabler setup is working.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
Run the app:
|
||||
|
||||
```shell
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open the local Vite URL and confirm the card is styled with Tabler.
|
||||
|
||||
### Next steps
|
||||
|
||||
- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
|
||||
- Explore [Layout](/ui/layout) to choose page structures.
|
||||
- Browse [Components](/ui/components) to add UI building blocks.
|
||||
|
||||
</Steps>
|
||||
@@ -0,0 +1,113 @@
|
||||
---
|
||||
title: SvelteKit
|
||||
order: 10
|
||||
summary: Set up Tabler in SvelteKit and build a first working page.
|
||||
description: Integrate Tabler with SvelteKit.
|
||||
icon: brand-svelte
|
||||
seoDescription: Install `@tabler/core`, import CSS and optional JS in SvelteKit, and render a minimal page layout with a Tabler card.
|
||||
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'
|
||||
|
||||
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.
|
||||
|
||||
You will install `@tabler/core`, import its CSS globally, load the JavaScript from `onMount`, and render a first page with a Tabler card.
|
||||
|
||||
## Setup
|
||||
|
||||
<Steps>
|
||||
|
||||
### Install Tabler package
|
||||
|
||||
Install `@tabler/core` with your preferred package manager:
|
||||
|
||||
<TabsPackage name="@tabler/core" />
|
||||
|
||||
You can also use CDN files when you need a quick setup:
|
||||
|
||||
<CdnImportPackage />
|
||||
|
||||
### Import styles
|
||||
|
||||
Import Tabler CSS once in your global stylesheet (`src/app.css`):
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/dist/css/tabler.min.css';
|
||||
```
|
||||
|
||||
For full theme customization, import SCSS sources instead:
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/scss/tabler';
|
||||
```
|
||||
|
||||
### Import and initialize JavaScript
|
||||
|
||||
Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
|
||||
|
||||
In SvelteKit, load `tabler.min.js` only on the client. `onMount` runs only in the browser, so a dynamic import inside it never executes during SSR:
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
onMount(() => {
|
||||
import('@tabler/core/dist/js/tabler.min.js')
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
SvelteKit-specific note: `tabler.min.js` accesses `document`, so importing it during SSR can cause `document is not defined`.
|
||||
|
||||
### Minimal working example
|
||||
|
||||
Create a simple `src/routes/+layout.svelte` that loads global styles and Tabler JavaScript:
|
||||
|
||||
```html
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import '../app.css'
|
||||
|
||||
onMount(() => {
|
||||
import('@tabler/core/dist/js/tabler.min.js')
|
||||
})
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
```
|
||||
|
||||
Then add a minimal page in `src/routes/+page.svelte`:
|
||||
|
||||
```html
|
||||
<div class="page">
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl py-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">SvelteKit + Tabler</h3>
|
||||
<p class="text-secondary mb-0">Your Tabler setup is working.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Run the app:
|
||||
|
||||
```shell
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open the local SvelteKit URL and confirm the card is styled with Tabler.
|
||||
|
||||
### Next steps
|
||||
|
||||
- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
|
||||
- Explore [Layout](/ui/layout) to choose page structures.
|
||||
- Browse [Components](/ui/components) to add UI building blocks.
|
||||
|
||||
</Steps>
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
title: Symfony
|
||||
order: 7
|
||||
summary: Set up Tabler in Symfony and build a first working page.
|
||||
description: Integrate Tabler with Symfony.
|
||||
icon: brand-symfony
|
||||
seoDescription: Install `@tabler/core`, import CSS and JS with Symfony asset tooling, and render a minimal page layout with a Tabler card.
|
||||
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'
|
||||
|
||||
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.
|
||||
|
||||
This guide uses Webpack Encore. You will install `@tabler/core`, import its assets in your Encore entries, and render a first Twig template with a Tabler card.
|
||||
|
||||
## Setup
|
||||
|
||||
<Steps>
|
||||
|
||||
### Install Tabler package
|
||||
|
||||
Install `@tabler/core` with your preferred package manager:
|
||||
|
||||
<TabsPackage name="@tabler/core" />
|
||||
|
||||
You can also use CDN files when you need a quick setup:
|
||||
|
||||
<CdnImportPackage />
|
||||
|
||||
### Import styles
|
||||
|
||||
If you use Webpack Encore, import Tabler CSS in `assets/styles/app.scss`:
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/dist/css/tabler.min.css';
|
||||
```
|
||||
|
||||
For full theme customization, import SCSS sources instead:
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/scss/tabler';
|
||||
```
|
||||
|
||||
### Import and initialize JavaScript
|
||||
|
||||
Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips.
|
||||
|
||||
If you use Webpack Encore, import Tabler JS in `assets/app.js`:
|
||||
|
||||
```js
|
||||
import '@tabler/core/dist/js/tabler.min.js'
|
||||
```
|
||||
|
||||
Symfony-specific note: include generated Encore assets in your base Twig template: `{{ encore_entry_link_tags("app") }}` and `{{ encore_entry_script_tags("app") }}`.
|
||||
|
||||
If you use AssetMapper instead of Encore, use CDN links or copy built Tabler files to your public assets.
|
||||
|
||||
### Minimal working example
|
||||
|
||||
Create a minimal Twig layout in `templates/base.html.twig`:
|
||||
|
||||
```twig
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
{{ encore_entry_link_tags("app") }}
|
||||
</head>
|
||||
<body>
|
||||
{% block body %}{% endblock %}
|
||||
{{ encore_entry_script_tags("app") }}
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Then add a simple page in `templates/home/index.html.twig`:
|
||||
|
||||
```twig
|
||||
{% extends "base.html.twig" %}
|
||||
|
||||
{% block body %}
|
||||
<div class="page">
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl py-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Symfony + Tabler</h3>
|
||||
<p class="text-secondary mb-0">Your Tabler setup is working.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
Run the app and asset build:
|
||||
|
||||
```shell
|
||||
symfony server:start
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open the local Symfony URL and confirm the card is styled with Tabler.
|
||||
|
||||
### Next steps
|
||||
|
||||
- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
|
||||
- Explore [Layout](/ui/layout) to choose page structures.
|
||||
- Browse [Components](/ui/components) to add UI building blocks.
|
||||
|
||||
</Steps>
|
||||
@@ -0,0 +1,113 @@
|
||||
---
|
||||
title: Vue
|
||||
order: 4
|
||||
summary: Set up Tabler in Vue and build a first working page.
|
||||
description: Integrate Tabler with Vue.
|
||||
icon: brand-vue
|
||||
seoDescription: Install `@tabler/core`, import CSS and JS in Vue, and render a minimal page layout with a Tabler card.
|
||||
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'
|
||||
|
||||
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.
|
||||
|
||||
This guide uses a standard Vite-based Vue setup. You will install `@tabler/core`, import its CSS and JS in `src/main.js`, and render a first page with a Tabler card.
|
||||
|
||||
## Setup
|
||||
|
||||
<Steps>
|
||||
|
||||
### Install Tabler package
|
||||
|
||||
Install `@tabler/core` with your preferred package manager:
|
||||
|
||||
<TabsPackage name="@tabler/core" />
|
||||
|
||||
You can also use CDN files when you need a quick setup:
|
||||
|
||||
<CdnImportPackage />
|
||||
|
||||
### Import styles
|
||||
|
||||
Import Tabler CSS once in your Vue entry file (`src/main.js`):
|
||||
|
||||
```js
|
||||
import '@tabler/core/dist/css/tabler.min.css'
|
||||
```
|
||||
|
||||
For full theme customization, import SCSS sources instead:
|
||||
|
||||
```scss
|
||||
@import '@tabler/core/scss/tabler';
|
||||
```
|
||||
|
||||
### Import and initialize JavaScript
|
||||
|
||||
Tabler JavaScript is required for interactive components such as dropdowns, modals, and tooltips. Import it once in `src/main.js`:
|
||||
|
||||
```js
|
||||
import '@tabler/core/dist/js/tabler.min.js'
|
||||
```
|
||||
|
||||
Vue-specific note: initialize DOM-based behavior after mount, not during render. Use `onMounted` in components that need manual initialization:
|
||||
|
||||
```js
|
||||
import { onMounted } from 'vue'
|
||||
import { Tooltip } from '@tabler/core'
|
||||
|
||||
onMounted(() => {
|
||||
const elements = document.querySelectorAll('[data-bs-toggle="tooltip"]')
|
||||
elements.forEach((element) => new Tooltip(element))
|
||||
})
|
||||
```
|
||||
|
||||
### Minimal working example
|
||||
|
||||
Create a simple `src/main.js` that loads Tabler assets and mounts the app:
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import '@tabler/core/dist/css/tabler.min.css'
|
||||
import '@tabler/core/dist/js/tabler.min.js'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
```
|
||||
|
||||
Then create `src/App.vue` with a minimal Tabler layout and one card:
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-wrapper">
|
||||
<div class="container-xl py-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Vue + Tabler</h3>
|
||||
<p class="text-secondary mb-0">Your Tabler setup is working.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
Run the app:
|
||||
|
||||
```shell
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open the local Vite URL and confirm the card is styled with Tabler.
|
||||
|
||||
### Next steps
|
||||
|
||||
- Continue with [Customize](/ui/getting-started/customize) to adjust styles and build setup.
|
||||
- Explore [Layout](/ui/layout) to choose page structures.
|
||||
- Browse [Components](/ui/components) to add UI building blocks.
|
||||
|
||||
</Steps>
|
||||
@@ -5,6 +5,7 @@ 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'
|
||||
|
||||
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.
|
||||
|
||||
@@ -40,7 +41,7 @@ Follow these steps to set up Tabler for development:
|
||||
|
||||
To set up Tabler for development, follow these steps:
|
||||
|
||||
<div class="steps steps-vertical">
|
||||
<Steps>
|
||||
|
||||
### Ensure Node.js and pnpm are installed
|
||||
|
||||
@@ -68,7 +69,7 @@ pnpm run dev
|
||||
### Make changes
|
||||
|
||||
Make your changes in the appropriate folders, such as `./core/`, `./preview/` or `./docs/`. Avoid modifying files in any `dist` folders, as they are auto-generated during the build process and will be overwritten.
|
||||
</div>
|
||||
</Steps>
|
||||
|
||||
## Project structure
|
||||
|
||||
|
||||
@@ -2,16 +2,23 @@
|
||||
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."
|
||||
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 Example from '@shared/components/docs/Example.astro'
|
||||
import CdnImportPackage from '@shared/components/docs/CdnImportPackage.astro'
|
||||
import { Code } from 'astro:components'
|
||||
import { site } from '@shared/lib/site.ts'
|
||||
import Steps from '@shared/components/docs/Steps.astro'
|
||||
|
||||
Using a framework? See [Tabler framework integration guides](/ui/getting-started/frameworks).
|
||||
|
||||
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!
|
||||
|
||||
## Setup
|
||||
|
||||
<div class="steps steps-vertical">
|
||||
<Steps>
|
||||
|
||||
### Create a Basic HTML File
|
||||
|
||||
@@ -35,28 +42,26 @@ Begin by creating a new `index.html` file in the root of your project. This file
|
||||
|
||||
Enhance your page by including Tabler's CSS and JavaScript files. Use the following links to load the core Tabler styles and scripts from the CDN:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/css/tabler.min.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/js/tabler.min.js"></script>
|
||||
```
|
||||
<CdnImportPackage />
|
||||
|
||||
Update your HTML file to include these resources:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<Code
|
||||
lang="html"
|
||||
code={`<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Tabler Demo</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/css/tabler.min.css" />
|
||||
<link rel="stylesheet" href="${site.cdnUrl}/dist/css/tabler.min.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, Tabler!</h1>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/js/tabler.min.js"></script>
|
||||
<script src="${site.cdnUrl}/dist/js/tabler.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
</html>`}
|
||||
/>
|
||||
|
||||
This setup includes the Tabler CSS and JavaScript via a CDN, providing a responsive and functional base for your project.
|
||||
|
||||
@@ -66,6 +71,6 @@ You can also download the files and include them locally in your project. For mo
|
||||
|
||||
Save the file and open it in your browser. You should see your first Tabler-powered page! From here, you can start adding layouts and components to create a fully functional and visually appealing web application.
|
||||
|
||||
</div>
|
||||
</Steps>
|
||||
|
||||
With these simple steps, you're ready to explore Tabler's features and build stunning web interfaces. For inspiration and guidance, you can view live demos at [preview.tabler.io](https://preview.tabler.io) and consult our [official documentation](https://docs.tabler.io) for detailed instructions and examples.
|
||||
|
||||
@@ -9,6 +9,7 @@ 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'
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -16,9 +17,7 @@ This part of Tabler is distributed as a plugin. To enable it you should include
|
||||
|
||||
You can also include the plugin via CDN:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-flags.min.css" />
|
||||
```
|
||||
<CdnImportPlugin plugins={['flags']} />
|
||||
|
||||
## Flag
|
||||
|
||||
|
||||
@@ -8,6 +8,7 @@ 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'
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -15,9 +16,7 @@ This part of Tabler is distributed as a plugin. To enable it you should include
|
||||
|
||||
You can also include the plugin via CDN:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-payments.min.css" />
|
||||
```
|
||||
<CdnImportPlugin plugins={['payments']} />
|
||||
|
||||
## Payment
|
||||
|
||||
|
||||
@@ -9,6 +9,7 @@ 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'
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -16,9 +17,7 @@ This part of Tabler is distributed as a plugin. To enable it you should include
|
||||
|
||||
You can also include the plugin via CDN:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-socials.min.css" />
|
||||
```
|
||||
<CdnImportPlugin plugins={['socials']} />
|
||||
|
||||
## Social icons
|
||||
|
||||
|
||||
Reference in New Issue
Block a user