mirror of
https://github.com/tabler/tabler.git
synced 2026-08-03 17:04:39 +04:00
Add CONTRIBUTING.md, docs markdown linting and fixed dev server ports (#2714)
This commit is contained in:
Paweł Kuna
GitHub
@@ -8,7 +8,7 @@ import * as prettier from 'prettier'
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const docs: string[] = sync(join(__dirname, '..', 'docs', '**', '*.md'))
|
||||
const docs: string[] = sync(join(__dirname, '..', 'docs', 'pages', '**', '*.mdx'))
|
||||
|
||||
async function formatHTML(htmlString: string): Promise<string> {
|
||||
try {
|
||||
|
||||
@@ -2,4 +2,4 @@
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Updated the `active-users-2` card chart include to use `chart-id="active-users-2"` with `height="11"` for a more compact layout.
|
||||
Updated the `active-users-2` card chart to use `chart-id="active-users-2"` with `height="11"` for a more compact layout.
|
||||
|
||||
@@ -2,5 +2,4 @@
|
||||
"@tabler/preview": minor
|
||||
---
|
||||
|
||||
Added new `card-gradients.html` page showcasing various gradient card styles and components.
|
||||
|
||||
Added new `card-gradients` page showcasing various gradient card styles and components.
|
||||
|
||||
@@ -2,4 +2,4 @@
|
||||
"@tabler/preview": minor
|
||||
---
|
||||
|
||||
Added color palette to signing component.
|
||||
Added a color palette to the signature pad component for selecting the pen color.
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Updated the contributing guide, README and Docker setup for the Astro-based development toolchain.
|
||||
@@ -2,4 +2,4 @@
|
||||
"@tabler/preview": minor
|
||||
---
|
||||
|
||||
Added new `dashboard-crm.html` page with reusable CRM cards.
|
||||
Added new `dashboard-crm` page with reusable CRM cards.
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Updated dev servers to run on fixed ports: `3000` for preview and `3010` for docs.
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Fixed documentation formatting issues: heading hierarchy, missing image alt texts and broken list structure across docs pages.
|
||||
@@ -2,4 +2,4 @@
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Added `sitemap.xml` and `robots.txt` for the docs site, with a `sitemap` Eleventy collection and fixed docs layout title rendering outside production.
|
||||
Added `sitemap.xml` and `robots.txt` endpoints for the docs site and fixed docs layout title rendering outside production.
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Update Tabler Icons to v3.35.0
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
Use `.nvmrc` for Node version in CI workflows
|
||||
@@ -1,5 +0,0 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Updated icons to v3.34.1 with 75 new icons.
|
||||
@@ -1,8 +1,5 @@
|
||||
---
|
||||
"@tabler/core": minor
|
||||
"@tabler/preview": minor
|
||||
"@tabler/docs": minor
|
||||
---
|
||||
|
||||
Migrated build system from Rollup to Vite across all packages. Replaced `rollup.config.mjs` with `vite.config.mjs` and updated build scripts to use `vite build` instead of `rollup`. Build outputs remain identical (UMD and ESM formats) with no breaking changes for end users.
|
||||
|
||||
Migrated the core build system from Rollup to Vite. Replaced `rollup.config.mjs` with `vite.config.mjs` and updated build scripts to use `vite build` instead of `rollup`. Build outputs remain identical (UMD and ESM formats) with no breaking changes for end users.
|
||||
|
||||
@@ -3,5 +3,4 @@
|
||||
"@tabler/preview": minor
|
||||
---
|
||||
|
||||
Refactored navbar-side component by consolidating separate include files (apps, language, notifications, theme, user) into a single `navbar-side.html` file for better maintainability.
|
||||
|
||||
Refactored the navbar-side component and reorganized its apps, language, notifications, theme and user sections for better maintainability.
|
||||
|
||||
@@ -3,4 +3,4 @@
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Added `Progress Step` component documentation and updated `ui/progress-steps.html` formatting for cleaner rendered output.
|
||||
Added `Progress Step` component documentation and cleaned up the progress steps preview markup for cleaner rendered output.
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
demo/
|
||||
.git/
|
||||
.github/
|
||||
node_modules/
|
||||
**/node_modules/
|
||||
**/dist/
|
||||
**/.astro/
|
||||
packages-zip/
|
||||
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "./.markdownlint.json",
|
||||
"MD013": false,
|
||||
"MD024": {
|
||||
"siblings_only": true
|
||||
},
|
||||
"MD041": false
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
# Contributing to Tabler
|
||||
|
||||
Thank you for wanting to contribute! This is a short overview - the full guide lives in the documentation: [How to Contribute](https://docs.tabler.io/ui/getting-started/how-to-contribute/).
|
||||
|
||||
## Quick start
|
||||
|
||||
Requirements: Node.js 22.12+ and [pnpm](https://pnpm.io/).
|
||||
|
||||
```sh
|
||||
pnpm install
|
||||
pnpm run dev
|
||||
```
|
||||
|
||||
This starts the preview website at [http://localhost:3000](http://localhost:3000) and the documentation at [http://localhost:3010](http://localhost:3010), both with live reload.
|
||||
|
||||
## Where things live
|
||||
|
||||
- `core/` - the framework: SCSS (`core/scss/`) and JavaScript (`core/js/`)
|
||||
- `preview/` - demo website (Astro, pages in `preview/pages/*.astro`)
|
||||
- `docs/` - documentation website (Astro, pages in `docs/pages/**/*.mdx`)
|
||||
- `shared/astro/` - components and layouts shared by preview and docs (`@shared` alias)
|
||||
- `shared/data/` - JSON data for demo pages (`@data` alias)
|
||||
|
||||
Do not edit `dist/` folders - they are generated by the build.
|
||||
|
||||
## Before you open a pull request
|
||||
|
||||
1. **Branch off `dev`** and use the branch naming convention: `<type>/<short-description>`, for example `feat/gh-123-add-stepper-component` or `fix/markdown-table-overflow`. Allowed types: `feat`, `fix`, `docs`, `chore`, `refactor`, `test`, `build`, `ci`, `perf`, `style`, `revert`.
|
||||
2. **Build and test**: `pnpm run build` must pass. For docs changes, also run `pnpm run lint`.
|
||||
3. **Add a changeset** if your change affects any package: `pnpm exec changeset`. Use one sentence starting with `Added`, `Updated`, `Fixed` or `Removed`, with backticks for code tokens (for example `` Added `.btn-ghost` variant for buttons. ``).
|
||||
4. **Write the PR in English**: a concise title in present tense (max ~72 chars, no trailing period) and a short description that explains why the change is needed.
|
||||
|
||||
## Code style
|
||||
|
||||
- Use Bootstrap 5 conventions and Tabler's CSS custom properties pattern: `--#{$prefix}component-property`.
|
||||
- Write documentation in simple English: short sentences, common words, direct instructions.
|
||||
- Ensure changes work in all supported browsers (see the [browser support docs](https://docs.tabler.io/ui/getting-started/browser-support/)).
|
||||
|
||||
## Code of conduct
|
||||
|
||||
By participating, you agree to follow our [Code of Conduct](.github/CODE_OF_CONDUCT.md).
|
||||
+12
-14
@@ -1,20 +1,18 @@
|
||||
FROM ruby:3.2-alpine
|
||||
FROM node:22-alpine
|
||||
|
||||
WORKDIR /app
|
||||
ADD _config.yml /app/
|
||||
ADD _config_prod.yml /app/
|
||||
ADD package.json /app/
|
||||
ADD pnpm-lock.yaml /app/
|
||||
ADD gulpfile.js /app/
|
||||
|
||||
RUN apk add --virtual build-dependencies build-base npm
|
||||
RUN apk upgrade
|
||||
RUN npm i -g pnpm
|
||||
RUN pnpm install
|
||||
# pnpm via corepack, pinned by the "packageManager" field in package.json
|
||||
RUN corepack enable
|
||||
|
||||
# website
|
||||
COPY . .
|
||||
|
||||
RUN pnpm install --frozen-lockfile
|
||||
|
||||
# preview website
|
||||
EXPOSE 3000
|
||||
# website management (browser auto reload)
|
||||
EXPOSE 3001
|
||||
# run tabler
|
||||
# documentation website
|
||||
EXPOSE 3010
|
||||
|
||||
# run tabler dev servers
|
||||
ENTRYPOINT [ "pnpm", "run", "start" ]
|
||||
|
||||
@@ -49,7 +49,7 @@ Tabler is fully responsive and compatible with all modern browsers. Thanks to it
|
||||
|
||||
## 🚀 Features
|
||||
|
||||
We've created this admin panel for everyone who wants to create templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel that can be used by both simple websites and sophisticated systems. The only requirement is basic HTML and CSS (and some [Liquid](https://github.com/Shopify/liquid/wiki)) knowledge — as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
|
||||
We've created this admin panel for everyone who wants to create templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel that can be used by both simple websites and sophisticated systems. The only requirement is basic HTML and CSS knowledge — as a reward, you'll be able to manage and visualize different types of data in the easiest possible way!
|
||||
|
||||
* **Responsive:** With the support for mobile, tablet and desktop displays, it doesn’t matter what device you’re using. Tabler is responsive in all major browsers.
|
||||
* **Cross Browser:** Our theme works perfectly with the latest Chrome, Firefox+, Safari, Opera, Edge and mobile browsers. We work hard to provide continuous support for them.
|
||||
@@ -114,7 +114,7 @@ If you **do** wish to edit the source code after downloading it, for example to
|
||||
|
||||
### Installing and running development tools directly
|
||||
|
||||
1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
|
||||
1. [Install Node.js](https://nodejs.org/download/) (version 22.12 or newer), which we use to manage our dependencies.
|
||||
2. [Install pnpm](https://pnpm.io/installation) (We recommend either by [Using Corepack](https://pnpm.io/installation#using-corepack) or by [Using npm](https://pnpm.io/installation#using-npm))
|
||||
3. From the root `/tabler` directory where you downloaded the Tabler source files, run installation on the command line:
|
||||
```sh
|
||||
@@ -128,11 +128,10 @@ pnpm run start
|
||||
Changes to most of the source files of Tabler core, preview and docs will rebuild the application and refresh the page.
|
||||
|
||||
**Note**:
|
||||
If you wish to perform a one-off build without auto-refresh on any changes, you can run:
|
||||
If you wish to perform a one-off production build without a dev server, you can run:
|
||||
```sh
|
||||
pnpm run build
|
||||
```
|
||||
You can open [http://localhost:3001](http://localhost:3001) to configure the Web server.
|
||||
|
||||
|
||||
### Installing and running development tools with Docker
|
||||
@@ -145,15 +144,15 @@ Here is an example of how to use this image:
|
||||
```sh
|
||||
docker build -t tabler .
|
||||
```
|
||||
2. Run the tabler image. The following command mounts the `src` directory into the container, exposes port 3000 to browse the website locally, and exposes port 3001 to automatically sync changes:
|
||||
2. Run the tabler image. The following command mounts the source directories into the container, exposes port 3000 to browse the preview website and port 3010 to browse the documentation website:
|
||||
```sh
|
||||
docker run -p 3000:3000 -p 3001:3001 -v $(pwd)/src:/app/src tabler
|
||||
docker run -p 3000:3000 -p 3010:3010 -v $(pwd)/core:/app/core -v $(pwd)/preview:/app/preview -v $(pwd)/docs:/app/docs -v $(pwd)/shared:/app/shared tabler
|
||||
```
|
||||
3. Open your browser to [http://localhost:3000](http://localhost:3000). Edit anything in the `src/` folder and watch your browser refresh the page after it has been rebuilt.
|
||||
3. Open your browser to [http://localhost:3000](http://localhost:3000) (preview) or [http://localhost:3010](http://localhost:3010) (documentation). Edit anything in the `core/`, `preview/`, `docs/` or `shared/` folders and watch your browser refresh the page after it has been rebuilt.
|
||||
|
||||
**Docker Compose**
|
||||
|
||||
You can also use the docker compose config from this repo. From the root `/tabler` directory where you downloaded the Tabler source files, use `docker compose build && docker compose up` or `docker compose up --build` to build and start the container. Edit anything in the `src/` folder the same way as with plain docker and access the same URLs and ports in your browser.
|
||||
You can also use the docker compose config from this repo. From the root `/tabler` directory where you downloaded the Tabler source files, use `docker compose build && docker compose up` or `docker compose up --build` to build and start the container. Edit anything in the `core/`, `preview/`, `docs/` or `shared/` folders the same way as with plain docker and access the same URLs and ports in your browser.
|
||||
|
||||
## Bugs and feature requests
|
||||
|
||||
|
||||
+9
-4
@@ -1,5 +1,4 @@
|
||||
---
|
||||
version: "3.3"
|
||||
services:
|
||||
|
||||
tabler:
|
||||
@@ -8,8 +7,14 @@ services:
|
||||
build: .
|
||||
ports:
|
||||
- 3000:3000
|
||||
- 3001:3001
|
||||
- 3010:3010
|
||||
volumes:
|
||||
- ./src:/app/src
|
||||
- ./_config.yml:/app/_config.yml
|
||||
- ./core:/app/core
|
||||
- ./preview:/app/preview
|
||||
- ./docs:/app/docs
|
||||
- ./shared:/app/shared
|
||||
# keep the node_modules installed in the image (not overwritten by the mounts)
|
||||
- /app/core/node_modules
|
||||
- /app/preview/node_modules
|
||||
- /app/docs/node_modules
|
||||
tty: true
|
||||
|
||||
@@ -9,6 +9,12 @@ export default defineConfig({
|
||||
// pages live at the package root (./pages) — content-first layout; all
|
||||
// components/lib/data are shared (see the @shared alias)
|
||||
srcDir: '.',
|
||||
server: {
|
||||
port: 3010,
|
||||
// bind on all interfaces so the dev server is reachable from Docker
|
||||
// port mappings and other devices on the local network
|
||||
host: true,
|
||||
},
|
||||
vite: {
|
||||
// InlineScript.astro emits scripts inline at the component site —
|
||||
// docs pages have no <PageScripts /> drain
|
||||
|
||||
@@ -18,10 +18,10 @@ If you only want to change content (text or images) of the email template, you c
|
||||
1. Open the `compiled.html` file in your favorite code editor.
|
||||
2. Find the content you want to change inside the `<body>` element.
|
||||
3. Modify the content as needed:
|
||||
* Change the text, which is mostly placed inside the `<p>` or `<h1>` tags.
|
||||
* Change the images by replacing the `src` attribute of the `<img />` tag.
|
||||
* Change the links by replacing the `href` attribute of the `<a>` tag.
|
||||
* Remove the HTML elements you don't need, but only if you're sure that they are not necessary for the email template to work correctly.
|
||||
- Change the text, which is mostly placed inside the `<p>` or `<h1>` tags.
|
||||
- Change the images by replacing the `src` attribute of the `<img />` tag.
|
||||
- Change the links by replacing the `href` attribute of the `<a>` tag.
|
||||
- Remove the HTML elements you don't need, but only if you're sure that they are not necessary for the email template to work correctly.
|
||||
4. If you changed the images, make sure to replace them in the `assets/` folder.
|
||||
5. Remove all the images you don't use from `assets/` to reduce the size of the email template.
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
Once you unzip the downloaded file, you will see the following structure:
|
||||
|
||||
```
|
||||
```text
|
||||
tabler-emails/
|
||||
├── emails/
|
||||
| ├── absence/
|
||||
@@ -45,23 +45,29 @@ tabler-emails/
|
||||
The **Tabler Emails** package is organized into a clear and efficient folder structure to streamline the use of its assets. Below is a breakdown of its key directories:
|
||||
|
||||
### 1. Email Templates: `emails/`
|
||||
|
||||
This folder contains 123 email subfolders, each with a specific template. Each email folder contains the following files:
|
||||
* Compiled HTML files for light and dark themes. Read more about their usage in the [Compiled HTML](/emails/introduction/compiled-html) section.
|
||||
* Source HTML files for light and dark themes. Find more information in the [Source HTML](/emails/introduction/source-html) section.
|
||||
* Screenshot images for desktop and mobile views.
|
||||
* Assets folder with images used in the email template and the CSS file with styles.
|
||||
|
||||
- Compiled HTML files for light and dark themes. Read more about their usage in the [Compiled HTML](/emails/introduction/compiled-html) section.
|
||||
- Source HTML files for light and dark themes. Find more information in the [Source HTML](/emails/introduction/source-html) section.
|
||||
- Screenshot images for desktop and mobile views.
|
||||
- Assets folder with images used in the email template and the CSS file with styles.
|
||||
|
||||
### 2. Images: `images/`
|
||||
|
||||
It contains 4 subfolders with images used across the different email templates:
|
||||
* `chart-donuts/`: Images of donut charts with different fills.
|
||||
* `icons/`: [Tabler Icons](/icons) used in the email templates, in PNG version.
|
||||
* `illustrations/`: PNG versions of [Tabler Illustrations](/illustrations) for light and dark themes.
|
||||
* `overlays/`: Overlay images used in the email templates.
|
||||
|
||||
- `chart-donuts/`: Images of donut charts with different fills.
|
||||
- `icons/`: [Tabler Icons](/icons) used in the email templates, in PNG version.
|
||||
- `illustrations/`: PNG versions of [Tabler Illustrations](/illustrations) for light and dark themes.
|
||||
- `overlays/`: Overlay images used in the email templates.
|
||||
|
||||
### 3. License: `license.txt`
|
||||
|
||||
This file contains the license information for the Tabler Emails package.
|
||||
|
||||
### 4. Readme: `readme.html`
|
||||
|
||||
This file contains the main information about the Tabler Emails package, including a brief description and instructions on how to use it.
|
||||
|
||||
Do you like our templates? **Find out more and purchase on [our website](https://tabler.io/emails)**.
|
||||
|
||||
@@ -19,8 +19,8 @@ If you want to make more advanced changes to the email template, you can use the
|
||||
2. Open the `theme.css` file from the `assets/`* directory in the same editor.
|
||||
3. Change all the content and styles as needed.
|
||||
4. Use a selected tool to inline the CSS styles into the HTML file. There are a lot of options, such as:
|
||||
* Online tools like [Juice](https://automattic.github.io/juice/) or [Mailchimp CSS Inliner Tool](https://templates.mailchimp.com/resources/inline-css/).
|
||||
* NPM tools like [juice](https://www.npmjs.com/package/juice) or [inline-css](https://www.npmjs.com/package/inline-css).
|
||||
- Online tools like [Juice](https://automattic.github.io/juice/) or [Mailchimp CSS Inliner Tool](https://templates.mailchimp.com/resources/inline-css/).
|
||||
- NPM tools like [juice](https://www.npmjs.com/package/juice) or [inline-css](https://www.npmjs.com/package/inline-css).
|
||||
5. Save the output HTML file.
|
||||
|
||||
## How to use the source HTML files
|
||||
|
||||
@@ -7,7 +7,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -7,7 +7,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -7,7 +7,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -7,7 +7,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -6,7 +6,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -6,7 +6,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
@@ -19,16 +19,16 @@ All PNG files are stored in `icons` subdirectory.
|
||||
|
||||
## CDN
|
||||
|
||||
#### Outline version
|
||||
### Outline version
|
||||
|
||||
```html
|
||||
<img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/outline/home.png" />
|
||||
```
|
||||
|
||||
#### Filled version
|
||||
### Filled version
|
||||
|
||||
```html
|
||||
<img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/filled/home.png" />
|
||||
```
|
||||
|
||||
Instead of a specific version, you can use `latest` to always get the newest icons.
|
||||
Instead of a specific version, you can use `latest` to always get the newest icons.
|
||||
|
||||
@@ -8,7 +8,7 @@ import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import Icon from '@shared/components/Icon.astro'
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
@@ -62,13 +62,13 @@ Add an icon to be displayed on your page with the following markup (`activity` i
|
||||
|
||||
## CDN
|
||||
|
||||
#### Outline version
|
||||
### Outline version
|
||||
|
||||
```html
|
||||
<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/outline/home.svg" />
|
||||
```
|
||||
|
||||
#### Filled version
|
||||
### Filled version
|
||||
|
||||
```html
|
||||
<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/filled/home.svg" />
|
||||
|
||||
@@ -12,7 +12,7 @@ The Tabler Illustrations package offers a wide range of visual assets designed t
|
||||
|
||||
Once downloaded, unzip the compressed folder and you’ll see something like this:
|
||||
|
||||
```
|
||||
```text
|
||||
tabler-illustrations/
|
||||
├── eps/
|
||||
| ├── dark/
|
||||
@@ -41,38 +41,52 @@ tabler-illustrations/
|
||||
The **Tabler Illustrations** package is organized into a clear and efficient folder structure to streamline the use of its high-quality assets. Below is a breakdown of its key directories:
|
||||
|
||||
### 1. Vector Files: `eps/`
|
||||
|
||||
This folder contains EPS files for scalable vector illustrations.
|
||||
|
||||
- `dark/`: Dark-themed illustrations.
|
||||
- `light/`: Light-themed illustrations.
|
||||
|
||||
### 2. Design File: `figma/`
|
||||
|
||||
This folder contains a Figma file, perfect for designers who work directly in Figma.
|
||||
|
||||
### 3. Document Files: `pdf/`
|
||||
|
||||
This folder contains PDF files, ideal for print or presentation use.
|
||||
|
||||
- `dark/`: Dark-themed illustrations.
|
||||
- `light/`: Light-themed illustrations.
|
||||
|
||||
### 4. Transparent Images: `png/`
|
||||
|
||||
This folder stores PNG files with transparent backgrounds at 1600 × 1200px resolution.
|
||||
|
||||
- `dark/`: Dark-themed illustrations.
|
||||
- `light/`: Light-themed illustrations.
|
||||
|
||||
### 5. Background Images: `png-background/`
|
||||
|
||||
This folder contains PNG files with a dark background for enhanced contrast.
|
||||
|
||||
- `dark/`: Dark-themed illustrations.
|
||||
- `light/`: Light-themed illustrations.
|
||||
|
||||
### 6. Scalable Vector Graphics: `svg/`
|
||||
|
||||
This folder includes SVG files for scalable and customizable vector graphics.
|
||||
|
||||
- `dark/`: Dark-themed illustrations.
|
||||
- `light/`: Light-themed illustrations.
|
||||
|
||||
### 7. Adaptive Graphics: `svg-css-autodark/`
|
||||
|
||||
This folder contains SVG files prepared to automatically adjust their colors based on user settings, providing a dynamic and adaptive visual experience.
|
||||
|
||||
### 8. Themed Graphics: `svg-css-variables/`
|
||||
|
||||
This folder contains SVG files using CSS variables for flexible theming.
|
||||
|
||||
- `dark/`: Dark-themed illustrations.
|
||||
- `light/`: Light-themed illustrations.
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
### Personal License
|
||||
## Personal License
|
||||
|
||||
By purchasing Tabler Illustrations, you are granted an ongoing, non-exclusive license by codecalm.net to use Tabler Illustrations.
|
||||
|
||||
@@ -12,40 +12,42 @@ The license grants permission to one individual (the Licensee) to access and use
|
||||
|
||||
You **can**:
|
||||
|
||||
* Use the Tabler Illustrations to create unlimited End Products.
|
||||
* Modify the Tabler Illustrations to create derivative Tabler Illustrations. Those Tabler Illustrations are subject to this license.
|
||||
* Use the Tabler Illustrations to create unlimited End Products for unlimited Clients.
|
||||
* Use the Tabler Illustrations to create End Products where the End Product is sold to End Users.
|
||||
- Use the Tabler Illustrations to create unlimited End Products.
|
||||
- Modify the Tabler Illustrations to create derivative Tabler Illustrations. Those Tabler Illustrations are subject to this license.
|
||||
- Use the Tabler Illustrations to create unlimited End Products for unlimited Clients.
|
||||
- Use the Tabler Illustrations to create End Products where the End Product is sold to End Users.
|
||||
|
||||
You **cannot**:
|
||||
|
||||
* Use the Tabler Illustrations to create End Products that are designed to allow an End User to build their own End Products using the Tabler Illustrations or derivatives of the Tabler Illustrations.
|
||||
* Re-distribute the Tabler Illustrations or derivatives of the Tabler Illustrations separately from an End Product, neither in code nor as design assets.
|
||||
* Share your access to the Tabler Illustrations with any other individuals. You need a Team License for that to be allowed.
|
||||
* Use the Tabler Illustrations to create End Products that are open source and freely available to End Users.
|
||||
* Use the Tabler Illustrations to produce anything that may be deemed by codecalm.net, in their sole and absolute discretion, to be competitive or in conflict with the business of codecalm.net
|
||||
- Use the Tabler Illustrations to create End Products that are designed to allow an End User to build their own End Products using the Tabler Illustrations or derivatives of the Tabler Illustrations.
|
||||
- Re-distribute the Tabler Illustrations or derivatives of the Tabler Illustrations separately from an End Product, neither in code nor as design assets.
|
||||
- Share your access to the Tabler Illustrations with any other individuals. You need a Team License for that to be allowed.
|
||||
- Use the Tabler Illustrations to create End Products that are open source and freely available to End Users.
|
||||
- Use the Tabler Illustrations to produce anything that may be deemed by codecalm.net, in their sole and absolute discretion, to be competitive or in conflict with the business of codecalm.net
|
||||
|
||||
|
||||
#### Example usage
|
||||
### Example usage
|
||||
|
||||
Examples of usage **allowed** by the license:* Creating a personal website by yourself.
|
||||
* Creating a website or web application for a client that will be owned by that client.
|
||||
* Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
|
||||
* Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
|
||||
Examples of usage **allowed** by the license:
|
||||
|
||||
- Creating a personal website by yourself.
|
||||
- Creating a website or web application for a client that will be owned by that client.
|
||||
- Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
|
||||
- Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
|
||||
|
||||
Examples of usage **not allowed** by the license:
|
||||
|
||||
* Creating a repository of your favorite Tabler Illustrations (or derivatives based on Tabler Illustrations) and publishing it publicly.
|
||||
* Creating a UI library using Tabler Illustrations and making it available either for sale or for free.
|
||||
* Converting a Tabler Illustrations to another framework and making it available either for sale or for free.
|
||||
* Creating a Figma or Sketch file based on the Tabler Illustrations.
|
||||
* Creating a "website builder" project where end users can build their own websites using illustrations included with or derived from Tabler Illustrations.
|
||||
* Creating a theme, template, or project starter kit using the illustrations and making it available either for sale or for free.
|
||||
* Creating a web application where the primary purpose is clearly not to simply re-distribute the illustrations (like a conference organization app that uses the illustrations for its UI for example) that is free and open source, where the source code is publicly available.
|
||||
- Creating a repository of your favorite Tabler Illustrations (or derivatives based on Tabler Illustrations) and publishing it publicly.
|
||||
- Creating a UI library using Tabler Illustrations and making it available either for sale or for free.
|
||||
- Converting a Tabler Illustrations to another framework and making it available either for sale or for free.
|
||||
- Creating a Figma or Sketch file based on the Tabler Illustrations.
|
||||
- Creating a "website builder" project where end users can build their own websites using illustrations included with or derived from Tabler Illustrations.
|
||||
- Creating a theme, template, or project starter kit using the illustrations and making it available either for sale or for free.
|
||||
- Creating a web application where the primary purpose is clearly not to simply re-distribute the illustrations (like a conference organization app that uses the illustrations for its UI for example) that is free and open source, where the source code is publicly available.
|
||||
|
||||
In simple terms, use Tabler Illustrations for anything you like as long as it doesn't compete with Tabler Illustrations.
|
||||
|
||||
### Team License
|
||||
## Team License
|
||||
|
||||
By purchasing Tabler Illustrations, you are granted an ongoing, non-exclusive license by codecalm.net to use Tabler Illustrations.
|
||||
|
||||
@@ -53,39 +55,39 @@ The license grants permission for up to 10 Employees and Contractors of the Lice
|
||||
|
||||
You **can**:
|
||||
|
||||
* Use the Tabler Illustrations to create unlimited End Products.
|
||||
* Modify the Tabler Illustrations to create derivative Tabler Illustrations. Those Tabler Illustrations are subject to this license.
|
||||
* Use the Tabler Illustrations to create unlimited End Products for unlimited Clients.
|
||||
* Use the Tabler Illustrations to create End Products where the End Product is sold to End Users.
|
||||
- Use the Tabler Illustrations to create unlimited End Products.
|
||||
- Modify the Tabler Illustrations to create derivative Tabler Illustrations. Those Tabler Illustrations are subject to this license.
|
||||
- Use the Tabler Illustrations to create unlimited End Products for unlimited Clients.
|
||||
- Use the Tabler Illustrations to create End Products where the End Product is sold to End Users.
|
||||
|
||||
You **cannot**:
|
||||
|
||||
* Use the Tabler Illustrations to create End Products that are designed to allow an End User to build their own End Products using the Tabler Illustrations or derivatives of the Tabler Illustrations.
|
||||
* Re-distribute the Tabler Illustrations or derivatives of the Tabler Illustrations separately from an End Product.
|
||||
* Use the Tabler Illustrations to create End Products that are the property of any individual or entity other than the Licensee or Clients of the Licensee.
|
||||
* Grant access to the Tabler Illustrations to individuals who are not an Employee or Contractor of the Licensee.
|
||||
* Use the Tabler Illustrations to create End Products that are open source and freely available to End Users.
|
||||
* Use the Tabler Illustrations to produce anything that may be deemed by codecalm.net, in their sole and absolute discretion, to be competitive or in conflict with the business of codecalm.net
|
||||
- Use the Tabler Illustrations to create End Products that are designed to allow an End User to build their own End Products using the Tabler Illustrations or derivatives of the Tabler Illustrations.
|
||||
- Re-distribute the Tabler Illustrations or derivatives of the Tabler Illustrations separately from an End Product.
|
||||
- Use the Tabler Illustrations to create End Products that are the property of any individual or entity other than the Licensee or Clients of the Licensee.
|
||||
- Grant access to the Tabler Illustrations to individuals who are not an Employee or Contractor of the Licensee.
|
||||
- Use the Tabler Illustrations to create End Products that are open source and freely available to End Users.
|
||||
- Use the Tabler Illustrations to produce anything that may be deemed by codecalm.net, in their sole and absolute discretion, to be competitive or in conflict with the business of codecalm.net
|
||||
|
||||
#### Example usage
|
||||
### Example usage
|
||||
|
||||
Examples of usage **allowed** by the license:
|
||||
|
||||
* Creating a website for your company.
|
||||
* Creating a website or web application for a client that will be owned by that client.
|
||||
* Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
|
||||
* Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
|
||||
- Creating a website for your company.
|
||||
- Creating a website or web application for a client that will be owned by that client.
|
||||
- Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application.
|
||||
- Creating a commercial self-hosted web application that is sold to end users for a one-time fee.
|
||||
|
||||
Examples of use **not allowed** by the license:
|
||||
|
||||
* Creating a repository of your favorite Tabler Illustrations (or derivatives based on Tabler Illustrations) and publishing it publicly.
|
||||
* Creating a UI library using Tabler Illustrations and making it available either for sale or for free.
|
||||
* Converting a Tabler Illustrations to another framework and making it available either for sale or for free.
|
||||
* Creating a "website builder" project where end users can build their own websites using illustrations included with or derived from Tabler Illustrations.
|
||||
* Creating a theme or template using the illustrations and making it available either for sale or for free.
|
||||
* Creating any End Product that is not the sole property of either your company or a client of your company. For example your employees/contractors can't use your company Tabler Illustrations license to build their own websites or side projects.
|
||||
* Giving someone access to Tabler Illustrations when they purchase a product from you. For example, you can't use a Team License as a way to give someone access to Tabler Illustrations when they purchase an online course from you.
|
||||
* Selling access to your team account to people who don't work for you company.
|
||||
- Creating a repository of your favorite Tabler Illustrations (or derivatives based on Tabler Illustrations) and publishing it publicly.
|
||||
- Creating a UI library using Tabler Illustrations and making it available either for sale or for free.
|
||||
- Converting a Tabler Illustrations to another framework and making it available either for sale or for free.
|
||||
- Creating a "website builder" project where end users can build their own websites using illustrations included with or derived from Tabler Illustrations.
|
||||
- Creating a theme or template using the illustrations and making it available either for sale or for free.
|
||||
- Creating any End Product that is not the sole property of either your company or a client of your company. For example your employees/contractors can't use your company Tabler Illustrations license to build their own websites or side projects.
|
||||
- Giving someone access to Tabler Illustrations when they purchase a product from you. For example, you can't use a Team License as a way to give someone access to Tabler Illustrations when they purchase an online course from you.
|
||||
- Selling access to your team account to people who don't work for you company.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -11,7 +11,7 @@ To be able to use the autosize in your application you will need to install the
|
||||
|
||||
## Default markup
|
||||
|
||||
Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it.
|
||||
Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it.
|
||||
|
||||
To create autosize textarea, add the `data-bs-toggle="autosize"` attribute to the textarea element:
|
||||
|
||||
|
||||
@@ -100,6 +100,6 @@ Use `.badge-sm` or `.badge-lg` to change badge size according to your needs. The
|
||||
</Example>
|
||||
|
||||
|
||||
## More examples
|
||||
## More examples
|
||||
|
||||
If you want to see more examples of badges, you can check out the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/badge/) for badges. You can also find more examples in the Tabler [Badges](https://preview.tabler.io/badges.html) preview.
|
||||
|
||||
@@ -65,7 +65,7 @@ Here is a list of classes:
|
||||
{gradients.map((gradient, i) => { return ( <li class={`card-gradient-${gradient}`}>{gradient.charAt(0).toUpperCase() + gradient.slice(1)}</li> ) })}
|
||||
</ul>
|
||||
<Example>
|
||||
|
||||
|
||||
{gradients.map((gradient, i) => {
|
||||
return (
|
||||
<div class={`card card-gradient card-gradient-${gradient}`}>
|
||||
|
||||
@@ -12,7 +12,7 @@ import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
You can adjust the datagrid to your needs by setting the values of variables:
|
||||
|
||||
| Variable | Description | Default |
|
||||
|----------|-------------|---------|
|
||||
| `--tblr-datagrid-item-width` | Width of the datagrid item | `15rem` |
|
||||
| `--tblr-datagrid-padding` | Gap between the datagrid items | `1.5rem` |
|
||||
| Variable | Description | Default |
|
||||
|------------------------------|--------------------------------|----------|
|
||||
| `--tblr-datagrid-item-width` | Width of the datagrid item | `15rem` |
|
||||
| `--tblr-datagrid-padding` | Gap between the datagrid items | `1.5rem` |
|
||||
|
||||
@@ -24,7 +24,7 @@ When you have a lot of pages, you can use first and last links to quickly naviga
|
||||
|
||||
## Offset
|
||||
|
||||
If the count of pages is too large, you can use offset to show only a few pages at a time.
|
||||
If the count of pages is too large, you can use offset to show only a few pages at a time.
|
||||
|
||||
<Example centered vertical>
|
||||
<Pagination offset={3} count={20} />
|
||||
|
||||
@@ -33,7 +33,7 @@ The example below shows the default progress step structure.
|
||||
Use color classes to mark completed steps. Set `aria-current="step"` on the current item.
|
||||
|
||||
<Example>
|
||||
<ProgressSteps count={4} active={2} ariaLabel="Setup progress" />
|
||||
<ProgressSteps count={4} active={2} ariaLabel="Setup progress" />
|
||||
</Example>
|
||||
|
||||
### Custom labels
|
||||
@@ -41,7 +41,7 @@ Use color classes to mark completed steps. Set `aria-current="step"` on the curr
|
||||
Use hidden labels so assistive technologies can announce meaningful step names.
|
||||
|
||||
<Example>
|
||||
<ProgressSteps labels="Account,Profile,Billing,Review" active={3} ariaLabel="Checkout progress" />
|
||||
<ProgressSteps labels="Account,Profile,Billing,Review" active={3} ariaLabel="Checkout progress" />
|
||||
</Example>
|
||||
|
||||
### Color state
|
||||
@@ -57,5 +57,5 @@ Use contextual background classes on completed and current items. This helps mat
|
||||
Use utility classes on `.progress-steps` to control width and placement in layouts.
|
||||
|
||||
<Example>
|
||||
<ProgressSteps count={5} active={1} class="w-50" id="profile-progress" ariaLabel="Profile completion" />
|
||||
<ProgressSteps count={5} active={1} class="w-50" id="profile-progress" ariaLabel="Profile completion" />
|
||||
</Example>
|
||||
|
||||
@@ -51,7 +51,7 @@ You can create a progress bar which shows indeterminate progress by adding `.pro
|
||||
You can also use the native HTML5 `<progress>` element. It is a great way to create a progress bar without the need for additional HTML elements. This is what it looks like:
|
||||
|
||||
<Example>
|
||||
<progress class="progress progress-sm" value="15" max="100" />
|
||||
<progress class="progress progress-sm" value="15" max="100" />
|
||||
</Example>
|
||||
|
||||
## Progress color
|
||||
@@ -112,7 +112,7 @@ page, the progress bar could gradually fill up, creating a sense of momentum and
|
||||
Thanks to this you can create a nice looking statistics section:
|
||||
|
||||
<Example columnFullWidth>
|
||||
<ProgressBg value="65" text="Poland" showValue true /> <ProgressBg value="35" text="Germany" showValue true /> <ProgressBg value="28" text="United States" showValue true /> <ProgressBg value="20" text="United Kingdom" showValue true /> <ProgressBg value="15" text="France" showValue true />
|
||||
<ProgressBg value="65" text="Poland" showValue true /> <ProgressBg value="35" text="Germany" showValue true /> <ProgressBg value="28" text="United States" showValue true /> <ProgressBg value="20" text="United Kingdom" showValue true /> <ProgressBg value="15" text="France" showValue true />
|
||||
</Example>
|
||||
|
||||
## Progress background colors
|
||||
@@ -120,5 +120,5 @@ Thanks to this you can create a nice looking statistics section:
|
||||
You can combine progress background with contextual light colors to better separate categories.
|
||||
|
||||
<Example columnFullWidth>
|
||||
<ProgressBg value="75" text="Success" color="success-lt" showValue true /> <ProgressBg value="60" text="Warning" color="warning-lt" showValue true /> <ProgressBg value="40" text="Danger" color="danger-lt" showValue true /> <ProgressBg value="90" text="Info" color="info-lt" showValue true />
|
||||
<ProgressBg value="75" text="Success" color="success-lt" showValue true /> <ProgressBg value="60" text="Warning" color="warning-lt" showValue true /> <ProgressBg value="40" text="Danger" color="danger-lt" showValue true /> <ProgressBg value="90" text="Info" color="info-lt" showValue true />
|
||||
</Example>
|
||||
|
||||
@@ -57,7 +57,7 @@ The results can be seen in the example below.
|
||||
<nav class="nav nav-segmented nav-segmented-vertical" role="tablist"> <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page" > <Icon name="list" /> List </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> <Icon name="layout" /> Kanban </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> <Icon name="calendar" /> Calendar </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> <Icon name="files" /> Files </button> </nav>
|
||||
</Example>
|
||||
|
||||
## Sizes
|
||||
## Sizes
|
||||
|
||||
You can also change the size of the segmented control. To do this, add the `nav-sm` or `nv-lg` class to the `nav` element. The `nav-sm` class will make the segmented control smaller, while the `nav-lg` class will make it larger.
|
||||
|
||||
|
||||
@@ -53,7 +53,7 @@ The dots can also be animated. To do this, add the `.status-dot-animated` class.
|
||||
<span class="status-dot status-dot-animated status-blue"></span>
|
||||
```
|
||||
|
||||
The animated status dots can be used in the same way as the regular status dots.
|
||||
The animated status dots can be used in the same way as the regular status dots.
|
||||
|
||||
<Example>
|
||||
<span class="status-dot status-dot-animated status-blue"></span> <span class="status-dot status-dot-animated status-azure"></span> <span class="status-dot status-dot-animated status-indigo"></span> <span class="status-dot status-dot-animated status-purple"></span> <span class="status-dot status-dot-animated status-pink"></span> <span class="status-dot status-dot-animated status-red"></span> <span class="status-dot status-dot-animated status-orange"></span> <span class="status-dot status-dot-animated status-yellow"></span> <span class="status-dot status-dot-animated status-lime"></span> <span class="status-dot status-dot-animated status-green"></span> <span class="status-dot status-dot-animated status-teal"></span> <span class="status-dot status-dot-animated status-cyan"></span>
|
||||
|
||||
@@ -11,7 +11,7 @@ import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
Steps provide a clear visual representation of a user’s progress through a multi-step process. By showing what has been completed and what remains, steps enhance usability and encourage task completion.
|
||||
|
||||
To create a default progress tracker, use the `.steps` class and define each step as a `.step-item`. The active step clearly indicates the current position in the process.
|
||||
To create a default progress tracker, use the `.steps` class and define each step as a `.step-item`. The active step clearly indicates the current position in the process.
|
||||
|
||||
```html
|
||||
<div class="steps">
|
||||
@@ -75,7 +75,7 @@ For designs with limited space, use progress indicators without titles and add t
|
||||
|
||||
## Steps with numbers
|
||||
|
||||
Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.
|
||||
Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.
|
||||
|
||||
```html
|
||||
<div class="steps steps-counter">...</div>
|
||||
|
||||
@@ -14,7 +14,7 @@ import Payment from '@shared/components/ui/Payment.astro';
|
||||
Use `.tag` for one inline tag item. The base style supports text and an optional `.btn-close` remove action.
|
||||
|
||||
<Example centered>
|
||||
<span class="tag"> Label <a href="#" class="btn-close" aria-label="Remove label"></a> </span>
|
||||
<span class="tag"> Label <a href="#" class="btn-close" aria-label="Remove label"></a> </span>
|
||||
</Example>
|
||||
|
||||
## Variants
|
||||
@@ -24,7 +24,7 @@ Use `.tag` for one inline tag item. The base style supports text and an optional
|
||||
Use `.tag-icon` for a leading icon inside a tag. The icon uses compact size and secondary text color.
|
||||
|
||||
<Example centered>
|
||||
<span class="tag"> <Icon name="star" class="tag-icon" /> Featured <a href="#" class="btn-close" aria-label="Remove featured tag"></a> </span>
|
||||
<span class="tag"> <Icon name="star" class="tag-icon" /> Featured <a href="#" class="btn-close" aria-label="Remove featured tag"></a> </span>
|
||||
</Example>
|
||||
|
||||
### With avatar, flag, or payment
|
||||
@@ -40,7 +40,7 @@ Use `.tag-avatar`, `.tag-flag`, or `.tag-payment` to add media at the start of t
|
||||
Use `.tag-badge` for small numeric or status counters. The badge variant keeps compact padding for tag layout.
|
||||
|
||||
<Example centered>
|
||||
<span class="tag"> Notifications <span class="badge tag-badge">12</span> <a href="#" class="btn-close" aria-label="Remove notifications tag"></a> </span>
|
||||
<span class="tag"> Notifications <span class="badge tag-badge">12</span> <a href="#" class="btn-close" aria-label="Remove notifications tag"></a> </span>
|
||||
</Example>
|
||||
|
||||
### With checkbox
|
||||
@@ -48,7 +48,7 @@ Use `.tag-badge` for small numeric or status counters. The badge variant keeps c
|
||||
Use `.tag-check` on a checkbox when the tag should be selectable. This variant is useful for filter sets and selectable labels.
|
||||
|
||||
<Example centered>
|
||||
<span class="tag"> <input type="checkbox" class="form-check-input tag-check" checked /> Selected <a href="#" class="btn-close" aria-label="Remove selected tag"></a> </span>
|
||||
<span class="tag"> <input type="checkbox" class="form-check-input tag-check" checked /> Selected <a href="#" class="btn-close" aria-label="Remove selected tag"></a> </span>
|
||||
</Example>
|
||||
|
||||
## Examples
|
||||
|
||||
@@ -27,7 +27,7 @@ Look at the examples below to see how the image check works:
|
||||
|
||||
## Radio buttons
|
||||
|
||||
If you want to use the image check as a radio button, you can change the input type to `radio`.
|
||||
If you want to use the image check as a radio button, you can change the input type to `radio`.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Image Check Radio</label> <div class="row g-2"> <div class="col-3"> <label class="form-imagecheck mb-2"> <input name="image" type="radio" value="1" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <img src="/static/photos/woman-drinking-hot-tea-in-her-home-office.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> <div class="col-3"> <label class="form-imagecheck mb-2"> <input name="image" type="radio" value="2" class="form-imagecheck-input" checked /> <span class="form-imagecheck-figure"> <img src="/static/photos/young-woman-sitting-on-the-sofa-and-working-on-her-laptop-3.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> <div class="col-3"> <label class="form-imagecheck mb-2"> <input name="image" type="radio" value="3" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <img src="/static/photos/beautiful-blonde-woman-relaxing-with-a-can-of-coke-on-a-tree-stump-by-the-beach.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> <div class="col-3"> <label class="form-imagecheck mb-2"> <input name="image" type="radio" value="4" class="form-imagecheck-input" checked /> <span class="form-imagecheck-figure"> <img src="/static/photos/book-on-the-grass.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> </div> </div>
|
||||
|
||||
@@ -44,7 +44,7 @@ To set up Tabler for development, follow these steps:
|
||||
|
||||
### Ensure Node.js and pnpm are installed
|
||||
|
||||
You’ll need Node.js (v20 or higher) and pnpm to compile Tabler’s files. If you don’t have them installed, download and install them from the official websites:
|
||||
You’ll need Node.js (v22.12 or higher) and pnpm to compile Tabler’s files. If you don’t have them installed, download and install them from the official websites:
|
||||
|
||||
- [Node.js](https://nodejs.org/)
|
||||
- [pnpm](https://pnpm.io/) (we use pnpm over other package managers for faster installation).
|
||||
@@ -70,6 +70,32 @@ pnpm run dev
|
||||
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>
|
||||
|
||||
## Project structure
|
||||
|
||||
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/Button.astro'`.
|
||||
- `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 a new feature, document it in `docs/pages/`.
|
||||
|
||||
## Add a changeset
|
||||
|
||||
If your change affects any package (new feature, bug fix, new page), add a changeset - a short note used to build the changelog:
|
||||
|
||||
```bash
|
||||
pnpm exec changeset
|
||||
```
|
||||
|
||||
Select the affected packages (`@tabler/core`, `@tabler/preview` or `@tabler/docs`), pick the bump type (`patch` for fixes, `minor` for new features) and write a one-sentence description, for example: `Added .btn-ghost variant for buttons.`
|
||||
|
||||
## Compiling for Production
|
||||
|
||||
Before submitting a pull request, ensure your changes are properly compiled and tested:
|
||||
|
||||
@@ -14,4 +14,4 @@ Tabler is fully responsive and compatible with all modern browsers. Thanks to it
|
||||
|
||||
Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully responsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community.
|
||||
|
||||
<img src="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview.png?2" src-dark="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview-dark.png?2" alt="Screencap of tabler site showing global traffic and statistics" />
|
||||
<img src="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview.png?2" src-dark="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview-dark.png?2" alt="Screencap of tabler site showing global traffic and statistics" />
|
||||
|
||||
@@ -9,6 +9,8 @@ import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
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">
|
||||
|
||||
### Create a Basic HTML File
|
||||
|
||||
@@ -11,6 +11,7 @@ Tabler is an open-source project licensed under the **MIT license**, giving you
|
||||
## What You Can Do with Tabler
|
||||
|
||||
The MIT license allows you to:
|
||||
|
||||
- Use Tabler in **commercial projects**.
|
||||
- Use Tabler in **personal or private projects**.
|
||||
- **Modify and customize** the source code to fit your requirements.
|
||||
@@ -24,6 +25,7 @@ The MIT license allows you to:
|
||||
## What You Must Do When Using Tabler
|
||||
|
||||
When using Tabler, you must:
|
||||
|
||||
1. Include the **license notice** in all copies of the work.
|
||||
2. Include the **copyright notice** in all copies of the work, except for the footer of the example HTML pages provided in the repository.
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ Navigation bars are essential components of modern web applications, providing u
|
||||
If you want to create a horizontal navigation bar, you can use the `.nav` class. The `.nav-item` class is used to style each item within the navigation bar, and `.nav-link` is applied to the links. The `.active` class highlights the current active link, while the `.disabled` class styles non-clickable links.
|
||||
|
||||
Look at the example below to see how the horizontal navigation bar is displayed.
|
||||
|
||||
|
||||
<Example>
|
||||
<ul class="nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" aria-disabled="true">Disabled</a> </li> </ul>
|
||||
</Example>
|
||||
|
||||
@@ -120,11 +120,9 @@ Use gradient utilities on card sections to highlight key content areas.
|
||||
<h3 class="card-title mb-1">Performance</h3>
|
||||
<p class="text-secondary mb-0">Weekly trend overview</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="mb-0">Card content</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ import Example from '@shared/components/docs/Example.astro';
|
||||
Margin utilities allow you to control the space between elements, providing flexibility to suit different design needs. These utilities are especially useful for creating spacing between components or aligning them consistently. Below are examples of how to use margin utilities for various directions and sizes.
|
||||
|
||||
|
||||
### Margin size
|
||||
## Margin size
|
||||
|
||||
In the table below you can see the available margin sizes.
|
||||
|
||||
@@ -26,7 +26,7 @@ Name|Value
|
||||
8|8rem
|
||||
|
||||
|
||||
### Margin
|
||||
## Margin
|
||||
|
||||
Use the `.m-*` utilities to control the margin of an element. Margin utilities are used to create consistent spacing around an element, ensuring that the layout is visually balanced.
|
||||
|
||||
@@ -34,7 +34,7 @@ Use the `.m-*` utilities to control the margin of an element. Margin utilities a
|
||||
<div class="d-flex"> <div class="bg-purple-lt"> <div class="px-3 py-2 m-0 bg-purple rounded text-white font-monospace">.m-0</div> </div> </div> <div class="d-flex"> <div class="bg-purple-lt"> <div class="px-3 py-2 m-4 bg-purple rounded text-white font-monospace">.m-4</div> </div> </div> <div class="d-flex"> <div class="bg-purple-lt"> <div class="px-3 py-2 m-8 bg-purple rounded text-white font-monospace">.m-8</div> </div> </div>
|
||||
</Example>
|
||||
|
||||
### Start margin
|
||||
## Start margin
|
||||
|
||||
Start margins control the spacing to the left of an element, helping to create consistent horizontal gaps between elements. Start margin class names are prefixed with `ms-`.
|
||||
|
||||
@@ -46,7 +46,7 @@ Start margins control the spacing to the left of an element, helping to create c
|
||||
<div class="d-flex"> <div class="bg-red-lt"> <div class="px-3 py-2 ms-0 bg-red rounded text-white font-monospace">.ms-0</div> </div> </div> <div class="d-flex"> <div class="bg-red-lt"> <div class="px-3 py-2 ms-4 bg-red rounded text-white font-monospace">.ms-4</div> </div> </div> <div class="d-flex"> <div class="bg-red-lt"> <div class="px-3 py-2 ms-8 bg-red rounded text-white font-monospace">.ms-8</div> </div> </div>
|
||||
</Example>
|
||||
|
||||
### End margin
|
||||
## End margin
|
||||
|
||||
End margins control the spacing on the right side of an element. These utilities are helpful for creating visual separation between elements that flow horizontally. End margin class names are prefixed with `me-`.
|
||||
|
||||
@@ -58,7 +58,7 @@ End margins control the spacing on the right side of an element. These utilities
|
||||
<div class="d-flex"> <div class="bg-orange-lt"> <div class="px-3 py-2 ms-0 bg-orange rounded text-white font-monospace">.me-0</div> </div> </div> <div class="d-flex"> <div class="bg-orange-lt"> <div class="px-3 py-2 me-4 bg-orange rounded text-white font-monospace">.me-4</div> </div> </div> <div class="d-flex"> <div class="bg-orange-lt"> <div class="px-3 py-2 me-8 bg-orange rounded text-white font-monospace">.me-8</div> </div> </div>
|
||||
</Example>
|
||||
|
||||
### Top margin
|
||||
## Top margin
|
||||
|
||||
Top margins define the spacing above an element. This is useful for separating stacked components or creating vertical spacing between sections. Top margin class names are prefixed with `mt-`.
|
||||
|
||||
@@ -70,7 +70,7 @@ Top margins define the spacing above an element. This is useful for separating s
|
||||
<div class="d-flex"> <div class="bg-yellow-lt"> <div class="px-3 py-2 mt-0 bg-yellow rounded text-white font-monospace">.mt-0</div> </div> </div> <div class="d-flex"> <div class="bg-yellow-lt"> <div class="px-3 py-2 mt-4 bg-yellow rounded text-white font-monospace">.mt-4</div> </div> </div> <div class="d-flex"> <div class="bg-yellow-lt"> <div class="px-3 py-2 mt-8 bg-yellow rounded text-white font-monospace">.mt-8</div> </div> </div>
|
||||
</Example>
|
||||
|
||||
### Bottom margin
|
||||
## Bottom margin
|
||||
|
||||
Bottom margins control the spacing below an element, helping to create consistent vertical gaps between stacked elements. Bottom margin class names are prefixed with `mb-`.
|
||||
|
||||
@@ -82,7 +82,7 @@ Bottom margins control the spacing below an element, helping to create consisten
|
||||
<div class="d-flex"> <div class="bg-lime-lt"> <div class="px-3 py-2 mb-0 bg-lime rounded text-white font-monospace">.mb-0</div> </div> </div> <div class="d-flex"> <div class="bg-lime-lt"> <div class="px-3 py-2 mb-4 bg-lime rounded text-white font-monospace">.mb-4</div> </div> </div> <div class="d-flex"> <div class="bg-lime-lt"> <div class="px-3 py-2 mb-8 bg-lime rounded text-white font-monospace">.mb-8</div> </div> </div>
|
||||
</Example>
|
||||
|
||||
### Horizontal margin
|
||||
## Horizontal margin
|
||||
|
||||
Use the `mx-*` utilities to control the horizontal margin of an element. Horizontal margin utilities are used to create consistent spacing between elements that flow horizontally.
|
||||
|
||||
@@ -95,7 +95,7 @@ Use the `mx-*` utilities to control the horizontal margin of an element. Horizon
|
||||
</Example>
|
||||
|
||||
|
||||
### Vertical margin
|
||||
## Vertical margin
|
||||
|
||||
Use the `my-*` utilities to control the vertical margin of an element. Vertical margin utilities are used to create consistent spacing between elements that flow vertically.
|
||||
|
||||
@@ -127,7 +127,7 @@ Use the `.gap-*` utilities to control the space between elements in a grid layou
|
||||
<div class="d-grid gap-6">...</div>
|
||||
```
|
||||
|
||||
```html example
|
||||
```html example
|
||||
<div class="d-grid gap-6 bg-indigo-lt">
|
||||
<div class="px-3 py-2 bg-indigo text-white rounded">Grid item 1</div>
|
||||
<div class="px-3 py-2 bg-indigo text-white rounded">Grid item 2</div>
|
||||
|
||||
+1
-1
@@ -15,7 +15,7 @@
|
||||
"publish": "changeset publish",
|
||||
"reformat-md": "tsx .build/reformat-mdx.ts",
|
||||
"lint": "pnpm run lint-md",
|
||||
"lint-md": "markdownlint docs/content/**/*.md",
|
||||
"lint-md": "markdownlint --config .markdownlint-docs.json \"docs/pages/**/*.mdx\"",
|
||||
"zip-package": "tsx .build/zip-package.ts",
|
||||
"start": "pnpm dev"
|
||||
},
|
||||
|
||||
@@ -40,6 +40,12 @@ export default defineConfig({
|
||||
// pages live at the package root (./pages) — all components/lib/data are
|
||||
// shared (see the @shared alias)
|
||||
srcDir: '.',
|
||||
server: {
|
||||
port: 3000,
|
||||
// bind on all interfaces so the dev server is reachable from Docker
|
||||
// port mappings and other devices on the local network
|
||||
host: true,
|
||||
},
|
||||
vite: {
|
||||
// InlineScript.astro renders nothing here — scripts go through the
|
||||
// addPageScript() registry and the <PageScripts /> drain (Eleventy model)
|
||||
|
||||
Reference in New Issue
Block a user