mirror of
https://github.com/tabler/tabler.git
synced 2026-08-05 01:44:41 +04:00
Migrate preview and docs packages from Eleventy to Astro (#2694)
Co-authored-by: Bartek <xbartoszdobija@gmail.com>
This commit is contained in:
Paweł Kuna
GitHub
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Tabler Emails
|
||||
seoTitle: Tabler Emails - premium email templates
|
||||
order: 4
|
||||
description: Customizable email templates for over 90 clients and devices.
|
||||
summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.
|
||||
seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
@@ -0,0 +1,31 @@
|
||||
---
|
||||
title: Compiled templates
|
||||
order: 2
|
||||
seoTitle: Tabler Emails - How to use the compiled HTML email templates
|
||||
description: Learn how to use the compiled HTML email templates from the Tabler Emails package.
|
||||
summary: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
|
||||
seoDescription: The compiled HTML files from the Tabler Emails package are ready to use in your email marketing campaigns. This guide explains how to use them effectively.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Compiled version of the template
|
||||
|
||||
If you only want to change content (text or images) of the email template, you can just use the compiled HTML files - `compiled.html`. They are ready to use, and you need only a basic knowledge of HTML to modify them.
|
||||
|
||||
## How to modify the compiled HTML files
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
## How to use the compiled HTML files
|
||||
|
||||
After changing the templates as needed, you can use them in your email campaigns.
|
||||
The `compiled.html` file with the `assets/` folder should be sent to your email marketing tool, like Mailchimp, SendGrid, or any other.
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
title: Contents
|
||||
order: 1
|
||||
seoTitle: Tabler Emails - Content of the package
|
||||
description: Content of the Tabler Emails package.
|
||||
summary: The Tabler Emails package contains files which can be used by everyone, even without great knowledge of HTML.
|
||||
seoDescription: todo
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Folder structure
|
||||
|
||||
Once you unzip the downloaded file, you will see the following structure:
|
||||
|
||||
```
|
||||
tabler-emails/
|
||||
├── emails/
|
||||
| ├── absence/
|
||||
| | ├── assets/
|
||||
| | ├── compiled.html
|
||||
| | ├── compiled-dark.html
|
||||
| | ├── source.html
|
||||
| | ├── source-dark.html
|
||||
| | ├── screenshot.jpg
|
||||
| | ├── screenshot-dark.jpg
|
||||
| | ├── screenshot-mobile.jpg
|
||||
| | └── screenshot-mobile-dark.jpg
|
||||
| ├── access-token/
|
||||
| ├── account-deleted/
|
||||
| ├── .../
|
||||
| ├── welcome/
|
||||
| └── whishlist/
|
||||
├── images/
|
||||
| ├── chart-donuts/
|
||||
| ├── icons/
|
||||
| ├── illustrations/
|
||||
| └── overlays/
|
||||
├── license.txt
|
||||
└── readme.html
|
||||
```
|
||||
|
||||
## Understanding the file structure in 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.
|
||||
|
||||
### 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.
|
||||
|
||||
### 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)**.
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Introduction
|
||||
seoTitle: Introduction to Tabler Emails
|
||||
description: Base information about Tabler Emails package.
|
||||
summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.
|
||||
seoDescription: Tabler Emails is a collection of 80 premium, customizable HTML templates. They are compatible with over 90 email clients and devices.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: Source templates
|
||||
order: 3
|
||||
seoTitle: Tabler Emails - How to use the source HTML email templates
|
||||
description: Learn how to use the source HTML email templates from the Tabler Emails package.
|
||||
summary: The source HTML files from the Tabler Emails package need a bit more work than the compiled ones. Learn how to use them.
|
||||
seoDescription: The source HTML files from the Tabler Emails package need a bit more work than the compiled ones. Learn how to use them.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Source version of the template
|
||||
|
||||
If you want to make more advanced changes to the email template, you can use the source HTML files - `source.html` combined with the `theme.css` file. They are ready to use, but you need a basic knowledge of HTML and CSS to modify them.
|
||||
|
||||
## How to modify the source HTML files
|
||||
|
||||
1. Open the `source.html` file in your favorite code editor.
|
||||
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).
|
||||
5. Save the output HTML file.
|
||||
|
||||
## How to use the source HTML files
|
||||
|
||||
To use the modified HTML template send the output file with the `assets/` folder to your email marketing tool.
|
||||
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: Tabler Icons
|
||||
summary:
|
||||
Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customization options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and
|
||||
developers looking to enhance their projects with high-quality icons.
|
||||
order: 2
|
||||
description: Over 5000 pixel-perfect icons for web design and development
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import { site } from '@shared/lib/site'
|
||||
|
||||
# Browse icons
|
||||
|
||||
Tabler Icons is a comprehensive icon library that features { site.iconsCount } high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.
|
||||
|
||||
To use Tabler Icons, you can visit their website at https://tabler-icons.io. From there, you can browse the full collection of icons by category or search for a specific icon using the search bar.
|
||||
|
||||
Once you have found an icon you like, you can download it in various file formats, including SVG, PNG, and Icon Font.
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Libraries
|
||||
description: Explore Tabler Icons libraries.
|
||||
summary: The libraries section offers various integrations of Tabler Icons for popular frameworks and technologies, making it easy to incorporate icons into any project.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Preact
|
||||
description: Tabler Icons library for Preact framework.
|
||||
summary: Tabler Icons for Preact provides an optimized collection of icons specifically designed for use with Preact. These lightweight and scalable icons are easy to integrate into Preact-based projects.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-preact" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
||||
|
||||
```js
|
||||
import { IconArrowDown } from '@tabler/icons-preact';
|
||||
|
||||
const App = () => {
|
||||
return <IconArrowDown />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```js
|
||||
<IconArrowDown color="red" size={48} />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default |
|
||||
| -------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: React
|
||||
description: Tabler Icons library for React framework.
|
||||
summary: Tabler Icons for React offers a robust set of icons tailored for React applications, providing developers with a seamless way to enhance their user interfaces with high-quality, scalable graphics.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-react" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
||||
|
||||
```jsx
|
||||
import { IconArrowLeft } from '@tabler/icons-react';
|
||||
|
||||
const App = () => {
|
||||
return <IconArrowLeft />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```js
|
||||
<IconArrowLeft color="red" size={48} />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default |
|
||||
| -------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
title: SolidJS
|
||||
description: Tabler Icons library for SolidJS framework.
|
||||
summary: Tabler Icons for SolidJS is a lightweight library offering a vast selection of high-quality icons. It is designed for seamless integration with SolidJS, enabling developers to build visually appealing interfaces.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-solidjs" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
||||
|
||||
```js
|
||||
import { IconArrowRight } from '@tabler/icons-solidjs';
|
||||
|
||||
const App = () => {
|
||||
return <IconArrowRight />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```js
|
||||
<IconArrowRight color="red" size={48} />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
title: Svelte
|
||||
description: Tabler Icons library for Svelte framework.
|
||||
summary: Tabler Icons for Svelte provides a clean and efficient way to use Tabler's comprehensive icon set in Svelte applications, helping developers deliver polished, user-friendly designs.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-svelte" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
|
||||
|
||||
```html
|
||||
<script lang="ts">
|
||||
import { IconHeart } from '@tabler/icons-svelte';
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<IconHeart />
|
||||
</main>
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```html
|
||||
<IconHeart size={48} stroke={1} />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
| `class` | _String_ | |
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: Vue
|
||||
description: Tabler Icons library for Vue framework.
|
||||
summary: Tabler Icons for Vue offers a collection of customizable and scalable icons designed for use in Vue applications, providing a powerful tool for creating modern and engaging interfaces.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-vue" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## How to use
|
||||
|
||||
All icons are Vue components that contain SVG elements, so any icon can be imported and used as a component. It also helps to use treeshaking, so you only import the icons you use.
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<IconHome />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Returns Vue component
|
||||
import { IconHome } from '@tabler/icons-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
IconHome
|
||||
}
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```html
|
||||
<IconHome color="red" :size="48" stroke-width="1" />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `stroke` | _Number_ | 2 |
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title: Webfont
|
||||
description: Tabler Icons as a webfont.
|
||||
summary: Tabler Icons as a webfont allows you to easily include icons in your projects using simple CSS classes, offering a lightweight and scalable solution for web development.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-webfont" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
### CDN
|
||||
|
||||
```html
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@$ICONS_VERSION/dist/tabler-icons.min.css"
|
||||
/>
|
||||
```
|
||||
|
||||
Instead of a specific version, you can use `latest` to always get the newest icons.
|
||||
|
||||
## Usage
|
||||
|
||||
### HTML
|
||||
|
||||
```html
|
||||
<i class="ti ti-brand-tabler"></i>
|
||||
```
|
||||
|
||||
### CSS
|
||||
|
||||
```css
|
||||
content: 'ec8f';
|
||||
```
|
||||
|
||||
|
||||
### SCSS
|
||||
|
||||
```scss
|
||||
content: $ti-icon-brand-tabler;
|
||||
```
|
||||
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: Figma plugin
|
||||
description: Use Tabler Icons directly in Figma.
|
||||
summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler Icons into their Figma projects, providing quick access to a vast library of customizable icons that enhance the design workflow.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import DownloadButton from '@shared/components/docs/DownloadButton.astro'
|
||||
|
||||
|
||||
|
||||
The Tabler Icons Figma plugin is an essential tool for designers looking to enhance their workflow. It provides seamless access to a comprehensive library of high-quality, customizable icons directly within Figma. Whether you're designing dashboards, websites, or mobile apps, this plugin allows you to quickly search,
|
||||
preview, and integrate Tabler Icons into your projects, saving time and ensuring a consistent, modern aesthetic.
|
||||
|
||||
## Usage
|
||||
|
||||
Using the plugin is simple: install it from the Figma community, launch it within your design file, and search for the desired icon by keyword. Once you’ve found the perfect icon, click to insert it into your design. You can easily customize the icon’s size, color, and stroke weight to fit your specific needs, making
|
||||
it a versatile addition to your design toolkit.
|
||||
|
||||
<DownloadButton href="https://www.figma.com/community/plugin/1169807996149376642/Tabler-Icons" title="Download Plugin" />
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
title: Plugins
|
||||
description: Icon plugins for seamless integration.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
title: EPS version
|
||||
description: Download Tabler Icons in EPS format.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-eps" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
All EPS files are stored in `icons` subdirectory.
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Static files
|
||||
description: Download static file formats of icons.
|
||||
summary: Static files provide multiple formats of Tabler Icons, including EPS, PDF, PNG, and SVG, offering flexibility for different design and development workflows.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: PDF version
|
||||
description: Download Tabler Icons in PDF format.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-pdf" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
All PDF files are stored in `icons` subdirectory.
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: PNG version
|
||||
description: Download Tabler Icons in PNG format.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons-png" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
All PNG files are stored in `icons` subdirectory.
|
||||
|
||||
## CDN
|
||||
|
||||
#### Outline version
|
||||
|
||||
```html
|
||||
<img src="https://unpkg.com/@tabler/icons-png@$ICONS_VERSION/icons/outline/home.png" />
|
||||
```
|
||||
|
||||
#### 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.
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: SVG version
|
||||
description: Download Tabler Icons in SVG format.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
import Icon from '@shared/components/Icon.astro'
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
<TabsPackage name="@tabler/icons" />
|
||||
|
||||
or just [download from Github](https://github.com/tabler/tabler-icons/releases).
|
||||
|
||||
## Usage
|
||||
|
||||
All icons are built with SVG, so you can place them as `<img>`, `background-image` and inline in HTML code.
|
||||
|
||||
### HTML image
|
||||
|
||||
If you load an icon as an image, you can modify its size using CSS.
|
||||
|
||||
```html
|
||||
<img src="path/to/icon.svg" alt="icon title" />
|
||||
```
|
||||
|
||||
### Inline HTML
|
||||
|
||||
You can paste the content of the icon file into your HTML code to display it on the page.
|
||||
|
||||
<Example codeOnly>
|
||||
<a href="">
|
||||
<Icon name="disabled" />
|
||||
Click me
|
||||
</a>
|
||||
</Example>
|
||||
|
||||
Thanks to that, you can change the size, color and the `stroke-width` of the icons with CSS code.
|
||||
|
||||
```css
|
||||
.icon-tabler {
|
||||
color: red;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
stroke-width: 1.25;
|
||||
}
|
||||
```
|
||||
|
||||
### SVG sprite
|
||||
|
||||
Add an icon to be displayed on your page with the following markup (`activity` in the above example can be replaced with any valid icon name):
|
||||
|
||||
```html
|
||||
<svg width="24" height="24">
|
||||
<use xlink:href="path/to/tabler-sprite.svg#tabler-activity" />
|
||||
</svg>
|
||||
```
|
||||
|
||||
## CDN
|
||||
|
||||
#### Outline version
|
||||
|
||||
```html
|
||||
<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/outline/home.svg" />
|
||||
```
|
||||
|
||||
#### Filled version
|
||||
|
||||
```html
|
||||
<img src="https://unpkg.com/@tabler/icons@$ICONS_VERSION/icons/filled/home.svg" />
|
||||
```
|
||||
|
||||
Instead of a specific version, you can use `latest` to always get the newest icons.
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Tabler Illustrations
|
||||
order: 3
|
||||
description: Customizable illustrations for modern web and mobile designs.
|
||||
summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
# Tabler Illustrations
|
||||
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
title: Contents
|
||||
description: Explore Tabler Illustrations folder structure
|
||||
summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
The Tabler Illustrations package offers a wide range of visual assets designed to meet the needs of modern web and graphic design. These illustrations are not only aesthetically pleasing but also highly versatile, supporting various formats and themes for seamless integration into different projects.
|
||||
|
||||
## Folder Structure
|
||||
|
||||
Once downloaded, unzip the compressed folder and you’ll see something like this:
|
||||
|
||||
```
|
||||
tabler-illustrations/
|
||||
├── eps/
|
||||
| ├── dark/
|
||||
| └── light/
|
||||
├── figma/
|
||||
├── pdf/
|
||||
| ├── dark/
|
||||
| └── light/
|
||||
├── png/
|
||||
| ├── dark/
|
||||
| └── light/
|
||||
├── png-background/
|
||||
| ├── dark/
|
||||
| └── light/
|
||||
├── svg/
|
||||
| ├── dark/
|
||||
| └── light/
|
||||
├── svg-css-autodark/
|
||||
└── svg-css-variables/
|
||||
├── dark/
|
||||
└── light/
|
||||
```
|
||||
|
||||
## Understanding the File Structure in 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.
|
||||
|
||||
This structure ensures easy access to various formats and themes, making Tabler Illustrations a versatile tool for developers and designers alike.
|
||||
|
||||
**Find out more and purchase Tabler Illustrations at [our website](https://tabler.io/illustrations)**.
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Introduction
|
||||
description: Introduction to Tabler Illustrations and their key features.
|
||||
summary: Tabler Illustrations is a collection of high-quality, customizable illustrations designed to enhance the visual appeal of your projects. These illustrations align seamlessly with the Tabler design system, making it easy to create engaging and cohesive designs for websites, apps, and presentations
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
title: Tabler Illustrations License
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
### Personal License
|
||||
|
||||
By purchasing Tabler Illustrations, you are granted an ongoing, non-exclusive license by codecalm.net to use Tabler Illustrations.
|
||||
|
||||
The license grants permission to one individual (the Licensee) to access and use the Tabler Illustrations.
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
|
||||
|
||||
#### 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 **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.
|
||||
|
||||
In simple terms, use Tabler Illustrations for anything you like as long as it doesn't compete with Tabler Illustrations.
|
||||
|
||||
### Team License
|
||||
|
||||
By purchasing Tabler Illustrations, you are granted an ongoing, non-exclusive license by codecalm.net to use Tabler Illustrations.
|
||||
|
||||
The license grants permission for up to 10 Employees and Contractors of the Licensee to access and use the Tabler Illustrations.
|
||||
|
||||
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.
|
||||
|
||||
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
|
||||
|
||||
#### 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.
|
||||
|
||||
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.
|
||||
|
||||
---
|
||||
|
||||
In case of differences between above license agreements and the license agreements provided with the product, the license agreement provided with the product shall prevail.
|
||||
@@ -0,0 +1,22 @@
|
||||
---
|
||||
title: Preview
|
||||
summary: 'Tabler Illustrations offers 80 illustrations in two themes: light and dark. You can use them in your projects to enhance the visual appeal and convey messages effectively.'
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import illustrations from '@data/illustrations.json'
|
||||
export const allIllustrations = illustrations.sort()
|
||||
|
||||
Look at full list of illustrations below and see how they look. Find out more and purchase Tabler Illustrations at [our website]({{ site.homepage }}/illustrations).
|
||||
|
||||
<div class="row g-2 gy-6">
|
||||
{allIllustrations.map((illustration, i) => {
|
||||
return (
|
||||
<div class="col-6 col-md-4 col-lg-3 text-center">
|
||||
<img src={`/static/illustrations/light/${illustration}.png`} alt={illustration} class="hide-theme-dark" />
|
||||
<img src={`/static/illustrations/dark/${illustration}.png`} alt={illustration} class="hide-theme-light" />
|
||||
<code>{illustration}</code>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
title: Welcome to Tabler Documentation
|
||||
summary: Tabler Docs provides a comprehensive guide to help you get started with the Tabler ecosystem, including its UI components, plugins, and icons. Explore detailed documentation to understand and leverage the full potential of Tabler in your projects.
|
||||
description: Find comprehensive guides, examples, and resources to help you use Tabler UI components, plugins, icons, and tools effectively in your projects.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Card from '@shared/components/docs/DocsCard.astro'
|
||||
|
||||
<img src="/img/tabler.png" alt="Tabler" class="mb-4 hide-theme-dark border-0" width="816" height="620" />
|
||||
<img src="/img/tabler-dark.png" alt="Tabler" class="mb-4 hide-theme-light border-0" width="816" height="620" />
|
||||
|
||||
Find all the guides and resources you need to develop with Tabler and our other tools. Explore our UI components, icons, illustrations, and email templates to enhance your web development experience. Our tools are designed to be easy to use, customizable, and fully responsive, ensuring that your projects look great on
|
||||
any device.
|
||||
|
||||
<div class="mt-6 pt-6">
|
||||
<div class="row row-deck row-cards">
|
||||
<Card title="UI Components" href="/ui" icon="paint" description="Free and open source web application UI kit based on Bootstrap" />
|
||||
<Card title="Plugins" href="/plugins" icon="plug" description="Free and open source plugins for Tabler UI components" />
|
||||
<Card title="Icons" href="/icons" icon="ghost" description="Pixel-perfect icons for web design and development" />
|
||||
<Card title="Illustrations" href="/illustrations" icon="brand-figma" description="Customizable SVG illustrations for your web project" />
|
||||
<Card title="Email Templates" href="/emails" icon="mail" description="Responsive email templates ready to use in your marketing campaigns" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,20 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
import { site } from '@shared/lib/site';
|
||||
|
||||
export const prerender = true;
|
||||
|
||||
export const GET: APIRoute = () => {
|
||||
const isProduction = (process.env.NODE_ENV || 'production') === 'production';
|
||||
const sitemapUrl = `${isProduction ? site.docsUrl : ''}/sitemap.xml`;
|
||||
const body = `Sitemap: ${sitemapUrl}
|
||||
|
||||
User-agent: *
|
||||
Disallow:${isProduction ? '' : ' /'}
|
||||
`;
|
||||
|
||||
return new Response(body, {
|
||||
headers: {
|
||||
'Content-Type': 'text/plain; charset=utf-8',
|
||||
},
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,59 @@
|
||||
import type { APIRoute } from 'astro';
|
||||
import { site } from '@shared/lib/site';
|
||||
|
||||
export const prerender = true;
|
||||
|
||||
// Both page conventions are supported: `foo/index.mdx` and flat `foo.mdx`
|
||||
// produce the same route (/foo/) with the default 'directory' build format.
|
||||
const pages = import.meta.glob('./**/*.{astro,mdx}');
|
||||
|
||||
const urls = [
|
||||
...new Set(
|
||||
Object.keys(pages).map((file) => {
|
||||
const path = file
|
||||
.replace(/^\.\//, '')
|
||||
.replace(/\/?index\.(?:astro|mdx)$/, '')
|
||||
.replace(/\.(?:astro|mdx)$/, '');
|
||||
return path ? `/${path}/` : '/';
|
||||
}),
|
||||
),
|
||||
]
|
||||
.sort((a, b) => {
|
||||
if (a === '/') return -1;
|
||||
if (b === '/') return 1;
|
||||
return a.localeCompare(b);
|
||||
});
|
||||
|
||||
const escapeXml = (value: string) =>
|
||||
value
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
|
||||
export const GET: APIRoute = () => {
|
||||
const isDevelopment = process.env.NODE_ENV === 'development';
|
||||
const baseUrl = isDevelopment ? '' : site.docsUrl;
|
||||
const lastModified = new Date().toISOString();
|
||||
const entries = urls
|
||||
.map(
|
||||
(url) => `<url>
|
||||
<loc>${escapeXml(`${baseUrl}${url}`)}</loc>
|
||||
<lastmod>${lastModified}</lastmod>
|
||||
</url>`,
|
||||
)
|
||||
.join('\n');
|
||||
const body = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
|
||||
${entries}
|
||||
</urlset>
|
||||
`;
|
||||
|
||||
return new Response(body, {
|
||||
headers: {
|
||||
'Content-Type': 'application/xml; charset=utf-8',
|
||||
},
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Colors
|
||||
summary:
|
||||
The choice of colors for a website or app interface has a big influence on how users interact with the product and what decisions they make. Harmonious colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs
|
||||
to be well thought out.
|
||||
bootstrapLink: utilities/colors/
|
||||
description: Impact of colors on user interface design.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Colors from '@shared/components/docs/Colors.astro'
|
||||
import site from '@data/site.json'
|
||||
|
||||
## Base colors
|
||||
|
||||
Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take.
|
||||
|
||||
<Colors colors={site.colors} />
|
||||
|
||||
## Light colors
|
||||
|
||||
All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-catching designs.
|
||||
|
||||
<Colors colors={site.lightColors} />
|
||||
|
||||
## Gray palette
|
||||
|
||||
The gray palette is a great choice for creating a neutral background for your design. It can be used to create a clean and professional look, and can be combined with other colors to create a harmonious design.
|
||||
|
||||
<Colors colors={site.grayColors} />
|
||||
|
||||
## Social colors
|
||||
|
||||
Use the colors of popular social networks to create a recognizable design and make it easier for users to interact with your product.
|
||||
|
||||
<Colors colors={site.socialColors} />
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Base
|
||||
order: 2
|
||||
description: Foundational elements for UI design.
|
||||
summary: The base section includes foundational elements such as colors, typography, and spacing that form the building blocks of a cohesive and consistent user interface.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
// docs/content/ui/base/markdown.md sets `layout: redirect` + `redirect.to: ui/base/prose/`,
|
||||
// but shared/includes/redirect.html reads `page.redirect.to` — undefined in Eleventy —
|
||||
// so the include gets an empty url and the target collapses to `{{ page | relative }}`.
|
||||
// For this 3-deep page that is "../../..", which is exactly what the reference
|
||||
// build (ui/base/markdown/index.html) redirects to.
|
||||
import RedirectLayout from '@shared/layouts/RedirectLayout.astro';
|
||||
---
|
||||
|
||||
<RedirectLayout base="../../.." />
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
title: Prose
|
||||
summary: Use the `.prose` wrapper to style long-form content without adding classes to every element.
|
||||
bootstrapLink: content/prose/
|
||||
description: Long-form content styles for markdown-like HTML.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## How it works
|
||||
|
||||
Wrap your content in the `.prose` class to apply long-form typography styles to headings, paragraphs, lists, tables, and other common elements. This is especially useful when rendering Markdown, MDX, or content from a WYSIWYG editor.
|
||||
|
||||
- Sets a base `font-size` and `line-height` for comfortable reading.
|
||||
- Normalizes list spacing and nested list indentation.
|
||||
- Adds consistent `margin-bottom` on headings and paragraphs.
|
||||
- Gives blockquotes, code, and tables a readable default style.
|
||||
|
||||
## Example
|
||||
|
||||
This example shows typical content wrapped in `.prose`.
|
||||
|
||||
<Example>
|
||||
<div class="prose"> <h1>Getting started with documentation</h1> <p> Writing clear and effective documentation is essential for any project. When you create content that others will read and use, proper formatting makes all the difference. <em>Good documentation</em> helps users understand complex concepts quickly and efficiently. </p> <blockquote> <p>Documentation is a love letter that you write to your future self.</p> </blockquote> <p> The foundation of great documentation starts with <strong>understanding your audience</strong> and their needs. </p> </div>
|
||||
</Example>
|
||||
|
||||
## Inline HTML elements
|
||||
|
||||
HTML provides a long list of inline tags. These are commonly used inside `.prose`.
|
||||
|
||||
- **Bold text** uses `<strong>`.
|
||||
- *Italic text* uses `<em>`.
|
||||
- ==Highlighting== uses `<mark>`.
|
||||
- Abbreviations like HTML use `<abbr>` with a `title`.
|
||||
- Citations use `<cite>`.
|
||||
- Deleted text uses `<del>` and inserted text uses `<ins>`.
|
||||
- Superscript uses `<sup>` and subscript uses `<sub>`.
|
||||
|
||||
Most of these elements are styled by browsers with only light adjustments from Tabler.
|
||||
|
||||
## Headings
|
||||
|
||||
Headings help readers scan long documents quickly. Use them to create a clear hierarchy and maintain a logical flow.
|
||||
|
||||
### Code
|
||||
|
||||
Inline code is available with `<code>`. For multi-line snippets, use `<pre><code>`.
|
||||
|
||||
<Example>
|
||||
<div class="prose"> <p>Inline code looks like <code>console.log("Hello")</code> and uses monospace styling.</p> <pre><code>// Create a function that returns a sum function add(a, b) { return a + b; } </code></pre> </div>
|
||||
</Example>
|
||||
|
||||
### Lists
|
||||
|
||||
Use ordered lists for steps and unordered lists for related points.
|
||||
|
||||
<Example>
|
||||
<div class="prose"> <ol> <li>Start with the most important information.</li> <li>Provide context before technical details.</li> <li>Include practical examples.</li> </ol> <ul> <li>Write clear, concise list items.</li> <li>Keep the structure consistent.</li> <li>Avoid overly long items.</li> </ul> </div>
|
||||
</Example>
|
||||
|
||||
### Images
|
||||
|
||||
Images should support the text and provide useful context.
|
||||
|
||||
<Example>
|
||||
<div class="prose"> <img src="/static/photos/cup-of-coffee-and-an-open-book.jpg" alt="Open book and coffee" /> <img src="/static/photos/book-on-the-grass.jpg" alt="Book on the grass" /> <img src="/static/photos/stylish-workspace-with-macbook-pro.jpg" alt="Workspace with laptop" /> </div>
|
||||
</Example>
|
||||
|
||||
### Tables
|
||||
|
||||
Tables work best for comparing related data points.
|
||||
|
||||
<Example>
|
||||
<div class="prose"> <table> <thead> <tr> <th>Name</th> <th>Up-votes</th> <th>Down-votes</th> </tr> </thead> <tbody> <tr> <td>Alice</td> <td>10</td> <td>11</td> </tr> <tr> <td>Bob</td> <td>4</td> <td>3</td> </tr> <tr> <td>Charlie</td> <td>7</td> <td>9</td> </tr> <tr> <td>Totals</td> <td>21</td> <td>23</td> </tr> </tbody> </table> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,118 @@
|
||||
---
|
||||
title: Typography
|
||||
summary: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
|
||||
bootstrapLink: content/typography/
|
||||
description: Role of typography in interface design.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Headings
|
||||
|
||||
Use HTML headings to organize content on your website and make the structure clear and user-friendly. The `h1` to `h6` tags are used to define HTML headings.
|
||||
The `h1` tag is the highest level and the `h6` tag is the lowest level.
|
||||
|
||||
Below are examples of headings with different levels:
|
||||
|
||||
<Example>
|
||||
<h1>H1 Heading</h1> <h2>H2 Heading</h2> <h3>H3 Heading</h3> <h4>H4 Heading</h4> <h5>H5 Heading</h5> <h6>H6 Heading</h6>
|
||||
</Example>
|
||||
|
||||
## Paragraphs
|
||||
|
||||
Organize longer pieces of text into paragraphs using the `p` tag. It is the most common element for text content.
|
||||
|
||||
```html
|
||||
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
||||
```
|
||||
|
||||
If you use a second paragraph, it will be separated from the first one by a blank line.
|
||||
|
||||
<Example vertical>
|
||||
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
||||
</Example>
|
||||
|
||||
|
||||
## Semantic text elements
|
||||
|
||||
Use a variety of semantic text elements, depending on how you want to display particular fragments of content.
|
||||
|
||||
Here are examples of semantic text elements:
|
||||
|
||||
<Example>
|
||||
<div> <abbr title="Internationalization">I18N</abbr> </div> <div> <strong>Bold</strong> </div> <div> <cite>Citation</cite> </div> <div> <code>Hello World!</code> </div> <div> <del>Deleted</del> </div> <div> <em>Emphasis</em> </div> <div> <i>Italic</i> </div> <div> <ins>Inserted</ins> </div> <div> <kbd>Ctrl + S</kbd> </div> <div> <mark>Highlighted</mark> </div> <div> <s>Strikethrough</s> </div> <div> <samp>Sample</samp> </div> <div> Text <sub>Subscript</sub> </div> <div> Text <sup>Superscript</sup> </div> <div> <time>20:00</time> </div> <div> <u>Underline</u> </div> <div> <var>x</var> = <var>y</var> + 2 </div>
|
||||
</Example>
|
||||
|
||||
## Horizontal rules
|
||||
|
||||
Use the `hr` tag to represent a thematic break between paragraphs within one section.
|
||||
|
||||
<Example>
|
||||
<div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita quibusdam veniam? </p> <hr /> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita quibusdam veniam? </p> </div>
|
||||
</Example>
|
||||
|
||||
## Horizontal rules with label
|
||||
|
||||
You can also add a label to a horizontal rule and align it as you see fit. Centered label is the default.
|
||||
|
||||
<Example>
|
||||
<p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <div class="hr-text"> <span>Rule text</span> </div> <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <div class="hr-text hr-text-center"> <span>Rule text</span> </div> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> <div class="hr-text hr-text-start"> <span>Rule text</span> </div> <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p> <div class="hr-text hr-text-end"> <span>Rule text</span> </div> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
|
||||
</Example>
|
||||
|
||||
## Optimized for different alphabets
|
||||
|
||||
Tabler has been optimized to correctly display content in any language. It supports most Asian, African and Middle Eastern languages.
|
||||
|
||||
<Example>
|
||||
<p>汉字</p> <p>日本語の表記体系</p> <p>Кириллица</p> <p>Eλληνική</p> <p>ქართული დამწერლობა</p> <p>Հայերենի այբուբեն</p> <p>الحروف العربية</p> <p>אלפבית עברי</p> <p>อักษรไทย</p>
|
||||
</Example>
|
||||
|
||||
## Text transform
|
||||
|
||||
Transform the content of components with text capitalization classes.
|
||||
|
||||
<Example>
|
||||
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">Capitalized text.</p>
|
||||
</Example>
|
||||
|
||||
## Letter spacing
|
||||
|
||||
Control the tracking (letter spacing) of an element and make it tight, wide or normal.
|
||||
|
||||
<Example>
|
||||
<p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p> <p class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p> <p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
|
||||
</Example>
|
||||
|
||||
## Line height
|
||||
|
||||
Control the leading (line height) of an element using the `.lh-*` classes. The line height is the vertical space between lines of text.
|
||||
|
||||
<Example>
|
||||
<p class="lh-1"> This is the long text with line height 1. Lorem ipsum dolor sit amet. Dolor sit amet. </p> <p class="lh-sm"> This is the long text with small line height. Lorem ipsum dolor sit amet. Dolor sit amet. </p> <p class="lh-base"> This is the long text with base line height. Lorem ipsum dolor sit amet. Dolor sit amet. </p> <p class="lh-lg"> This is the long text with large line height. Lorem ipsum dolor sit amet. Dolor sit amet. </p>
|
||||
</Example>
|
||||
|
||||
## Antialiasing
|
||||
|
||||
Control the font smoothing of an element.
|
||||
|
||||
Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` utility to remove antialiasing.
|
||||
|
||||
<Example>
|
||||
<div class="antialiased">Text with antialiasing</div> <div class="subpixel-antialiased">Text without antialiasing</div>
|
||||
</Example>
|
||||
|
||||
## Keyboard input
|
||||
|
||||
Use the `<kbd>` to indicate input that is typically entered via keyboard.
|
||||
|
||||
<Example>
|
||||
To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.
|
||||
</Example>
|
||||
|
||||
## Prose
|
||||
|
||||
If you can't use the CSS classes you want, or you just want to use HTML tags, use the `.prose` class in a container. It will apply the default styles for markdown elements. The `.markdown` class is an alias and will be removed in a future release. The `.wysiwyg` integration (`ui/wysiwyg.html`) is deprecated and will be removed in a future release. See the Prose page for full examples.
|
||||
|
||||
<Example>
|
||||
<div class="prose"> <h1>Hello World</h1> <p> Lorem ipsum<sup>[1]</sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub >script</sub > works as well! </p> <h2>Second level</h2> <p> Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl. </p> <ul> <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li> <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li> <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li> <li>Ut non enim metus.</li> </ul> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
title: Accordion
|
||||
summary: Use accordion panels to group related content and show one section at a time.
|
||||
description: Build collapsible content sections with accordion classes and modifiers.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
|
||||
## Overview
|
||||
|
||||
Use `.accordion` as the wrapper and `.accordion-item` for each section. Inside each item, use `.accordion-header`, `.accordion-button`, `.accordion-button-toggle`, and `.accordion-body`.
|
||||
|
||||
Accordion interaction uses Bootstrap Collapse. Add `data-bs-toggle="collapse"` and `data-bs-target="#panel-id"` to each `.accordion-button`, then use `.accordion-collapse.collapse` on the target panel. Use `.show` on the panel that should be open by default.
|
||||
|
||||
This preview shows the base structure with one expanded section.
|
||||
|
||||
<Example>
|
||||
<div class="accordion" id="accordion-overview"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#overview-item-1" aria-expanded="true" aria-controls="overview-item-1" > Account details <span class="accordion-button-toggle"> <Icon name="chevron-down" /> </span> </button> </h2> <div id="overview-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-overview"> <div class="accordion-body"> Update profile fields, contact details, and team role settings in this section. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#overview-item-2" aria-expanded="false" aria-controls="overview-item-2" > Security settings <span class="accordion-button-toggle"> <Icon name="chevron-down" /> </span> </button> </h2> <div id="overview-item-2" class="accordion-collapse collapse" data-bs-parent="#accordion-overview"> <div class="accordion-body"> Configure password policy, two-factor requirements, and active device sessions. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#overview-item-3" aria-expanded="false" aria-controls="overview-item-3" > Notification preferences <span class="accordion-button-toggle"> <Icon name="chevron-down" /> </span> </button> </h2> <div id="overview-item-3" class="accordion-collapse collapse" data-bs-parent="#accordion-overview"> <div class="accordion-body"> Choose which updates to receive by email, browser push, and weekly digest. You can set separate rules for account alerts and product announcements. </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Variants
|
||||
|
||||
### Plus toggle icon
|
||||
|
||||
Use `.accordion-button-toggle-plus` to hide the first SVG path when expanded. This pattern is useful for plus-to-minus toggles.
|
||||
|
||||
<Example>
|
||||
<div class="accordion" id="accordion-plus"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#plus-item-1" aria-expanded="true" aria-controls="plus-item-1" > Billing details <span class="accordion-button-toggle accordion-button-toggle-plus"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M12 5v14"></path> <path d="M5 12h14"></path> </svg> </span> </button> </h2> <div id="plus-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-plus"> <div class="accordion-body"> View invoices, payment method status, and tax details. </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
### With leading icon
|
||||
|
||||
Use `.accordion-button-icon` when a row needs a small icon before the label. The icon color uses the secondary token.
|
||||
|
||||
<Example>
|
||||
<div class="accordion" id="accordion-icon"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#icon-item-1" aria-expanded="true" aria-controls="icon-item-1" > <span class="accordion-button-icon"> <Icon name="user" /> </span> Team profile <span class="accordion-button-toggle"> <Icon name="chevron-down" /> </span> </button> </h2> <div id="icon-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-icon"> <div class="accordion-body"> Manage member names, avatars, and workspace profile details. </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
### Flush accordion
|
||||
|
||||
Use `.accordion-flush` to remove side borders and border radius. The first and last items also remove top and bottom borders.
|
||||
|
||||
<Example>
|
||||
<div class="accordion accordion-flush" id="accordion-flush"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#flush-item-1" aria-expanded="true" aria-controls="flush-item-1" > API access <span class="accordion-button-toggle"> <Icon name="chevron-down" /> </span> </button> </h2> <div id="flush-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-flush"> <div class="accordion-body"> Generate tokens and control access scopes. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-item-2" aria-expanded="false" aria-controls="flush-item-2" > Webhooks <span class="accordion-button-toggle"> <Icon name="chevron-down" /> </span> </button> </h2> <div id="flush-item-2" class="accordion-collapse collapse" data-bs-parent="#accordion-flush"> <div class="accordion-body"> Manage delivery URLs, retry policy, and event subscriptions. </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Examples
|
||||
|
||||
### Tab-like spacing
|
||||
|
||||
Use `.accordion-tabs` to add a gap between items and keep full borders around each item. This style works well for settings pages.
|
||||
|
||||
<Example>
|
||||
<div class="accordion accordion-tabs" id="accordion-tabs"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#tabs-item-1" aria-expanded="true" aria-controls="tabs-item-1" > Workspace <span class="accordion-button-toggle"> <Icon name="chevron-down" /> </span> </button> </h2> <div id="tabs-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-tabs"> <div class="accordion-body"> Configure workspace name, slug, and timezone. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tabs-item-2" aria-expanded="false" aria-controls="tabs-item-2" > Notifications <span class="accordion-button-toggle"> <Icon name="chevron-down" /> </span> </button> </h2> <div id="tabs-item-2" class="accordion-collapse collapse" data-bs-parent="#accordion-tabs"> <div class="accordion-body"> Control email, push, and digest notification preferences. </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
### Inverted toggle position
|
||||
|
||||
Use `.accordion-inverted` to move the toggle to the start of the button row. This helps layouts where controls should appear before text.
|
||||
|
||||
<Example>
|
||||
<div class="accordion accordion-inverted" id="accordion-inverted"> <div class="accordion-item"> <h2 class="accordion-header"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#inverted-item-1" aria-expanded="true" aria-controls="inverted-item-1" > Access policy <span class="accordion-button-toggle"> <Icon name="chevron-down" /> </span> </button> </h2> <div id="inverted-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-inverted"> <div class="accordion-body"> Set default policy, invite flow, and sign-in restrictions. </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Use a real `<button>` element for `.accordion-button`.
|
||||
- Keep heading structure with `.accordion-header` so sections are easy to scan.
|
||||
- Use `aria-expanded` and `aria-controls` on toggle buttons when wiring interactive behavior.
|
||||
- Keep `data-bs-target` and panel `id` values in sync for every toggle.
|
||||
- Keep visible focus styles. The header and button styles include focus handling.
|
||||
- Add meaningful text labels, not only icons.
|
||||
@@ -0,0 +1,95 @@
|
||||
---
|
||||
title: Alert
|
||||
summary: An alert message is used to inform users about the status of their action and help them solve problems that may occur. Good alert design is important for the overall user experience of a website or app.
|
||||
bootstrapLink: components/alerts/
|
||||
description: An alert message for user notification.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Alert from '@shared/components/Alert.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
|
||||
|
||||
Combine `alert` class with one of the following: `alert-success`, `alert-info`, `alert-warning`, `alert-danger` to get the alert that you need.
|
||||
|
||||
Alert classes affect the color of all the text inside an alert. Use another class, e.g. `text-secondary` to change the color of the alert's content.
|
||||
|
||||
<Example>
|
||||
<Alert type="success" title="Wow! Everything worked!" description="Your account has been saved!" /> <Alert type="info" title="Did you know?" description="Here is something that you might like to know." /> <Alert type="warning" title="Uh oh, something went wrong" description="Sorry! There was a problem with your request." /> <Alert type="danger" title={"I'm so sorry…"} description="Your account has been deleted and can't be restored." />
|
||||
</Example>
|
||||
|
||||
## Alert links
|
||||
|
||||
Add a link to your alert message to redirect users to the details they need to complete or additional information they should read. Use `alert-link` class to style the link and match the text color.
|
||||
|
||||
<Example>
|
||||
<Alert type="danger" title="This is a danger alert" link="check it out" />
|
||||
</Example>
|
||||
|
||||
## Dismissible alerts
|
||||
|
||||
Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only when the user closes it.
|
||||
|
||||
```html
|
||||
<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>
|
||||
```
|
||||
|
||||
<Example>
|
||||
<Alert type="danger" title="This is a danger alert" showClose />
|
||||
</Example>
|
||||
|
||||
## Alerts with icons
|
||||
|
||||
Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
|
||||
|
||||
Use the `alert-icon` class on an `<svg>` (or on an `<i>` when using the webfont) to provide the proper styling.
|
||||
|
||||
<Example>
|
||||
<div class="alert alert-success" role="alert"> <div class="d-flex"> <div> <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M5 12l5 5l10 -10" /> </svg> </div> <div> <h4 class="alert-title">Wow! Everything worked!</h4> <div class="text-secondary">Your account has been saved!</div> </div> </div> </div> <div class="alert alert-info" role="alert"> <div class="d-flex"> <div> <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <line x1="12" y1="8" x2="12.01" y2="8" /> <polyline points="11 12 12 12 12 16 13 16" /> </svg> </div> <div> <h4 class="alert-title">Did you know?</h4> <div class="text-secondary">Here is something that you might like to know.</div> </div> </div> </div> <div class="alert alert-warning" role="alert"> <div class="d-flex"> <div> <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M12 9v2m0 4v.01" /> <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" /> </svg> </div> <div> <h4 class="alert-title">Uh oh, something went wrong</h4> <div class="text-secondary">Sorry! There was a problem with your request.</div> </div> </div> </div> <div class="alert alert-danger" role="alert"> <div class="d-flex"> <div> <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <line x1="12" y1="8" x2="12" y2="12" /> <line x1="12" y1="16" x2="12.01" y2="16" /> </svg> </div> <div> <h4 class="alert-title">I'm so sorry…</h4> <div class="text-secondary">Your account has been deleted and can't be restored.</div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Alert with avatar
|
||||
|
||||
Add an avatar to your alert modal to make it more personalized.
|
||||
|
||||
<Example>
|
||||
<div class="alert alert-success" role="alert"> <div class="d-flex"> <div> <span class="avatar me-3" style="background-image: url(/static/avatars/039m.jpg)" ></span> </div> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div> <div class="alert alert-info" role="alert"> <div class="d-flex"> <div> <span class="avatar me-3">JL</span> </div> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div> <div class="alert alert-warning" role="alert"> <div class="d-flex"> <div> <span class="avatar me-3" style="background-image: url(/static/avatars/035f.jpg)" ></span> </div> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div> <div class="alert alert-danger" role="alert"> <div class="d-flex"> <div> <span class="avatar me-3" style="background-image: url(/static/avatars/056f.jpg)" ></span> </div> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Alert with buttons
|
||||
|
||||
Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.
|
||||
|
||||
Buttons don't inherit the alert's color, so you should set the proper class if you want it to be matched. For example, `btn-success` for `alert-success`.
|
||||
|
||||
<Example>
|
||||
<div class="alert alert-success alert-dismissible" role="alert"> <h3 class="mb-1">Some Title</h3> <p class="text-secondary"> Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate. </p> <div class="btn-list"> <a href="#" class="btn btn-success">Okay</a> <a href="#" class="btn">Cancel</a> </div> <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a> </div> <div class="alert alert-info alert-dismissible" role="alert"> <h3 class="mb-1">Some Title</h3> <p class="text-secondary"> Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate. </p> <div class="btn-list"> <a href="#" class="btn btn-info">Okay</a> <a href="#" class="btn">Cancel</a> </div> <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a> </div> <div class="alert alert-warning alert-dismissible" role="alert"> <h3 class="mb-1">Some Title</h3> <p class="text-secondary"> Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate. </p> <div class="btn-list"> <a href="#" class="btn btn-warning">Okay</a> <a href="#" class="btn">Cancel</a> </div> <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a> </div> <div class="alert alert-danger alert-dismissible" role="alert"> <h3 class="mb-1">Some Title</h3> <p class="text-secondary"> Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate. </p> <div class="btn-list"> <a href="#" class="btn btn-danger">Okay</a> <a href="#" class="btn">Cancel</a> </div> <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a> </div>
|
||||
</Example>
|
||||
|
||||
## Important alerts
|
||||
|
||||
If you want your alert to be really eye-catching, you can add an `alert-important` class. It will use the selected color as a background for the alert.
|
||||
|
||||
```html
|
||||
<div class="alert alert-important alert-success alert-dismissible" role="alert">...</div>
|
||||
```
|
||||
|
||||
You can also use other elements, like icons and dismissible buttons, with this type of alert.
|
||||
|
||||
<Example>
|
||||
<div class="alert alert-important alert-success alert-dismissible" role="alert"> <div class="d-flex"> <div> <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M5 12l5 5l10 -10"></path> </svg> </div> <div>Wow! Everything worked!</div> </div> <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a> </div> <div class="alert alert-important alert-danger alert-dismissible" role="alert"> <div class="d-flex"> <div> <svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <line x1="12" y1="8" x2="12" y2="12" /> <line x1="12" y1="16" x2="12.01" y2="16" /> </svg> </div> <div>Your account has been deleted and can't be restored.</div> </div> <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a> </div>
|
||||
</Example>
|
||||
|
||||
## Custom alert color
|
||||
|
||||
You're not limited to the 4 default alert colors. You can use any [base or social color](../base/colors) you want.
|
||||
|
||||
<Example>
|
||||
<div class="alert alert-lime" role="alert"> <h4 class="alert-title">Wow! Everything worked!</h4> <div class="text-secondary">Your account has been saved!</div> </div> <div class="alert alert-cyan" role="alert"> <h4 class="alert-title">Did you know?</h4> <div class="text-secondary">Here is something that you might like to know.</div> </div> <div class="alert alert-facebook" role="alert"> <h4 class="alert-title">You have a new friend on Facebook</h4> <div class="text-secondary">Say hello to your new friend!</div> </div> <div class="alert alert-instagram alert-dismissible alert-important" role="alert"> <div class="d-flex"> <div> <span class="avatar me-3" style="background-image: url(/static/avatars/035f.jpg)" ></span> </div> <div> <h4 class="alert-title">Sophia just added a new post on Instagram</h4> <div>Be the first to see it!</div> </div> </div> <a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a> </div>
|
||||
</Example>
|
||||
|
||||
## SASS variables
|
||||
|
||||
You can customize the alert colors by changing the SASS variables. The default values are:
|
||||
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: Autosize
|
||||
summary: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type.
|
||||
docs-libs: autosize
|
||||
description: Auto-adjusting textarea for better usability.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`.
|
||||
|
||||
## 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.
|
||||
|
||||
To create autosize textarea, add the `data-bs-toggle="autosize"` attribute to the textarea element:
|
||||
|
||||
<Example column vertical>
|
||||
<label class="form-label">Autosize example</label> <textarea class="form-control" data-bs-toggle="autosize" placeholder="Type something…"></textarea>
|
||||
</Example>
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
title: Avatar
|
||||
summary: An avatar helps customize interface elements and make the product experience more personalized. It is often used in communication apps, collaboration tools, and social media.
|
||||
description: Personalize UI with a user avatar.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the `avatar` class to add an avatar to your interface design for greater customization.
|
||||
|
||||
<Example centered>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/002f.jpg)"></span> <span class="avatar">JL</span> <span class="avatar" style="background-image: url(/static/avatars/004f.jpg)"></span>
|
||||
</Example>
|
||||
|
||||
## Avatar image
|
||||
|
||||
Set an image as the background to make users easy to indentify and create a personalized experience.
|
||||
|
||||
<Example centered>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/036m.jpg)"></span>
|
||||
</Example>
|
||||
|
||||
## Initials
|
||||
|
||||
You can also use initials instead of pictures.
|
||||
|
||||
<Example centered>
|
||||
<span class="avatar">AB</span> <span class="avatar">CD</span> <span class="avatar">EF</span> <span class="avatar">GH</span> <span class="avatar">IJ</span>
|
||||
</Example>
|
||||
|
||||
## Avatar icons
|
||||
|
||||
Besides pictures and initials, you can also use icons to make the avatars more universal.
|
||||
|
||||
<Example centered>
|
||||
<span class="avatar"> <Icon name="user" /> </span> <span class="avatar"> <Icon name="plus" /> </span> <span class="avatar"> <Icon name="settings" /> </span>
|
||||
</Example>
|
||||
|
||||
## Avatar initials color
|
||||
|
||||
Customize the color of the avatars' background. See the [full list of available colors](/ui/base/colors) for more details.
|
||||
|
||||
<Example centered>
|
||||
<span class="avatar bg-green-lt">AB</span> <span class="avatar bg-red-lt">CD</span> <span class="avatar bg-yellow-lt">EF</span> <span class="avatar bg-primary-lt">GH</span> <span class="avatar bg-purple-lt">IJ</span>
|
||||
</Example>
|
||||
|
||||
## Avatar size
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard avatar or scale it up or down to different sizes based on what you need.
|
||||
|
||||
<Example centered>
|
||||
<span class="avatar avatar-xl" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-lg" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-sm" style="background-image: url(/static/avatars/000m.jpg)"></span> <span class="avatar avatar-xs" style="background-image: url(/static/avatars/000m.jpg)"></span>
|
||||
</Example>
|
||||
|
||||
## Avatar status
|
||||
|
||||
Add a status indicator to your avatar to show, for instance, if a user is online or offline or indicate the number of messages they have received.
|
||||
|
||||
<Example centered>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/018m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/015m.jpg)"> <span class="badge bg-danger"></span> </span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"> <span class="badge bg-success"></span> </span> <span class="avatar"> <span class="badge bg-warning"></span>SA </span> <span class="avatar" style="background-image: url(/static/avatars/022m.jpg)"> <span class="badge bg-info"></span> </span> <span class="avatar" style="background-image: url(/static/avatars/048m.jpg)"> <span class="badge bg-gray">5</span> </span>
|
||||
</Example>
|
||||
|
||||
## Avatar shape
|
||||
|
||||
Change the shape of an avatar with the default Bootstrap image classes. You can make them round or square and change their border radius.
|
||||
|
||||
<Example centered>
|
||||
<span class="avatar" style="background-image: url(/static/avatars/019m.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/039f.jpg)"></span> <span class="avatar rounded-circle">AA</span> <span class="avatar rounded-0" style="background-image: url(/static/avatars/043f.jpg)"></span> <span class="avatar rounded-3" style="background-image: url(/static/avatars/044f.jpg)"></span>
|
||||
</Example>
|
||||
|
||||
## Avatars list
|
||||
|
||||
Create a list of avatars within one parent container.
|
||||
|
||||
<Example centered>
|
||||
<div class="avatar-list"> <span class="avatar rounded" style="background-image: url(/static/avatars/031f.jpg)"></span> <span class="avatar rounded">JL</span> <span class="avatar rounded" style="background-image: url(/static/avatars/033f.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/017m.jpg)"></span> <span class="avatar rounded" style="background-image: url(/static/avatars/024m.jpg)"></span> </div>
|
||||
</Example>
|
||||
|
||||
## Stacked list
|
||||
|
||||
Make the list stack once a certain number of avatars is reached to make it look clear and display well regardless of the screen size.
|
||||
|
||||
<Example centered>
|
||||
<div class="avatar-list avatar-list-stacked"> <span class="avatar">EB</span> <span class="avatar" style="background-image: url(/static/avatars/026m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/016f.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/028m.jpg)"></span> <span class="avatar" style="background-image: url(/static/avatars/030m.jpg)"></span> <span class="avatar">+8</span> </div>
|
||||
</Example>
|
||||
|
||||
<Example centered>
|
||||
<div class="avatar-list avatar-list-stacked"> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/035m.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/027f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/036f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle">SA</span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/034f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/043f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/039f.jpg)" ></span> <span class="avatar avatar-sm rounded-circle" style="background-image: url(/static/avatars/020m.jpg)" ></span> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
title: Badge
|
||||
summary: A badge is a small count and labeling component used to add extra information to an interface element. You can use it to draw user attention to a new element, notify about unread messages, or provide additional context.
|
||||
description: Add extra information with a badge.
|
||||
bootstrapLink: components/badge/
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Badge from '@shared/components/ui/Badge.astro';
|
||||
import site from '@data/site.json';
|
||||
|
||||
export const colors = Object.entries(site.colors);
|
||||
|
||||
## Default markup
|
||||
|
||||
The default badges are square and come in the basic set of colors.
|
||||
|
||||
<Example centered>
|
||||
<div class="badges-list">{colors.map(([key, val]) => <Badge color={key} text={val.title} />)}</div>
|
||||
</Example>
|
||||
|
||||
## Headings
|
||||
|
||||
Badges can be used in headings to draw attention to new or important information. You can use them in any heading level, from `<h1>` to `<h6>`. The example below shows how to use badges in headings.
|
||||
|
||||
<Example>
|
||||
<h1> Example heading <Badge text="New" /> </h1> <h2> Example heading <Badge text="New" /> </h2> <h3> Example heading <Badge text="New" /> </h3> <h4> Example heading <Badge text="New" /> </h4> <h5> Example heading <Badge text="New" /> </h5> <h6> Example heading <Badge text="New" /> </h6>
|
||||
</Example>
|
||||
|
||||
## Light versions of badges
|
||||
|
||||
You can use the `-lt` classes to create a light version of the badge. This is useful for creating a more subtle look.
|
||||
|
||||
For example you can use the `bg-blue-lt` class to create a light blue badge. If you add the `text-blue-lt-fg` class, the text will be blue as well.
|
||||
|
||||
<Example centered>
|
||||
{colors.map(([key, val]) => <Badge color={key} text={val.title} light />)}
|
||||
</Example>
|
||||
|
||||
## Pill badges
|
||||
|
||||
Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
|
||||
|
||||
<Example centered>
|
||||
{colors.map(([key, val]) => <Badge color={key} text={val.title} class="badge-pill" />)}
|
||||
</Example>
|
||||
|
||||
You can use it to create a pill with numbers, for example, to show the number of unread messages. The badge will adjust its width to the number of digits.
|
||||
|
||||
<Example centered>
|
||||
{colors.map(([key, val], i) => <Badge color={key} text={String(i + 1)} class="badge-pill" />)}
|
||||
</Example>
|
||||
|
||||
## Badges with icons
|
||||
|
||||
You can use icons in badges to make them more visually appealing. The example below demonstrates how to use icons in badges.
|
||||
|
||||
<Example centered>
|
||||
<Badge text="Star" icon="star" /> <Badge text="Heart" icon="heart" /> <Badge text="Check" icon="check" /> <Badge text="X" icon="x" /> <Badge text="Plus" icon="plus" /> <Badge text="Minus" icon="minus" />
|
||||
</Example>
|
||||
|
||||
You can also use an icon on the right side of the badge. The example below demonstrates how to use icons on the right side of badges.
|
||||
|
||||
<Example centered>
|
||||
<Badge text="Star" icon-end="arrow-right" /> <Badge text="Heart" icon-end="arrow-right" /> <Badge text="Check" icon-end="arrow-right" /> <Badge text="X" icon-end="arrow-right" /> <Badge text="Plus" icon-end="arrow-right" /> <Badge text="Minus" icon-end="arrow-right" />
|
||||
</Example>
|
||||
|
||||
## Links
|
||||
|
||||
Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
|
||||
|
||||
<Example centered>
|
||||
<a href="#" class="badge bg-blue-lt">Blue</a> <a href="#" class="badge bg-azure-lt">Azure</a> <a href="#" class="badge bg-indigo-lt">Indigo</a> <a href="#" class="badge bg-purple-lt">Purple</a> <a href="#" class="badge bg-pink-lt">Pink</a> <a href="#" class="badge bg-red-lt">Red</a> <a href="#" class="badge bg-orange-lt">Orange</a> <a href="#" class="badge bg-yellow-lt">Yellow</a> <a href="#" class="badge bg-lime-lt">Lime</a> <a href="#" class="badge bg-green-lt">Green</a> <a href="#" class="badge bg-teal-lt">Teal</a> <a href="#" class="badge bg-cyan-lt">Cyan</a>
|
||||
</Example>
|
||||
|
||||
## Button with badge
|
||||
|
||||
Badges can be used as parts of links or buttons to provide, for example, a counter. Use the `.badge-notification` class to create a notification badge. This class will position the badge in the top right corner of the button.
|
||||
|
||||
If you don't provide text for the badge, you end up with a small dot. This is useful for creating a simple notification button.
|
||||
|
||||
<Example centered>
|
||||
<button type="button" class="btn"> Notifications <Badge text="2" color="red" class="ms-2" /> </button> <button type="button" class="btn"> Inbox <Badge text="4" color="red" class="badge-notification" /> </button> <button type="button" class="btn"> Profile <Badge text="" color="red" class="badge-notification" /> </button>
|
||||
</Example>
|
||||
|
||||
## Animated badges
|
||||
|
||||
You can use the `.badge-blink` class to create a blinking effect. This class will add a CSS animation to the badge, so it will blink to draw attention.
|
||||
|
||||
<Example centered>
|
||||
<button type="button" class="btn"> Profile <Badge text="" color="red" class="badge-notification badge-blink" /> </button>
|
||||
</Example>
|
||||
|
||||
## Size Options
|
||||
|
||||
Use `.badge-sm` or `.badge-lg` to change badge size according to your needs. The default size is `.badge` and it is used in the examples above.
|
||||
|
||||
<Example centered vertical>
|
||||
<div> <Badge color="primary" scale="sm" text="New" class="badge-sm" /> <Badge color="primary" scale="sm" text="1" class="badge-pill" /> </div> <div> <Badge color="primary" text="New" class="badge-sm" /> <Badge color="primary" text="1" class="badge-pill" /> </div> <div> <Badge color="primary" scale="lg" text="New" class="badge-sm" /> <Badge color="primary" scale="lg" text="1" class="badge-pill" /> </div>
|
||||
</Example>
|
||||
|
||||
|
||||
## 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.
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
summary: A breadcrumb is used to show the current website or app location and reduce the number of actions users need to take. It helps users navigate the website hierarchy and better understand its structure.
|
||||
bootstrapLink: components/breadcrumb/
|
||||
description: A navigation aid for better structure.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Breadcrumb from '@shared/components/ui/Breadcrumb.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the `breadcrumb` class to add a breadcrumb to your interface design for better navigation. The `active` modifier in a `li` tag will help you indicate the current page location and facilitate navigation within your website or app.
|
||||
|
||||
Look at the example below to see how breadcrumbs work in practice.
|
||||
|
||||
<Example centered>
|
||||
<Breadcrumb pages="Home,Library,Data" />
|
||||
</Example>
|
||||
|
||||
## Different separators
|
||||
|
||||
You can use different breadcrumb styles to match your website or app design. Choose between `breadcrumb-dots`, `breadcrumb-arrows`, and `breadcrumb-bullets` to create a unique look.
|
||||
|
||||
This example shows how to use different breadcrumb styles.
|
||||
|
||||
<Example vertical separated centered>
|
||||
<Breadcrumb pages="Home,Library,Data" separator="dots" /> <Breadcrumb pages="Home,Library,Data" separator="arrows" /> <Breadcrumb pages="Home,Library,Data" separator="bullets" />
|
||||
</Example>
|
||||
|
||||
## With icon
|
||||
|
||||
You can use icons in breadcrumbs to make them more visually appealing. The example below demonstrates how to use icons in breadcrumbs.
|
||||
|
||||
<Example vertical separated>
|
||||
<Breadcrumb pages="Home,Library,Data" home-icon />
|
||||
</Example>
|
||||
|
||||
## Muted breadcrumbs
|
||||
|
||||
You can use the `breadcrumb-muted` class to create a muted breadcrumb style. This style is perfect for breadcrumbs that are not the main focus of your website or app.
|
||||
|
||||
<Example>
|
||||
<Breadcrumb pages="Home,Library,Data" class="breadcrumb-muted" />
|
||||
</Example>
|
||||
|
||||
## Breadcrumb in headers
|
||||
|
||||
You can use breadcrumbs in headers to show the current page location and provide a better navigation experience. The example below demonstrates how to use breadcrumbs in headers.
|
||||
|
||||
<Example centered vertical>
|
||||
<div class="page-header"> <div class="row align-items-center mw-100"> <div class="col"> <Breadcrumb pages="Home,Library,Articles" /> <h2 class="page-title"> <span class="text-truncate">How to Build a Modern Dashboard with Tabler</span> </h2> </div> <div class="col-auto"> <div class="btn-list"> <a href="#" class="btn d-none d-md-inline-flex"> <Icon name="edit" /> Edit </a> <a href="#" class="btn btn-primary">Publish</a> </div> </div> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,284 @@
|
||||
---
|
||||
title: Button
|
||||
summary: Use a button style that best suits your design and encourages users to take the desired action. You can customize button properties to improve user experience by changing size, shape, color, and more.
|
||||
bootstrapLink: components/buttons/
|
||||
description: A customizable button for user actions.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
|
||||
## Button tag
|
||||
|
||||
As one of the most common elements of UI design, buttons have a very important function of engaging users within your website or app and guiding them in their actions. Use the `.btn` classes with the `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention.
|
||||
|
||||
<Example centered>
|
||||
<a href="#" class="btn" role="button">Link</a> <button class="btn">Button</button> <input type="button" class="btn" value="Input" /> <input type="submit" class="btn" value="Submit" /> <input type="reset" class="btn" value="Reset" />
|
||||
</Example>
|
||||
|
||||
## Default button
|
||||
|
||||
The standard button creates a white background and subtle hover animation. It's meant to look and behave as an interactive element of your page.
|
||||
|
||||
<Example centered>
|
||||
<a href="#" class="btn" role="button">Link</a>
|
||||
</Example>
|
||||
|
||||
## Button variations
|
||||
|
||||
Use the button classes that correspond to the function of your button. The big range of available colors will help you show your button's purpose and make it easy to spot.
|
||||
|
||||
<Example separated centered>
|
||||
<a href="#" class="btn btn-primary">Primary</a> <a href="#" class="btn btn-secondary">Secondary</a> <a href="#" class="btn btn-success">Success</a> <a href="#" class="btn btn-warning">Warning</a> <a href="#" class="btn btn-danger">Danger</a> <a href="#" class="btn btn-info">Info</a> <a href="#" class="btn btn-dark">Dark</a> <a href="#" class="btn btn-light">Light</a>
|
||||
</Example>
|
||||
|
||||
## Disabled buttons
|
||||
|
||||
Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.
|
||||
|
||||
<Example separated centered>
|
||||
<a href="#" class="btn btn-primary disabled">Primary</a> <a href="#" class="btn btn-secondary disabled">Secondary</a> <a href="#" class="btn btn-success disabled">Success</a> <a href="#" class="btn btn-warning disabled">Warning</a> <a href="#" class="btn btn-danger disabled">Danger</a> <a href="#" class="btn btn-info disabled">Info</a> <a href="#" class="btn btn-dark disabled">Dark</a> <a href="#" class="btn btn-light disabled">Light</a>
|
||||
</Example>
|
||||
|
||||
## Color variations
|
||||
|
||||
Choose the right color for your button to make it go well with your design and draw users' attention. Button colors can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.
|
||||
|
||||
<Example separated centered>
|
||||
<a href="#" class="btn btn-blue">Blue</a> <a href="#" class="btn btn-azure">Azure</a> <a href="#" class="btn btn-indigo">Indigo</a> <a href="#" class="btn btn-purple">Purple</a> <a href="#" class="btn btn-pink">Pink</a> <a href="#" class="btn btn-red">Red</a> <a href="#" class="btn btn-orange">Orange</a> <a href="#" class="btn btn-yellow">Yellow</a> <a href="#" class="btn btn-lime">Lime</a> <a href="#" class="btn btn-green">Green</a> <a href="#" class="btn btn-teal">Teal</a> <a href="#" class="btn btn-cyan">Cyan</a>
|
||||
</Example>
|
||||
|
||||
## Ghost buttons
|
||||
|
||||
Use the `.btn-ghost-*` class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, encouraging them to take action at the same time.
|
||||
|
||||
<Example separated vertical>
|
||||
<a href="#" class="btn btn-ghost-primary">Primary</a> <a href="#" class="btn btn-ghost-secondary">Secondary</a> <a href="#" class="btn btn-ghost-success">Success</a> <a href="#" class="btn btn-ghost-warning">Warning</a> <a href="#" class="btn btn-ghost-danger">Danger</a> <a href="#" class="btn btn-ghost-info">Info</a> <a href="#" class="btn btn-ghost-dark">Dark</a> <div class="p-2 bg-dark"> <a href="#" class="btn btn-ghost-light">Light</a> </div>
|
||||
</Example>
|
||||
|
||||
## Square buttons
|
||||
|
||||
Use the `.btn-square` class to remove the border radius, if you want the corners of your button to be square rather than rounded.
|
||||
|
||||
<Example centered>
|
||||
<a href="#" class="btn btn-square">Square button</a>
|
||||
</Example>
|
||||
|
||||
## Pill buttons
|
||||
|
||||
Add the `.btn-pill` class to your button to make it rounded and give it a modern and attractive look.
|
||||
|
||||
<Example centered>
|
||||
<a href="#" class="btn btn-pill">Pill button</a>
|
||||
</Example>
|
||||
|
||||
## Outline buttons
|
||||
|
||||
Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.
|
||||
|
||||
<Example centered>
|
||||
<a href="#" class="btn btn-outline-primary">Primary</a> <a href="#" class="btn btn-outline-secondary">Secondary</a> <a href="#" class="btn btn-outline-success">Success</a> <a href="#" class="btn btn-outline-warning">Warning</a> <a href="#" class="btn btn-outline-danger">Danger</a> <a href="#" class="btn btn-outline-info">Info</a> <a href="#" class="btn btn-outline-dark">Dark</a> <a href="#" class="btn btn-outline-light">Light</a>
|
||||
</Example>
|
||||
|
||||
## Button size
|
||||
|
||||
Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.
|
||||
|
||||
<Example centered>
|
||||
<button type="button" class="btn btn-primary btn-lg">Large button</button> <button type="button" class="btn btn-lg">Large button</button>
|
||||
</Example>
|
||||
|
||||
<Example centered>
|
||||
<button type="button" class="btn btn-primary btn-sm">Small button</button> <button type="button" class="btn btn-sm">Small button</button>
|
||||
</Example>
|
||||
|
||||
## Buttons with icons
|
||||
|
||||
Label your button with text and add an icon to communicate the action and make it easy to identify for users. Icons are easily recognized and improve the aesthetics of your button design, giving it a modern and attractive look.
|
||||
|
||||
See all icons at [tabler.io/icons](https://tabler.io/icons).
|
||||
|
||||
<Example centered>
|
||||
<button type="button" class="btn"> <Icon name="upload" /> Upload </button> <button type="button" class="btn btn-warning"> <Icon name="heart" /> I like </button> <button type="button" class="btn btn-success"> <Icon name="check" /> I agree </button> <button type="button" class="btn btn-primary"> <Icon name="plus" /> More </button> <button type="button" class="btn btn-danger"> <Icon name="link" /> Link </button> <button type="button" class="btn btn-info"> <Icon name="message" /> Comment </button>
|
||||
</Example>
|
||||
|
||||
## Social buttons
|
||||
|
||||
You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.
|
||||
|
||||
<Example separated centered hideCode>
|
||||
<a href="#" class="btn btn-facebook"> <Icon name="brand-facebook" /> Facebook </a> <a href="#" class="btn btn-twitter"> <Icon name="brand-twitter" /> Twitter </a> <a href="#" class="btn btn-google"> <Icon name="brand-google" /> Google </a> <a href="#" class="btn btn-youtube"> <Icon name="brand-youtube" /> Youtube </a> <a href="#" class="btn btn-vimeo"> <Icon name="brand-vimeo" /> Vimeo </a> <a href="#" class="btn btn-dribbble"> <Icon name="brand-dribbble" /> Dribbble </a> <a href="#" class="btn btn-github"> <Icon name="brand-github" /> Github </a> <a href="#" class="btn btn-instagram"> <Icon name="brand-instagram" /> Instagram </a> <a href="#" class="btn btn-pinterest"> <Icon name="brand-pinterest" /> Pinterest </a> <a href="#" class="btn btn-vk"> <Icon name="brand-vk" /> VK </a> <a href="#" class="btn btn-rss"> <Icon name="brand-rss" /> RSS </a> <a href="#" class="btn btn-flickr"> <Icon name="brand-flickr" /> Flickr </a> <a href="#" class="btn btn-bitbucket"> <Icon name="brand-bitbucket" /> Bitbucket </a> <a href="#" class="btn btn-tabler"> <Icon name="brand-tabler" /> Tabler </a>
|
||||
</Example>
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-facebook">
|
||||
<svg>...</svg>
|
||||
Facebook
|
||||
</a>
|
||||
```
|
||||
|
||||
You can also add an icon without the name of a social networking site, if you want to display more buttons in a small space.
|
||||
|
||||
<Example separated vertical hideCode>
|
||||
<a href="#" class="btn btn-facebook btn-icon" aria-label="Button"> <Icon name="brand-facebook" /> </a> <a href="#" class="btn btn-x btn-icon" aria-label="Button"> <Icon name="brand-x" /> </a> <a href="#" class="btn btn-google btn-icon" aria-label="Button"> <Icon name="brand-google" /> </a> <a href="#" class="btn btn-youtube btn-icon" aria-label="Button"> <Icon name="brand-youtube" /> </a> <a href="#" class="btn btn-vimeo btn-icon" aria-label="Button"> <Icon name="brand-vimeo" /> </a> <a href="#" class="btn btn-dribbble btn-icon" aria-label="Button"> <Icon name="brand-dribbble" /> </a> <a href="#" class="btn btn-github btn-icon" aria-label="Button"> <Icon name="brand-github" /> </a> <a href="#" class="btn btn-instagram btn-icon" aria-label="Button"> <Icon name="brand-instagram" /> </a> <a href="#" class="btn btn-pinterest btn-icon" aria-label="Button"> <Icon name="brand-pinterest" /> </a> <a href="#" class="btn btn-vk btn-icon" aria-label="Button"> <Icon name="brand-vk" /> </a> <a href="#" class="btn btn-rss btn-icon" aria-label="Button"> <Icon name="rss" /> </a> <a href="#" class="btn btn-flickr btn-icon" aria-label="Button"> <Icon name="brand-flickr" /> </a> <a href="#" class="btn btn-bitbucket btn-icon" aria-label="Button"> <Icon name="brand-bitbucket" /> </a> <a href="#" class="btn btn-tabler btn-icon" aria-label="Button"> <Icon name="brand-tabler" /> </a>
|
||||
</Example>
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
```
|
||||
|
||||
## Icon buttons
|
||||
|
||||
Add the `.btn-icon` class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.
|
||||
|
||||
<Example separated centered hideCode>
|
||||
<a href="#" class="btn btn-primary btn-icon" aria-label="Button"> <Icon name="activity" /> </a> <a href="#" class="btn btn-github btn-icon" aria-label="Button"> <Icon name="brand-github" /> </a> <a href="#" class="btn btn-success btn-icon" aria-label="Button"> <Icon name="bell" /> </a> <a href="#" class="btn btn-warning btn-icon" aria-label="Button"> <Icon name="star" /> </a> <a href="#" class="btn btn-danger btn-icon" aria-label="Button"> <Icon name="trash" /> </a> <a href="#" class="btn btn-purple btn-icon" aria-label="Button"> <Icon name="chart-bar" /> </a> <a href="#" class="btn btn-icon" aria-label="Button"> <Icon name="git-merge" /> </a>
|
||||
</Example>
|
||||
|
||||
```html
|
||||
<a href="#" class="btn btn-primary btn-icon" aria-label="Button">
|
||||
<svg>...</svg>
|
||||
</a>
|
||||
```
|
||||
|
||||
## Dropdown buttons
|
||||
|
||||
Create a dropdown button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.
|
||||
|
||||
<Example centered hideCode height="260px">
|
||||
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"> <Icon name="calendar" /> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> </div> </div> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"> <Icon name="calendar" /> Show calendar </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> </div> </div> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">Show calendar</button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> </div> </div>
|
||||
</Example>
|
||||
|
||||
```html
|
||||
<div class="dropdown">
|
||||
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
|
||||
<svg>...</svg>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Loading buttons
|
||||
|
||||
Add the `.btn-loading` class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished.
|
||||
|
||||
<Example centered>
|
||||
<a href="#" class="btn btn-primary btn-loading"> Button </a> <a href="#" class="btn btn-primary btn-loading"> Loading button with loooong content </a>
|
||||
</Example>
|
||||
|
||||
<Example centered>
|
||||
<a href="#" class="btn btn-primary"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a>
|
||||
</Example>
|
||||
|
||||
## Full width buttons
|
||||
|
||||
Add the `.w-100` class to make buttons span the full width of their container. This is useful for mobile-first designs or when you want buttons to take up the entire available space.
|
||||
|
||||
<Example separated>
|
||||
<a href="#" class="btn btn-primary w-100">Full width button</a> <a href="#" class="btn btn-outline-secondary w-100">Full width outline button</a>
|
||||
</Example>
|
||||
|
||||
## List of buttons
|
||||
|
||||
Create a list of buttons using the `.btn-list` container to display different actions a user can take. If you add additional styling, such as colors, you will be able to focus users' attention on a particular action or suggest the result.
|
||||
|
||||
<Example centered>
|
||||
<div class="btn-list"> <a href="#" class="btn btn-success">Save changes</a> <a href="#" class="btn">Save and continue</a> <a href="#" class="btn btn-danger">Cancel</a> </div>
|
||||
</Example>
|
||||
|
||||
If the list is long, it will be wrapped and some buttons will be moved to the next line, keeping them all evenly spaced.
|
||||
|
||||
<Example centered>
|
||||
<div class="btn-list"> <a href="#" class="btn">One</a> <a href="#" class="btn">Two</a> <a href="#" class="btn">Three</a> <a href="#" class="btn">Four</a> <a href="#" class="btn">Five</a> <a href="#" class="btn">Six</a> <a href="#" class="btn">Seven</a> <a href="#" class="btn">Eight</a> <a href="#" class="btn">Nine</a> <a href="#" class="btn">Ten</a> <a href="#" class="btn">Eleven</a> <a href="#" class="btn">Twelve</a> <a href="#" class="btn">Thirteen</a> <a href="#" class="btn">Fourteen</a> <a href="#" class="btn">Fifteen</a> <a href="#" class="btn">Sixteen</a> <a href="#" class="btn">Seventeen</a> <a href="#" class="btn">Eighteen</a> <a href="#" class="btn">Nineteen</a> </div>
|
||||
</Example>
|
||||
|
||||
Use the `.text-center` or the `.text-end` modifiers to change the buttons' alignment and place them where they suit best.
|
||||
|
||||
<Example>
|
||||
<div class="btn-list justify-content-center"> <a href="#" class="btn">Save and continue</a> <a href="#" class="btn btn-primary">Save changes</a> </div>
|
||||
</Example>
|
||||
|
||||
<Example>
|
||||
<div class="btn-list justify-content-end"> <a href="#" class="btn">Save and continue</a> <a href="#" class="btn btn-primary">Save changes</a> </div>
|
||||
</Example>
|
||||
|
||||
<Example>
|
||||
<div class="btn-list"> <a href="#" class="btn btn-outline-danger me-auto">Delete</a> <a href="#" class="btn">Save and continue</a> <a href="#" class="btn btn-primary">Save changes</a> </div>
|
||||
</Example>
|
||||
|
||||
## Buttons with badges
|
||||
|
||||
Add badges to buttons to display additional information like counts, notifications, or status indicators. Badges automatically position themselves within the button layout.
|
||||
|
||||
<Example centered>
|
||||
<a href="#" class="btn"> Notifications <span class="badge ms-2">14</span> </a> <a href="#" class="btn"> Messages <span class="badge ms-2">3</span> </a> <a href="#" class="btn"> Alerts <span class="badge ms-2">7</span> </a>
|
||||
</Example>
|
||||
|
||||
## Buttons with avatars
|
||||
|
||||
Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
|
||||
|
||||
<Example centered>
|
||||
<a href="#" class="btn"> <span class="avatar" style="background-image: url(/static/avatars/002f.jpg);" ></span> Avatar </a> <a href="#" class="btn"> <span class="avatar" style=" background-image: url(/static/avatars/002m.jpg); " ></span> Avatar </a> <a href="#" class="btn"> <span class="avatar" style=" background-image: url(/static/avatars/004f.jpg); " ></span> Avatar </a>
|
||||
</Example>
|
||||
|
||||
## Buttons with animations on hover
|
||||
|
||||
Add a subtle animation effect to your buttons when users hover over them. This can enhance the interactivity and provide visual feedback to improve the user experience.
|
||||
|
||||
<Example>
|
||||
<div class="btn-list"> <a class="btn btn-animate-icon"> Save <Icon name="arrow-right" class="icon-end" /> </a> <a class="btn btn-animate-icon btn-animate-icon-rotate"> <Icon name="plus" /> Add </a> <a class="btn btn-animate-icon btn-animate-icon-shake"> <Icon name="bell" /> Notifications </a> <a class="btn btn-animate-icon btn-animate-icon-rotate"> <Icon name="settings" /> Settings </a> <a class="btn btn-animate-icon btn-animate-icon-pulse"> <Icon name="heart" /> Love </a> <a class="btn btn-animate-icon btn-animate-icon-rotate"> <Icon name="x" /> Close </a> <a class="btn btn-animate-icon btn-animate-icon-tada"> <Icon name="check" /> Confirm </a> <a class="btn btn-animate-icon"> Next <Icon name="chevron-right" class="icon-end" /> </a> <a class="btn btn-animate-icon btn-animate-icon-move-start"> <Icon name="chevron-left" /> Previous </a> </div>
|
||||
</Example>
|
||||
|
||||
## Button sizes
|
||||
|
||||
Use size modifiers to change the size of your buttons. Available sizes: `.btn-xs`, `.btn-sm`, default, `.btn-lg`, `.btn-xl`.
|
||||
|
||||
<Example separated centered vertical>
|
||||
<button type="button" class="btn btn-sm">Small button</button> <button type="button" class="btn">Default button</button> <button type="button" class="btn btn-lg">Large button</button> <button type="button" class="btn btn-xl">Extra large button</button>
|
||||
</Example>
|
||||
|
||||
## Link buttons
|
||||
|
||||
Use the `.btn-link` class to create buttons that look like links but maintain button functionality. These are useful for secondary actions that shouldn't compete with primary buttons for attention.
|
||||
|
||||
<Example centered>
|
||||
<a href="#" class="btn btn-link">Link button</a> <button type="button" class="btn btn-link">Link button</button>
|
||||
</Example>
|
||||
|
||||
## Action buttons
|
||||
|
||||
Use the `.btn-action` class to create subtle action buttons that are perfect for card headers, toolbars, or other interface elements where you want minimal visual impact.
|
||||
|
||||
<Example centered>
|
||||
<div class="btn-actions"> <a href="#" class="btn btn-action" aria-label="Edit"> <Icon name="edit" /> </a> <a href="#" class="btn btn-action" aria-label="Copy"> <Icon name="copy" /> </a> <a href="#" class="btn btn-action" aria-label="Settings"> <Icon name="settings" /> </a> <a href="#" class="btn btn-action" aria-label="Delete"> <Icon name="trash" /> </a> </div>
|
||||
</Example>
|
||||
|
||||
## Action button groups
|
||||
|
||||
Use the `.btn-actions` container to group multiple action buttons together. This creates a cohesive set of related actions that work well in card headers, toolbars, or other interface elements.
|
||||
|
||||
<Example centered>
|
||||
<div class="btn-actions"> <a href="#" class="btn btn-action"> <Icon name="refresh" /> </a> <a href="#" class="btn btn-action"> <Icon name="chevron-up" /> </a> <a href="#" class="btn btn-action"> <Icon name="dots-vertical" /> </a> <a href="#" class="btn btn-action"> <Icon name="x" /> </a> </div>
|
||||
</Example>
|
||||
|
||||
## Button groups
|
||||
|
||||
Use button groups to combine related buttons together. Button groups are perfect for creating toolbars, segmented controls, or any interface where multiple related actions should be visually grouped.
|
||||
|
||||
<Example centered>
|
||||
<div class="btn-group" role="group"> <button type="button" class="btn">Left</button> <button type="button" class="btn">Middle</button> <button type="button" class="btn">Right</button> </div>
|
||||
</Example>
|
||||
|
||||
<Example centered>
|
||||
<div class="btn-group" role="group"> <input type="radio" class="btn-check" name="btn-radio" id="btn-radio-1" autocomplete="off" checked /> <label class="btn" for="btn-radio-1">Radio 1</label> <input type="radio" class="btn-check" name="btn-radio" id="btn-radio-2" autocomplete="off" /> <label class="btn" for="btn-radio-2">Radio 2</label> <input type="radio" class="btn-check" name="btn-radio" id="btn-radio-3" autocomplete="off" /> <label class="btn" for="btn-radio-3">Radio 3</label> </div>
|
||||
</Example>
|
||||
|
||||
<Example centered>
|
||||
<div class="btn-group-vertical" role="group"> <button type="button" class="btn">Top</button> <button type="button" class="btn">Middle</button> <button type="button" class="btn">Bottom</button> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,137 @@
|
||||
---
|
||||
title: Card gradient
|
||||
summary: Card gradients add rich color backgrounds to cards and help emphasize key information in dashboards and marketing sections.
|
||||
description: Build eye-catching cards with gradient variants, directions, and animated backgrounds.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
export const gradients = ['rainbow', 'sun', 'snow', 'ocean', 'mellow', 'disco', 'psychedelic', 'love', 'gold']
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the `.card-gradient` class on a `.card` element to apply the default gradient treatment.
|
||||
|
||||
```html
|
||||
<div class="card card-gradient">...</div>
|
||||
```
|
||||
|
||||
The example below shows the base gradient card style.
|
||||
|
||||
<Example>
|
||||
|
||||
<div class="card card-gradient">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Total Revenue</h3>
|
||||
<p class="text-secondary mb-0">Track key metrics in a highlighted card.</p>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Color variants
|
||||
|
||||
You can change the color of card gradient by adding a color class like `.card-gradient-primary` or `.card-gradient-success` to the `.card-gradient` element. You can choose any color from [full list of available colors](/ui/base/colors).
|
||||
|
||||
<Example>
|
||||
|
||||
<div class="card card-gradient card-gradient-primary">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Primary</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-gradient card-gradient-success">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Success</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-gradient card-gradient-danger">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Danger</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-gradient card-gradient-blue">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Blue</h3>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Named gradients
|
||||
|
||||
In addition to color-based variants, card gradients include predefined multi-color themes.
|
||||
|
||||
Here is a list of classes:
|
||||
<ul>
|
||||
{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}`}>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">{gradient.charAt(0).toUpperCase() + gradient.slice(1)}</h3>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
</Example>
|
||||
|
||||
## Direction modifiers
|
||||
|
||||
Use direction modifiers to control where the gradient flow starts.
|
||||
|
||||
```html
|
||||
<div class="card card-gradient card-gradient-start">...</div>
|
||||
<div class="card card-gradient card-gradient-end">...</div>
|
||||
<div class="card card-gradient card-gradient-bottom">...</div>
|
||||
```
|
||||
|
||||
<Example>
|
||||
|
||||
<div class="card card-gradient card-gradient-start card-gradient-purple">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Start</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-gradient card-gradient-end card-gradient-purple">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">End</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-gradient card-gradient-bottom card-gradient-purple">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Bottom</h3>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Animated gradient
|
||||
|
||||
Add `.card-gradient-animated` to animate gradient direction over time.
|
||||
|
||||
<Example>
|
||||
|
||||
<div class="card card-gradient card-gradient-rainbow card-gradient-animated">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Animated gradient</h3>
|
||||
<p class="text-secondary mb-0">Use this variant for visual emphasis on highlight cards.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-gradient card-gradient-sun card-gradient-animated">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Animated gradient</h3>
|
||||
<p class="text-secondary mb-0">Use this variant for visual emphasis on highlight cards.</p>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Keep text contrast readable on all gradient variants.
|
||||
- Prefer short content blocks on high-saturation gradients.
|
||||
- Avoid using animated gradients on too many cards in one view.
|
||||
@@ -0,0 +1,91 @@
|
||||
---
|
||||
title: Card
|
||||
summary: A card is a flexible user interface element that helps organize content into meaningful sections and display it across different screen sizes. It can contain smaller elements such as images, text, links, and buttons, and can act as an entry point to more detailed information.
|
||||
bootstrapLink: components/card/
|
||||
description: Organize content with a flexible card.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
|
||||
## Default card
|
||||
|
||||
Use the `.card` and `.card-body` classes to create a card and use it as the basis for a more advanced card design. A card is a perfect way to organize content and make it look neat and tidy.
|
||||
|
||||
<Example bg="surface-secondary" column>
|
||||
<div class="card"> <div class="card-body"> <p>This is some text within a card body.</p> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Card padding
|
||||
|
||||
You can change the padding of a newly created card. To do it, use the `.card-sm`, `.card-md` or `.card-lg` classes.
|
||||
|
||||
Cards with the `.card-sm` class are well suited for small items such as widgets, etc., while the `.card-lg` class can be used for large blocks of text. Padding will be automatically reduced on small devices, to fit the screen size.
|
||||
|
||||
<Example bg="surface-secondary" column>
|
||||
<div class="card card-sm"> <div class="card-body">This is some text within a card body.</div> </div> <div class="card"> <div class="card-body">This is some text within a card body.</div> </div> <div class="card card-md"> <div class="card-body">This is some text within a card body.</div> </div> <div class="card card-lg"> <div class="card-body">This is some text within a card body.</div> </div>
|
||||
</Example>
|
||||
|
||||
## Card with title
|
||||
|
||||
Add a title to your card by including the `.card-title` class within `.card-body`. You can also place the title inside the `.card-header` element to separate the title from the content with a horizontal line.
|
||||
|
||||
<Example bg="surface-secondary" column>
|
||||
<div class="card"> <div class="card-body"> <h3 class="card-title">Card title</h3> <p class="text-secondary">This is some text within a card body.</p> </div> </div> <div class="card"> <div class="card-header"> <h3 class="card-title">Card title</h3> </div> <div class="card-body"> <p class="text-secondary">This is some text within a card body.</p> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Card with title and image
|
||||
|
||||
To create a more visually appealing card, add a title and an image. Thanks to that, the card will go well with your interface design and draw users' attention.
|
||||
|
||||
<Example bg="surface-secondary" column>
|
||||
<div class="card"> <div class="img-responsive img-responsive-21x9 card-img-top" style="background-image: url(/static/photos/cup-of-coffee-and-an-open-book.jpg)" ></div> <div class="card-body"> <h3 class="card-title">Card with title and image</h3> <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. </p> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Blog post card
|
||||
|
||||
Add an image to your blog post card to make it eye-catching. You can do it by adding the image, with a `.card-img-top` class, inside the `.card` element. Thanks to the `.d-flex` and `.flex-column` classes within `.card-body`, the author details will be displayed at the bottom of the card.
|
||||
|
||||
<Example bg="surface-secondary" column>
|
||||
<div class="card d-flex flex-column"> <a href="#"> <img class="card-img-top" src="/static/photos/book-on-the-grass.jpg" alt="" /> </a> <div class="card-body d-flex flex-column"> <h3 class="card-title"> <a href="#">How do you know she is a witch?</a> </h3> <div class="text-secondary"> Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ... </div> <div class="d-flex align-items-center pt-4 mt-auto"> <span class="avatar" style="background-image: url(/static/avatars/023m.jpg)"></span> <div class="ms-3"> <a href="#" class="text-body">Maryjo Lebarree</a> <div class="text-secondary">3 days ago</div> </div> <div class="ms-auto"> <a href="#" class="icon d-none d-md-inline-block ms-3 text-secondary"> <Icon name="heart" /> </a> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Row deck
|
||||
|
||||
Add the `.row-deck` class to `.row`, if you want to display several cards next to one another. Thanks to that, they will all have the same height.
|
||||
|
||||
<Example bg="surface-secondary">
|
||||
<div class="row row-deck"> <div class="col-md-4"> <div class="card"> <div class="card-body">Short content</div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-body"> Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-body">Short content</div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Post card with aside image
|
||||
|
||||
You can also add an image on the left side of the card. To do it, add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element and it will be automatically centered and scaled to the right size.
|
||||
|
||||
<Example bg="surface-secondary">
|
||||
<div class="card d-flex flex-column"> <div class="row row-0 flex-fill"> <div class="col-md-3"> <a href="#"> <img src="/static/photos/a-woman-works-on-a-laptop-at-home.jpg" class="w-100 h-100 object-cover" alt="Card side image" /> </a> </div> <div class="col"> <div class="card-body h-full d-flex flex-column"> <h3 class="card-title"> <a href="#">Shut up!</a> </h3> <div class="text-secondary"> Burn her! How do you know she is a witch? You don't frighten us, English pig-dogs! Go and boil yo... </div> <div class="d-flex align-items-center pt-4 mt-auto"> <span class="avatar" style="background-image: url(/static/avatars/029m.jpg)"></span> <div class="ms-3"> <a href="#" class="text-body">Egan Poetz</a> <div class="text-secondary">3 days ago</div> </div> <div class="ms-auto"> <a href="#" class="icon d-none d-md-inline-block ms-3 text-red"> <Icon name="heart" /> </a> </div> </div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Color variations
|
||||
|
||||
Add a status color to your card, either at the top or on the side of the card, to customize it and make it more eye-catching. Use `card-status-*` and `bg-*` classes to change the placement and color of the status border.
|
||||
|
||||
<Example bg="surface-secondary">
|
||||
<div class="row row-deck"> <div class="col-md-6"> <div class="card"> <div class="card-status-top bg-danger"></div> <div class="card-body"> <h3 class="card-title">Card with top status</h3> <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. </p> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-status-start bg-green"></div> <div class="card-body"> <h3 class="card-title">Card with side status</h3> <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. </p> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Stacked card
|
||||
|
||||
Use the `card-stacked` class to stack up multiple cards, if you want to save screen space or create a visually appealing effect.
|
||||
|
||||
<Example bg="surface-secondary" column>
|
||||
<div class="card card-stacked"> <div class="card-body"> <h3 class="card-title">Stacked card</h3> <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. </p> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Tabbed card
|
||||
|
||||
Organize multiple cards into tabs to be able to display more content in a well-organized way and allow users to alternate between them easily.
|
||||
|
||||
<Example bg="surface-secondary" column>
|
||||
<div class="card-tabs"> <ul class="nav nav-tabs"> <li class="nav-item"> <a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a> </li> <li class="nav-item"> <a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a> </li> <li class="nav-item"> <a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a> </li> <li class="nav-item"> <a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</a> </li> </ul> <div class="tab-content"> <div id="tab-top-1" class="card tab-pane active show"> <div class="card-body"> <div class="card-title">Content of tab #1</div> <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. </p> </div> </div> <div id="tab-top-2" class="card tab-pane"> <div class="card-body"> <div class="card-title">Content of tab #2</div> <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. </p> </div> </div> <div id="tab-top-3" class="card tab-pane"> <div class="card-body"> <div class="card-title">Content of tab #3</div> <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. </p> </div> </div> <div id="tab-top-4" class="card tab-pane"> <div class="card-body"> <div class="card-title">Content of tab #4</div> <p class="text-secondary"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. </p> </div> </div> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
title: Carousel
|
||||
summary: A carousel is used to display multiple pieces of visual content without taking up too much space. It eliminates the need to scroll down the page to see all content and is a popular method of presenting marketing information.
|
||||
bootstrapLink: components/carousel/
|
||||
description: Display visual content with a carousel.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.
|
||||
|
||||
<Example>
|
||||
<div id="carousel-sample" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="0" class="active" ></button> <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="1"></button> <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="2"></button> <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="3"></button> <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="4"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" alt="" src="/static/photos/city-lights-reflected-in-the-water-at-night.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/color-palette-guide-sample-colors-catalog-.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/finances-us-dollars-and-bitcoins-currency-money.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/tropical-palm-leaves-floral-pattern-background.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/young-woman-working-in-a-cafe.jpg" /> </div> </div> <a class="carousel-control-prev" data-bs-target="#carousel-sample" role="button" data-bs-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> <a class="carousel-control-next" data-bs-target="#carousel-sample" role="button" data-bs-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> </div>
|
||||
</Example>
|
||||
|
||||
## Dots indicators
|
||||
|
||||
You can replace the standard indicators with dots. Just add the `carousel-indicators-dot` class to your carousel:
|
||||
|
||||
<Example>
|
||||
<div id="carousel-indicators-dot" class="carousel slide carousel-fade" data-bs-ride="carousel"> <div class="carousel-indicators carousel-indicators-dot"> <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="0" class="active" ></button> <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="1"></button> <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="2"></button> <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="3"></button> <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="4"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" alt="" src="/static/photos/stylish-workspace-with-macbook-pro.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/coffee-on-a-table-with-other-items.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/book-on-the-grass.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/a-woman-works-at-a-desk-with-a-laptop-and-a-cup-of-coffee.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/people-by-a-banquet-table-full-with-food.jpg" /> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Thumb indicators
|
||||
|
||||
The syntax is similar for thumbnails. Add class `carousel-indicators-thumb` and add `background-image` to element `[data-bs-target]`. Default thumbnails have an aspect ratio of 1:1. To change this use `ratio` utils.
|
||||
|
||||
<Example>
|
||||
<div id="carousel-indicators-thumb" class="carousel slide carousel-fade" data-bs-ride="carousel"> <div class="carousel-indicators carousel-indicators-thumb"> <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="0" class="ratio ratio-4x3 active" style="background-image: url(/static/photos/group-of-people-sightseeing-in-the-city.jpg)" ></button> <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="1" class="ratio ratio-4x3" style="background-image: url(/static/photos/young-woman-working-in-a-cafe.jpg)" ></button> <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="2" class="ratio ratio-4x3" style=" background-image: url(/static/photos/soft-photo-of-woman-on-the-bed-with-the-book-and-cup-of-coffee-in-hands.jpg); " ></button> <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="3" class="ratio ratio-4x3" style="background-image: url(/static/photos/stylish-workplace-with-computer-at-home.jpg)" ></button> <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="4" class="ratio ratio-4x3" style="background-image: url(/static/photos/stylish-workspace-with-macbook-pro.jpg)" ></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" alt="" src="/static/photos/group-of-people-sightseeing-in-the-city.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/young-woman-working-in-a-cafe.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/soft-photo-of-woman-on-the-bed-with-the-book-and-cup-of-coffee-in-hands.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/stylish-workplace-with-computer-at-home.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/stylish-workspace-with-macbook-pro.jpg" /> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Vertical indicators
|
||||
|
||||
To make the indicators go to the right side, add the `carousel-indicators-vertical` class. You can combine it with other classes that are responsible for dots or thumbnails.
|
||||
|
||||
<Example>
|
||||
<div id="carousel-indicators-dot-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel" > <div class="carousel-indicators carousel-indicators-vertical carousel-indicators-dot"> <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="0" class="active" ></button> <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="1" ></button> <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="2" ></button> <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="3" ></button> <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="4" ></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" alt="" src="/static/photos/man-looking-out-to-sea.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/making-magic-with-fairy-lights.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/finances-us-dollars-and-bitcoins-currency-money-5.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/cup-of-coffee-on-table-in-cafe-2.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/young-woman-sitting-on-the-sofa-and-working-on-her-laptop-2.jpg" /> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
An example of adding thumbnails on the right side:
|
||||
|
||||
<Example>
|
||||
<div id="carousel-indicators-thumb-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel" > <div class="carousel-indicators carousel-indicators-vertical carousel-indicators-thumb"> <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="0" class="ratio ratio-4x3 active" style=" background-image: url(/static/photos/finances-us-dollars-and-bitcoins-currency-money.jpg); " ></button> <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="1" class="ratio ratio-4x3" style="background-image: url(/static/photos/businesswoman-working-at-her-laptop.jpg)" ></button> <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="2" class="ratio ratio-4x3" style="background-image: url(/static/photos/color-palette-guide-sample-colors-catalog-.jpg)" ></button> <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="3" class="ratio ratio-4x3" style=" background-image: url(/static/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg); " ></button> <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="4" class="ratio ratio-4x3" style=" background-image: url(/static/photos/beautiful-blonde-woman-on-a-wooden-pier-by-the-lake.jpg); " ></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" alt="" src="/static/photos/finances-us-dollars-and-bitcoins-currency-money.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/businesswoman-working-at-her-laptop.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/color-palette-guide-sample-colors-catalog-.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg" /> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/beautiful-blonde-woman-on-a-wooden-pier-by-the-lake.jpg" /> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Carousel with captions
|
||||
|
||||
Add captions to your slides easily with the `.carousel-caption` element within any `.carousel-item`. To make the text more readable on the image you can add `carousel-caption-background` which will add a black overlay over the image.
|
||||
Below the `md` responsive breakpoint, the captions on the following example will be hidden as they have the `d-none` class applied to them.
|
||||
|
||||
<Example>
|
||||
<div id="carousel-captions" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" alt="" src="/static/photos/workplace-with-laptop-on-table-at-home-4.jpg" /> <div class="carousel-caption-background d-none d-md-block"></div> <div class="carousel-caption d-none d-md-block"> <h3>Slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/people-watching-a-presentation-in-a-room.jpg" /> <div class="carousel-caption-background d-none d-md-block"></div> <div class="carousel-caption d-none d-md-block"> <h3>Slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/people-by-a-banquet-table-full-with-food.jpg" /> <div class="carousel-caption-background d-none d-md-block"></div> <div class="carousel-caption d-none d-md-block"> <h3>Slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/books-and-purple-flowers-on-a-wooden-stool-by-the-bed.jpg" /> <div class="carousel-caption-background d-none d-md-block"></div> <div class="carousel-caption d-none d-md-block"> <h3>Slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> <div class="carousel-item"> <img class="d-block w-100" alt="" src="/static/photos/cup-of-coffee-and-an-open-book.jpg" /> <div class="carousel-caption-background d-none d-md-block"></div> <div class="carousel-caption d-none d-md-block"> <h3>Slide label</h3> <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p> </div> </div> </div> <a class="carousel-control-prev" data-bs-target="#carousel-captions" role="button" data-bs-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> <a class="carousel-control-next" data-bs-target="#carousel-captions" role="button" data-bs-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
title: Chart
|
||||
docs-libs: [apexcharts]
|
||||
summary: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
|
||||
description: Interactive data visualizations with ApexCharts.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Chart from '@shared/components/Chart.astro'
|
||||
|
||||
To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
|
||||
|
||||
See also the [ApexCharts](https://apexcharts.com/) documentation.
|
||||
|
||||
## Line Chart
|
||||
|
||||
Line charts are an essential tool for visualizing data trends over time. They are particularly useful for representing continuous data, such as stock prices, website traffic, or user activity. Below is an example of a line chart showcasing session duration, page views, and total visits:
|
||||
|
||||
<Example>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Chart chartId="demo-line" legend height={15} />
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Area Chart
|
||||
|
||||
Area charts are ideal for representing cumulative data over time. They add visual emphasis to trends by filling the space under the line, making it easier to compare values. Here's an example of an area chart with smooth transitions and data from two series:
|
||||
|
||||
<Example>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Chart chartId="demo-area" height={15} />
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Bar Chart
|
||||
|
||||
Bar charts are highly effective for comparing data across different categories. They provide a clear and concise way to visualize differences in values, making them perfect for analyzing categorical data. Here's an example of a bar chart with stacked bars for enhanced readability:
|
||||
|
||||
<Example>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Chart chartId="demo-bar" height={15} />
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Pie Chart
|
||||
|
||||
Pie charts are a simple and effective way to visualize proportions and ratios. They are commonly used to represent data as percentages of a whole, making them ideal for displaying parts of a dataset. Below is an example of a pie chart showcasing distribution across categories:
|
||||
|
||||
<Example>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Chart chartId="demo-pie" height={15} />
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Heatmap Chart
|
||||
|
||||
Heatmaps provide a graphical representation of data where individual values are represented by color intensity. They are particularly useful for identifying patterns or anomalies within large datasets. Here's an example of a heatmap chart to visualize data distributions:
|
||||
|
||||
<Example>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Chart chartId="demo-heatmap" height={15} />
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Advanced example
|
||||
|
||||
For more complex data visualizations, you can create advanced charts with multiple series and custom configurations. Below is an example of a social media referrals chart combining data from Facebook, Twitter, and Dribbble:
|
||||
|
||||
<Example>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<Chart chartId="social-referrals" height={15} />
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
title: Countup
|
||||
summary: A countup element is used to display numerical data in an interesting way and make the interface more interactive.
|
||||
docs-libs: countup
|
||||
description: Display numbers dynamically with a countup.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
The countup component is used to display numbers dynamically. It is a great way to make the interface more interactive and engaging. The countup component is a simple and easy way to animate numbers in your application.
|
||||
|
||||
To be able to use the countup in your application you will need to install the countup.js dependency with `npm install countup.js`.
|
||||
|
||||
For more advanced features of countups, see the demo on the [countUp.js website](https://inorganik.github.io/countUp.js/).
|
||||
|
||||
## Basic usage
|
||||
|
||||
To create a countup, add `data-countup` to any HTML text tag and specify the number which is to be reached. The animation will be triggered as soon as the number enters the viewport.
|
||||
|
||||
```html
|
||||
<h1 data-countup>30000</h1>
|
||||
```
|
||||
|
||||
The results can be seen in the example below.
|
||||
|
||||
<Example centered>
|
||||
<h1 data-countup>30000</h1>
|
||||
</Example>
|
||||
|
||||
## Duration
|
||||
|
||||
Set the `duration` to determine how long the animation should take. By default, the duration is set to 2 seconds, but you can modify it as you wish.
|
||||
|
||||
<Example vertical separated>
|
||||
<h1 data-countup>30000</h1> <h1 data-countup='{"duration":4}'>30000</h1> <h1 data-countup='{"duration":6}'>30000</h1>
|
||||
</Example>
|
||||
|
||||
## Starting value
|
||||
|
||||
By default the countup will start from zero. If you want to set a different start value use `startVal`.
|
||||
You can also set the start value to be greater than the final value, so that it counts down instead of up.
|
||||
To see how the starting value affects the animation, look at the example below.
|
||||
|
||||
<Example vertical separated>
|
||||
<h1 data-countup='{"startVal":12345}'>30000</h1> <h1 data-countup='{"startVal":47655}'>30000</h1>
|
||||
</Example>
|
||||
|
||||
## Decimal places
|
||||
|
||||
Set how many decimal numbers should be displayed using `decimalPlaces`. By default, the number of decimal places is set to 0.
|
||||
|
||||
<Example vertical separated>
|
||||
<h1 data-countup>3.123</h1> <h1 data-countup='{"decimalPlaces":1}'>3.123</h1> <h1 data-countup='{"decimalPlaces":2}'>3.123</h1> <h1 data-countup='{"decimalPlaces":3}'>3.123</h1>
|
||||
</Example>
|
||||
|
||||
## Easing
|
||||
|
||||
Disable easing using `"useEasing": false`. Easing is set to `true` by default, so that the animation speed changes over the course of its duration. Easing can be disabled to make the animation linear.
|
||||
|
||||
<Example vertical separated>
|
||||
<h1 data-countup>30000</h1> <h1 data-countup='{"useEasing": false}'>30000</h1>
|
||||
</Example>
|
||||
|
||||
## Use grouping
|
||||
|
||||
Disable grouping using `"useGrouping": false`. Grouping is set to `true` by default, so that the number is displayed with a separator.
|
||||
|
||||
<Example vertical separated>
|
||||
<h1 data-countup>30000</h1> <h1 data-countup='{"useGrouping": false}'>30000</h1>
|
||||
</Example>
|
||||
|
||||
## Separator
|
||||
|
||||
You can change the default separator using `separator` and specifying the one you wish to use.
|
||||
|
||||
<Example vertical separated>
|
||||
<h1 data-countup>3000000</h1> <h1 data-countup='{"separator":" "}'>3000000</h1>
|
||||
</Example>
|
||||
|
||||
## Decimal separator
|
||||
|
||||
You can change the default decimal separator using `decimal` and specifying the one you wish to use.
|
||||
|
||||
<Example vertical separated>
|
||||
<h1 data-countup='{"decimalPlaces":2}'>3.12</h1> <h1 data-countup='{"decimalPlaces":2,"decimal":","}'>3.12</h1>
|
||||
</Example>
|
||||
|
||||
## Prefix
|
||||
|
||||
Set the countup prefix using `prefix` and specifying the prefix you want to add, for instance a currency symbol.
|
||||
|
||||
<Example vertical separated>
|
||||
<h1 data-countup='{"prefix":"$"}'>30000</h1> <h1 data-countup='{"prefix":"€"}'>30000</h1>
|
||||
</Example>
|
||||
|
||||
## Suffix
|
||||
|
||||
Set the countup suffix using `suffix` and specifying the suffix you want to add, for instance a percentage symbol.
|
||||
|
||||
<Example vertical separated>
|
||||
<h1 data-countup='{"suffix":"%"}'>300</h1> <h1 data-countup='{"suffix":"‰"}'>300</h1>
|
||||
</Example>
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: Data grid
|
||||
summary: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
|
||||
description: Detailed product information in grids.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
<Example>
|
||||
<div class="datagrid"> <div class="datagrid-item"> <div class="datagrid-title">Registrar</div> <div class="datagrid-content">Third Party</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Nameservers</div> <div class="datagrid-content">Third Party</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Port number</div> <div class="datagrid-content">3306</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Expiration date</div> <div class="datagrid-content">–</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Creator</div> <div class="datagrid-content"> <div class="d-flex align-items-center"> <span class="avatar avatar-xs me-2 rounded" style="background-image: url(/static/avatars/027m.jpg)" ></span> Paweł Kuna </div> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Age</div> <div class="datagrid-content">15 days</div> </div> <div class="datagrid-item"> <div class="datagrid-title">Edge network</div> <div class="datagrid-content"> <span class="status status-green"> Active </span> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Avatars list</div> <div class="datagrid-content"> <div class="avatar-list avatar-list-stacked"> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/029f.jpg)" ></span> <span class="avatar avatar-xs rounded">JL</span> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/015f.jpg)" ></span> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/004m.jpg)" ></span> <span class="avatar avatar-xs rounded" style="background-image: url(/static/avatars/037m.jpg)" ></span> <span class="avatar avatar-xs rounded">+3</span> </div> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Checkbox</div> <div class="datagrid-content"> <label class="form-check"> <input class="form-check-input" type="checkbox" checked /> <span class="form-check-label">Click me</span> </label> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Icon</div> <div class="datagrid-content"> <svg xmlns="http://www.w3.org/2000/svg" class="icon text-green" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M5 12l5 5l10 -10" /> </svg> Checked </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Form control</div> <div class="datagrid-content"> <input type="text" class="form-control form-control-flush" placeholder="Input placeholder" /> </div> </div> <div class="datagrid-item"> <div class="datagrid-title">Longer description</div> <div class="datagrid-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> </div> </div>
|
||||
</Example>
|
||||
|
||||
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` |
|
||||
@@ -0,0 +1,31 @@
|
||||
---
|
||||
title: Divider
|
||||
summary: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app.
|
||||
description: Separate content with clear dividers.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
Use dividers to visually separate content into parts. You can use a line only or add text that will be centered by default.
|
||||
|
||||
<Example>
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex. </p> <div class="hr-text">See also</div> <p> Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! </p>
|
||||
</Example>
|
||||
|
||||
## Text position
|
||||
|
||||
You can modify the position of the text which is to be included in a separator and make it left- or right-aligned. Otherwise, the text will remain centered.
|
||||
|
||||
<Example>
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex. </p> <div class="hr-text hr-text-start">Start divider</div> <p> Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! </p> <div class="hr-text">Centered divider</div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex. </p> <div class="hr-text hr-text-end">End divider</div> <p> Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! </p>
|
||||
</Example>
|
||||
|
||||
## Divider color
|
||||
|
||||
Customize the color of dividers to make them go well with your design. See the [full list of available colors](/ui/base/colors) for more details.
|
||||
|
||||
<Example>
|
||||
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex. </p> <div class="hr-text text-green">Green divider</div> <p> Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! </p> <div class="hr-text text-red">Red divider</div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex. </p> <div class="hr-text text-primary">Primary divider</div> <p> Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! </p>
|
||||
</Example>
|
||||
@@ -0,0 +1,96 @@
|
||||
---
|
||||
title: Dropdown
|
||||
summary: A dropdown is used to display a list of options or include more items in a menu without overwhelming users with too many buttons and long lists. It improves interaction with your website or software and keeps the interface clear.
|
||||
bootstrapLink: components/dropdowns
|
||||
description: Organize options with a dropdown menu.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Default dropdown
|
||||
|
||||
With small markup changes, you can turn any `.btn` into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.
|
||||
|
||||
<Example height="220px">
|
||||
<div class="dropdown"> <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Third action</a> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Dropdown divider
|
||||
|
||||
Use dropdown dividers to separate groups of dropdown items for greater clarity.
|
||||
|
||||
<Example height="240px">
|
||||
<div class="dropdown"> <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#"> Action </a> <a class="dropdown-item" href="#"> Another action </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Active state
|
||||
|
||||
Make a dropdown item look active, so that it highlights when a user hovers over a given option.
|
||||
|
||||
<Example height="220px">
|
||||
<div class="dropdown"> <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#"> Action </a> <a class="dropdown-item" href="#"> Another action </a> <a class="dropdown-item active" href="#">Active action</a> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Disabled state
|
||||
|
||||
Make a dropdown item look disabled to display options which are currently not available but can activate once certain conditions are met.
|
||||
|
||||
<Example height="220px">
|
||||
<div class="dropdown"> <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#"> Action </a> <a class="dropdown-item" href="#"> Another action </a> <a class="dropdown-item disabled" href="#">Disabled action</a> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Dropdown header
|
||||
|
||||
Add a dropdown header to group dropdown items into sections and name them accordingly.
|
||||
|
||||
<Example height="210px">
|
||||
<div class="dropdown"> <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a> <div class="dropdown-menu"> <span class="dropdown-header">Dropdown header</span> <a class="dropdown-item" href="#"> Action </a> <a class="dropdown-item" href="#"> Another action </a> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Dropdown with icons
|
||||
|
||||
Use icons in your dropdowns to add more visual content and make the options easy to identify for users.
|
||||
|
||||
<Example height="210px">
|
||||
<div class="dropdown"> <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a> <div class="dropdown-menu"> <span class="dropdown-header">Dropdown header</span> <a class="dropdown-item" href="#"> <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon icon-tabler icon-tabler-settings" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" ></path> <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path> </svg> Action </a> <a class="dropdown-item" href="#"> <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon icon-tabler icon-tabler-pencil" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path> <path d="M13.5 6.5l4 4"></path> </svg> Another action </a> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Dropdown with arrow
|
||||
|
||||
Add an arrow that points at the dropdown button.
|
||||
|
||||
<Example height="190px">
|
||||
<div class="dropdown"> <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a> <div class="dropdown-menu dropdown-menu-arrow"> <a class="dropdown-item" href="#"> Action </a> <a class="dropdown-item" href="#"> Another action </a> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Dropdown with badge
|
||||
|
||||
Add a badge to your dropdown items to show additional information related to an item or distinguish it from other elements.
|
||||
|
||||
<Example height="190px">
|
||||
<div class="dropdown"> <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#"> Action <span class="badge bg-primary ms-auto">12</span> </a> <a class="dropdown-item" href="#"> Another action <span class="badge bg-green ms-auto"></span> </a> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Dropdown with checkboxes
|
||||
|
||||
Use dropdowns with checkboxes to allow users to select options from a predefined list. Dropdowns with checkboxes are particularly useful for filtering.
|
||||
|
||||
<Example height="220px">
|
||||
<div class="dropdown"> <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a> <div class="dropdown-menu"> <label class="dropdown-item"> <input class="form-check-input m-0 me-2" type="radio" /> Option 1 </label> <label class="dropdown-item"> <input class="form-check-input m-0 me-2" type="radio" /> Option 2 </label> <label class="dropdown-item"> <input class="form-check-input m-0 me-2" type="radio" /> Option 3 </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Dark dropdown
|
||||
|
||||
Make your dropdown suit the dark mode of your website or software.
|
||||
|
||||
<Example height="220px">
|
||||
<div class="dropdown"> <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a> <div class="dropdown-menu dropdown-menu-arrow bg-dark text-white"> <span class="dropdown-header">Dropdown header</span> <a class="dropdown-item" href="#"> <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /> <circle cx="12" cy="12" r="3" /> </svg> Action </a> <a class="dropdown-item" href="#"> <svg xmlns="http://www.w3.org/2000/svg" class="icon dropdown-item-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /> <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /> <path d="M16 5l3 3" /> </svg> Another action </a> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Dropdown with card content
|
||||
|
||||
Use a dropdown with card content to make it easy for users to get more information on a given subject and avoid ovewhelming them with too much content at once.
|
||||
|
||||
<Example height="520px">
|
||||
<div class="dropdown"> <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a> <div class="dropdown-menu dropdown-menu-card" style="max-width: 16rem"> <div class="card d-flex flex-column"> <a href="#"> <img class="card-img-top" src="/static/photos/friends-at-a-restaurant-drinking-wine.jpg" alt="How do you know she is a witch?" /> </a> <div class="card-body d-flex flex-column"> <h3 class="card-title"> <a href="#">How do you know she is a witch?</a> </h3> <div class="text-secondary"> Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. </div> <div class="d-flex align-items-center pt-4 mt-auto"> <span class="avatar" style="background-image: url(/static/avatars/013m.jpg)"></span> <div class="ms-3"> <a href="#" class="text-body">Maryjo Lebarree</a> <div class="text-secondary">3 days ago</div> </div> <div class="ms-auto"> <a href="#" class="icon d-none d-md-inline-block ms-3 text-secondary"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /> </svg> </a> </div> </div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,58 @@
|
||||
---
|
||||
title: Dropzone
|
||||
summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop libraries on the web and is used by millions of people.
|
||||
description: Drag-and-drop file upload tool.
|
||||
docs-libs: dropzone
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Basic usage
|
||||
|
||||
The basic implementation of Dropzone allows you to quickly enable drag-and-drop file uploads on your web forms. By default, it provides a fallback for browsers that don’t support drag-and-drop functionality. Below is an example of how to set up a simple Dropzone form.
|
||||
|
||||
```html
|
||||
<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate>
|
||||
<div class="fallback">
|
||||
<input name="file" type="file" />
|
||||
</div>
|
||||
</form>
|
||||
```
|
||||
|
||||
To initialize the Dropzone form, you need to create a new instance of the Dropzone class and pass the form element as an argument. Here’s how you can do it:
|
||||
|
||||
```html
|
||||
<script>{`document.addEventListener("DOMContentLoaded", function () {
|
||||
new Dropzone("#dropzone-default");
|
||||
});`}</script>
|
||||
```
|
||||
|
||||
The Dropzone form will now be active and ready to accept file uploads. When a user drags and drops a file onto the form, the file will be uploaded to the server automatically.
|
||||
|
||||
<Example>
|
||||
<form class="dropzone" id="dropzone-default" action="." autocomplete="off" novalidate> <div class="fallback"> <input name="..." type="file" /> </div> </form> <script>{`document.addEventListener("DOMContentLoaded", function () { new Dropzone("#dropzone-default"); });`}</script>
|
||||
</Example>
|
||||
|
||||
## Add multiple files
|
||||
|
||||
To allow users to upload multiple files at once, you can enable the `multiple` attribute in the input field. This is particularly useful for applications that require batch uploads, such as image galleries or document management systems. Here’s how to configure Dropzone to accept multiple files:
|
||||
|
||||
```html
|
||||
<input name="..." type="file" multiple />
|
||||
```
|
||||
|
||||
By adding the `multiple` attribute to the input field, users can select multiple files from their local storage and upload them all at once. The Dropzone form will handle the file uploads automatically.
|
||||
|
||||
<Example>
|
||||
<form class="dropzone" id="dropzone-mulitple" action="." autocomplete="off" novalidate> <div class="fallback"> <input name="file" type="file" multiple /> </div> </form> <script>{`document.addEventListener("DOMContentLoaded", function () { new Dropzone("#dropzone-mulitple"); });`}</script>
|
||||
</Example>
|
||||
|
||||
## Custom Dropzone
|
||||
|
||||
You can further enhance the user experience by customizing the Dropzone interface. For instance, you can modify the drop area with custom messages or styles to make the file upload process more engaging and user-friendly. Below is an example of a custom Dropzone configuration:
|
||||
|
||||
<Example>
|
||||
<form class="dropzone" id="dropzone-custom" action="." autocomplete="off" novalidate> <div class="fallback"> <input name="file" type="file" /> </div> <div class="dz-message"> <h3 class="dropzone-msg-title">Your text here</h3> <span class="dropzone-msg-desc">Your custom description here</span> </div> </form> <script>{`document.addEventListener("DOMContentLoaded", function () { new Dropzone("#dropzone-custom"); });`}</script>
|
||||
</Example>
|
||||
|
||||
By customizing the drop area, you can align the file upload process with your application’s branding or specific requirements.
|
||||
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Empty State
|
||||
summary: An empty state or blank page is commonly used as a placeholder for first-use, empty data, or an error screen. Its goal is to engage users when there is no content to display, which makes its design important for the overall user experience of your website or app.
|
||||
description: Engage users in an empty or error screen.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Illustration from '@shared/components/ui/Illustration.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action.
|
||||
|
||||
<Example bg="surface-secondary">
|
||||
<div class="empty"> <div class="empty-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <line x1="9" y1="10" x2="9.01" y2="10" /> <line x1="15" y1="10" x2="15.01" y2="10" /> <path d="M9.5 15.25a3.5 3.5 0 0 1 5 0" /> </svg> </div> <p class="empty-title">No results found</p> <p class="empty-subtitle text-secondary"> Try adjusting your search or filter to find what you're looking for. </p> <div class="empty-action"> <a href="#" class="btn btn-primary"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="10" cy="10" r="7" /> <line x1="21" y1="21" x2="15" y2="15" /> </svg> Search again </a> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Empty state with illustration
|
||||
|
||||
Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalized design, you will improve your brand image and make your website or app more user friendly.
|
||||
|
||||
Do you need an illustration to enhance your web designs? We've got something for you! Check out our premium SVG [illustrations](https://tabler.io/illustrations).
|
||||
|
||||
<Example bg="surface-secondary">
|
||||
<div class="empty"> <div class="empty-img"> <Illustration image="boy-with-key" alt="Empty state illustration" /> </div> <p class="empty-title">Invoices are managed from here</p> <p class="empty-subtitle text-secondary"> Try adjusting your search or filter to find what you're looking for. </p> <div class="empty-action"> <a href="#" class="btn btn-primary"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <line x1="12" y1="5" x2="12" y2="19" /> <line x1="5" y1="12" x2="19" y2="12" /> </svg> New invoice </a> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Empty state with header
|
||||
|
||||
Instead of adding an icon or illustration you can simply give the text:
|
||||
|
||||
<Example bg="surface-secondary">
|
||||
<div class="empty"> <div class="empty-header">404</div> <p class="empty-title">Oops… You just found an error page</p> <p class="empty-subtitle text-secondary"> Try adjusting your search or filter to find what you're looking for. </p> <div class="empty-action"> <a href="#" class="btn btn-primary"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <line x1="5" y1="12" x2="19" y2="12" /> <line x1="5" y1="12" x2="11" y2="18" /> <line x1="5" y1="12" x2="11" y2="6" /> </svg> Take me home </a> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
title: Icon
|
||||
summary: Use an icon from over 5000 options created specifically for Tabler to make your dashboard more attractive. Each icon is available under the MIT license, so it can be used in both private and commercial projects.
|
||||
banner: icons
|
||||
description: Enhance a dashboard with a custom icon.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
|
||||
If you need to add icons to your website, you can use the [Tabler Icons library](https://tabler.io/icons). It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects.
|
||||
|
||||
## Base icon
|
||||
|
||||
To add an icon to your code copy the SVG code from the Tabler Icons website and paste it into your HTML file.
|
||||
|
||||
```html
|
||||
<Icon name="heart" />
|
||||
```
|
||||
|
||||
Results can be seen in the example below.
|
||||
|
||||
<Example>
|
||||
<Icon name="heart" /> <Icon name="ghost-2" /> <Icon name="lego" /> <Icon name="building-carousel" />
|
||||
</Example>
|
||||
|
||||
## Filled icons
|
||||
|
||||
To use filled icons, you need to copy the SVG code of the selected filled Icon from the [Tabler Icons website](https://tabler.io/icons) and paste it into your HTML file.
|
||||
|
||||
<Example>
|
||||
<Icon name="heart" type="filled" /> <Icon name="bell-ringing" type="filled" /> <Icon name="cherry" type="filled" /> <Icon name="circle-key" type="filled" />
|
||||
</Example>
|
||||
|
||||
## Icon colors
|
||||
|
||||
To change the color of the icon, you need to add the `text-*` class to the parent element of the icon. See the [full list of available colors](/ui/base/colors) for more details. Color classes can be used with any HTML element.
|
||||
|
||||
```html
|
||||
<span class="text-red">
|
||||
<!-- Icon code here -->
|
||||
</span>
|
||||
```
|
||||
|
||||
Look at the example below to see how the color of the icon changes.
|
||||
|
||||
<Example>
|
||||
<span class="text-red"> <Icon name="heart" type="filled" /> </span> <span class="text-yellow"> <Icon name="star" type="filled" /> </span> <span class="text-blue"> <Icon name="circle" /> </span> <span class="text-green"> <Icon name="square-rounded" /> </span>
|
||||
</Example>
|
||||
|
||||
## Icon animations
|
||||
|
||||
To add an animation to the icon, you need to add the `icon-pulse`, `icon-tada`, or `icon-rotate` class to the SVG element.
|
||||
|
||||
<Example>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-pulse" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tada" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /> <path d="M9 17v1a3 3 0 0 0 6 0v-1" /> </svg> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-rotate" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" /> </svg>
|
||||
</Example>
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Components
|
||||
order: 4
|
||||
description: Various components to enhance UI.
|
||||
summary: Tabler UI includes a variety of components to help you build web applications that are both functional and visually appealing. From buttons and cards to modals and navigation, these components provide a wide range of features to enhance your site.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
@@ -0,0 +1,50 @@
|
||||
---
|
||||
title: Inline player
|
||||
docs-libs: plyr
|
||||
summary: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers.
|
||||
description: Lightweight media player for websites.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Overview
|
||||
|
||||
The Inline Player is a versatile, modern media player designed for seamless integration into websites. It supports HTML5, YouTube, and Vimeo content, offering a lightweight and accessible solution for media playback. Built with customization and ease of use in mind, this player ensures compatibility with modern browsers and enhances user experience.
|
||||
|
||||
## Installation
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
## 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>
|
||||
</Example>
|
||||
|
||||
## Vimeo file
|
||||
|
||||
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>
|
||||
</Example>
|
||||
|
||||
## HTML5 video and audio
|
||||
|
||||
Check out the [Plyr documentation](https://github.com/sampotts/plyr) for more options and examples, including HTML5 video and audio support.
|
||||
|
||||
## Customization
|
||||
|
||||
The Inline Player uses the primary color as the default color scheme. You can customize the player by modifying the CSS variables in your stylesheet. For example, to change the main color, you can add the following CSS:
|
||||
|
||||
```scss
|
||||
--plyr-color-main: #ff0000; /* Change to your desired color */
|
||||
```
|
||||
|
||||
For more customization options, refer to the [Customizing the CSS](https://github.com/sampotts/plyr?tab=readme-ov-file#customizing-the-css) section in the Plyr documentation.
|
||||
@@ -0,0 +1,52 @@
|
||||
---
|
||||
title: Modal
|
||||
summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
|
||||
description: Dialogs for notifications and content.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
|
||||
Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
|
||||
|
||||
## Default markup
|
||||
|
||||
To create a modal, you need to add a `.modal` element to the document. Inside the `.modal`, you need to add a `.modal-dialog` element, which contains a `.modal-content` element. The `.modal-content` element contains the modal’s header, body, and footer.
|
||||
|
||||
```html
|
||||
<div class="modal" tabindex="-1">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">...</div>
|
||||
<div class="modal-body">...</div>
|
||||
<div class="modal-footer">...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Look at the example below to see how the modal looks.
|
||||
|
||||
<Example centered bg="surface-secondary">
|
||||
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Launch demo modal </button> <div class="modal" id="exampleModal" tabindex="-1"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde. </div> <div class="modal-footer"> <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Prompt and alert
|
||||
|
||||
You can use the modal to create a prompt or alert. Look at the example below to see how the prompt and alert look.
|
||||
|
||||
<Example raw bg="surface-secondary">
|
||||
<div class="modal" id="exampleModal" tabindex="-1"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <div class="modal-status bg-danger"></div> <div class="modal-body text-center py-4"> <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M12 9v2m0 4v.01" /> <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75" /> </svg> <h3>Are you sure?</h3> <div class="text-secondary"> Do you really want to remove 84 files? What you've done cannot be undone. </div> </div> <div class="modal-footer"> <div class="w-100"> <div class="row"> <div class="col"> <a href="#" class="btn w-100" data-bs-dismiss="modal"> Cancel </a> </div> <div class="col"> <a href="#" class="btn btn-danger w-100" data-bs-dismiss="modal"> Delete 84 items </a> </div> </div> </div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
<Example raw bg="surface-secondary">
|
||||
<div class="modal" id="exampleModal" tabindex="-1"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <div class="modal-status bg-success"></div> <div class="modal-body text-center py-4"> <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-green icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> <path d="M9 12l2 2l4 -4" /> </svg> <h3>Payment succeeded</h3> <div class="text-secondary"> Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io. </div> </div> <div class="modal-footer"> <div class="w-100"> <div class="row"> <div class="col"> <a href="#" class="btn w-100" data-bs-dismiss="modal"> Go to dashboard </a> </div> <div class="col"> <a href="#" class="btn btn-success w-100" data-bs-dismiss="modal"> View invoice </a> </div> </div> </div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Modal with form
|
||||
|
||||
You can use the modal to create a form. Look at the example below to see how the form looks.
|
||||
|
||||
<Example raw bg="surface-secondary" class="px-5">
|
||||
<div class="modal" id="exampleModal" tabindex="-1"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">New report</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <div class="mb-3"> <label class="form-label">Name</label> <input type="text" class="form-control" name="example-text-input" placeholder="Your report name" /> </div> <label class="form-label">Report type</label> <div class="form-selectgroup-boxes row mb-3"> <div class="col-md-6"> <label class="form-selectgroup-item"> <input type="radio" name="report-type" value="1" class="form-selectgroup-input" checked /> <span class="form-selectgroup-label d-flex align-items-center p-3"> <span class="me-3"> <span class="form-selectgroup-check"></span> </span> <span class="form-selectgroup-label-content"> <span class="form-selectgroup-title strong mb-1">Simple</span> <span class="d-block text-secondary" >Provide only basic data needed for the report</span > </span> </span> </label> </div> <div class="col-md-6"> <label class="form-selectgroup-item"> <input type="radio" name="report-type" value="1" class="form-selectgroup-input" /> <span class="form-selectgroup-label d-flex align-items-center p-3"> <span class="me-3"> <span class="form-selectgroup-check"></span> </span> <span class="form-selectgroup-label-content"> <span class="form-selectgroup-title strong mb-1">Advanced</span> <span class="d-block text-secondary" >Insert charts and additional advanced analyses to be inserted in the report</span > </span> </span> </label> </div> </div> <div class="row"> <div class="col-lg-8"> <div class="mb-3"> <label class="form-label">Report url</label> <div class="input-group input-group-flat"> <span class="input-group-text"> https://tabler.io/reports/ </span> <input type="text" class="form-control ps-0" value="report-01" autocomplete="off" /> </div> </div> </div> <div class="col-lg-4"> <div class="mb-3"> <label class="form-label">Visibility</label> <select class="form-select"> <option value="1" selected>Private</option> <option value="2">Public</option> <option value="3">Hidden</option> </select> </div> </div> </div> </div> <div class="modal-body"> <div class="row"> <div class="col-lg-6"> <div class="mb-3"> <label class="form-label">Client name</label> <input type="text" class="form-control" /> </div> </div> <div class="col-lg-6"> <div class="mb-3"> <label class="form-label">Reporting period</label> <input type="date" class="form-control" /> </div> </div> <div class="col-lg-12"> <div> <label class="form-label">Additional information</label> <textarea class="form-control" rows="3"></textarea> </div> </div> </div> </div> <div class="modal-footer"> <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal"> Cancel </a> <a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal"> <Icon name="plus" /> Create new report </a> </div> </div> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,29 @@
|
||||
---
|
||||
title: Offcanvas
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript.
|
||||
|
||||
## Basic usage
|
||||
|
||||
To create an offcanvas, add the `.offcanvas` class to a container element. You can also add the `.offcanvas-start`, `.offcanvas-end`, `.offcanvas-top`, or `.offcanvas-bottom` class to specify the position of the offcanvas. The `.show` class is used to display the offcanvas.
|
||||
|
||||
<Example raw>
|
||||
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel" data-bs-scroll="true" > <div class="offcanvas-body"> Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here. </div> </div>
|
||||
</Example>
|
||||
|
||||
## Cookies banner
|
||||
|
||||
The offcanvas component is used to display a cookies banner. It is a great way to inform users about the use of cookies on your website and to get their consent.
|
||||
|
||||
<Example raw>
|
||||
<div class="offcanvas offcanvas-bottom h-auto" tabindex="-1" id="offcanvasBottom" aria-modal="true" role="dialog" data-bs-scroll="true" > <div class="offcanvas-body"> <div class="container"> <div class="row align-items-center"> <div class="col"> <strong>Do you like cookies?</strong> 🍪 We use cookies to ensure you get the best experience on our website. <a href="./terms-of-service.html" target="_blank">Learn more</a> </div> <div class="col-auto"> <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas"> Essential Cookies Only </button> </div> <div class="col-auto"> <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas"> Allow All Cookies </button> </div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
<script>{`document.addEventListener('DOMContentLoaded', function() {
|
||||
document.querySelectorAll('[data-bs-scroll="true"]').forEach(el => {
|
||||
new bootstrap.Offcanvas(el, { scroll: true }).show();
|
||||
});
|
||||
});`}</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
title: Pagination
|
||||
summary: Pagination is a user interface element that allows users to navigate through a set of data or content that is divided into multiple pages. It is commonly used in web applications, blogs, and e-commerce sites to display large amounts of information in a manageable way.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Pagination from '@shared/components/ui/Pagination.astro';
|
||||
|
||||
## Basic Example
|
||||
|
||||
Use slightly customized pagination with previous and next icon links:
|
||||
|
||||
<Example centered vertical>
|
||||
<Pagination />
|
||||
</Example>
|
||||
|
||||
## With First and Last links
|
||||
|
||||
When you have a lot of pages, you can use first and last links to quickly navigate to the beginning or end of the pagination.
|
||||
|
||||
<Example centered vertical>
|
||||
<Pagination firstLast />
|
||||
</Example>
|
||||
|
||||
## Offset
|
||||
|
||||
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} />
|
||||
</Example>
|
||||
|
||||
## Button With Text
|
||||
|
||||
When you want to use pagination with text, you can use text buttons. This will give you a more traditional look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
|
||||
|
||||
<Example centered vertical>
|
||||
<Pagination text />
|
||||
</Example>
|
||||
|
||||
## Outline version
|
||||
|
||||
If you want to use an outline version of the pagination, you can use the `.pagination-outline` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
|
||||
|
||||
<Example centered vertical>
|
||||
<Pagination class="pagination-outline" />
|
||||
</Example>
|
||||
|
||||
## Circle version
|
||||
|
||||
If you want to use a circle version of the pagination, you can use the `.pagination-circle` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation. This can also be combined with the `.pagination-outline` class for a more prominent look.
|
||||
|
||||
<Example centered vertical separated>
|
||||
<Pagination class="pagination-circle" /> <Pagination class="pagination-circle pagination-outline" />
|
||||
</Example>
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
title: Placeholder
|
||||
summary: Placeholder is used to reserve space for content that will soon appear in a layout.
|
||||
description: Reserve space for upcoming content.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Placeholder line
|
||||
|
||||
Placeholder lines can contain lines of text. Their length is different and depends on the `col-` class.
|
||||
|
||||
<Example column>
|
||||
<div class="placeholder col-9"></div> <div class="placeholder col-11"></div> <div class="placeholder col-10"></div> <div class="placeholder col-8"></div>
|
||||
</Example>
|
||||
|
||||
However, it may be useful to specify the full width in order to fit the content more effectively.
|
||||
|
||||
<Example column>
|
||||
<div class="placeholder col-12"></div> <div class="placeholder col-12"></div> <div class="placeholder col-12"></div> <div class="placeholder col-12"></div>
|
||||
</Example>
|
||||
|
||||
You can also move the lines to the right or center them:
|
||||
|
||||
<Example column>
|
||||
<div class="text-end"> <div class="placeholder col-11"></div> <div class="placeholder col-10"></div> <div class="placeholder col-8"></div> </div> <div class="text-center mt-3"> <div class="placeholder col-11"></div> <div class="placeholder col-10"></div> <div class="placeholder col-8"></div> </div>
|
||||
</Example>
|
||||
|
||||
## Placeholder heading
|
||||
|
||||
A placeholder can also contain an element that looks like a header:
|
||||
|
||||
<Example column>
|
||||
<div class="placeholder col-9 mb-3"></div> <div class="placeholder placeholder-xs col-10"></div> <div class="placeholder placeholder-xs col-11"></div>
|
||||
</Example>
|
||||
|
||||
## Placeholder avatar
|
||||
|
||||
You can use a placeholder that will look like an avatar. You can use the `avatar` component, and get the image in the right proportions.
|
||||
|
||||
<Example column>
|
||||
<div class="row"> <div class="col-auto"> <div class="avatar placeholder"></div> </div> <div class="col"> <div class="placeholder col-9"></div> <div class="placeholder col-11"></div> </div> </div>
|
||||
</Example>
|
||||
|
||||
You can also use the `avatar` component with different sizes. Look at the example below to see how the avatar placeholder looks.
|
||||
|
||||
<Example centered>
|
||||
<div class="avatar avatar-xl placeholder"></div> <div class="avatar avatar-lg placeholder"></div> <div class="avatar placeholder"></div> <div class="avatar avatar-sm placeholder"></div> <div class="avatar avatar-xs placeholder"></div>
|
||||
</Example>
|
||||
|
||||
## Placeholder image
|
||||
|
||||
You can use a placeholder that will look like a picture. You can use the `ratio` component, and get the image in the right proportions.
|
||||
|
||||
<Example column centered vertical>
|
||||
<div class="ratio ratio-1x1 placeholder"> <div class="placeholder-image"></div> </div> <div class="ratio ratio-4x3 placeholder"> <div class="placeholder-image"></div> </div> <div class="ratio ratio-16x9 placeholder"> <div class="placeholder-image"></div> </div> <div class="ratio ratio-21x9 placeholder"> <div class="placeholder-image"></div> </div>
|
||||
</Example>
|
||||
|
||||
## Placeholder color
|
||||
|
||||
By default, the placeholder uses `currentColor`. This can be overridden with a custom color or utility class. Full color classes are available for background colors.
|
||||
|
||||
<Example column>
|
||||
<span class="placeholder col-12"></span> <span class="placeholder col-12 bg-primary"></span> <span class="placeholder col-12 bg-secondary"></span> <span class="placeholder col-12 bg-success"></span> <span class="placeholder col-12 bg-danger"></span> <span class="placeholder col-12 bg-warning"></span> <span class="placeholder col-12 bg-info"></span> <span class="placeholder col-12 bg-light"></span> <span class="placeholder col-12 bg-dark"></span>
|
||||
</Example>
|
||||
|
||||
## Placeholder sizing
|
||||
|
||||
The sizes of placeholders are based on the typographic style of the parent element. Customize them with sizing modifiers: `.placeholder-lg`, `.placeholder-sm`, or `.placeholder-xs`.
|
||||
|
||||
<Example column>
|
||||
<span class="placeholder col-12 placeholder-lg"></span> <span class="placeholder col-12"></span> <span class="placeholder col-12 placeholder-sm"></span> <span class="placeholder col-12 placeholder-xs"></span>
|
||||
</Example>
|
||||
|
||||
## Animation
|
||||
|
||||
Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better convey the perception of something being actively loaded.
|
||||
|
||||
<Example column>
|
||||
<p class="placeholder-glow"> <span class="placeholder col-12"></span> </p> <p class="placeholder-wave"> <span class="placeholder col-12"></span> </p>
|
||||
</Example>
|
||||
|
||||
## Live examples
|
||||
|
||||
See in the following examples how else you can use the placeholder component
|
||||
|
||||
<Example column centered vertical>
|
||||
<div class="card placeholder-glow"> <div class="ratio ratio-21x9 card-img-top placeholder"></div> <div class="card-body"> <div class="placeholder col-9 mb-3"></div> <div class="placeholder placeholder-xs col-10"></div> <div class="placeholder placeholder-xs col-11"></div> <div class="mt-3"> <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-4" aria-hidden="true" ></a> </div> </div> </div> <div class="card"> <div class="row g-0 align-items-center placeholder-glow"> <div class="col-3"> <div class="ratio ratio-1x1 card-img-start placeholder"></div> </div> <div class="col"> <div class="card-body"> <div class="placeholder col-9 mb-3"></div> <div class="placeholder placeholder-xs col-10"></div> <div class="placeholder placeholder-xs col-11"></div> </div> </div> </div> </div> <div class="card"> <div class="card-body"> <div class="row"> <div class="col-auto"> <div class="avatar avatar-rounded placeholder"></div> </div> <div class="col"> <div class="placeholder placeholder-xs col-9"></div> <div class="placeholder placeholder-xs col-7"></div> </div> </div> </div> </div> <div class="card"> <div class="card-body py-5 text-center"> <div> <div class="avatar avatar-rounded avatar-lg placeholder mb-3"></div> </div> <div class="mt w-75 mx-auto"> <div class="placeholder col-9 mb-3"></div> <div class="placeholder placeholder-xs col-10"></div> </div> </div> </div> <div class="card"> <ul class="list-group list-group-flush placeholder-glow"> <li class="list-group-item"> <div class="row align-items-center"> <div class="col-auto"> <div class="avatar avatar-rounded placeholder"></div> </div> <div class="col-7"> <div class="placeholder placeholder-xs col-9"></div> <div class="placeholder placeholder-xs col-7"></div> </div> <div class="col-2 ms-auto text-end"> <div class="placeholder placeholder-xs col-8"></div> <div class="placeholder placeholder-xs col-10"></div> </div> </div> </li> <li class="list-group-item"> <div class="row align-items-center"> <div class="col-auto"> <div class="avatar avatar-rounded placeholder"></div> </div> <div class="col-7"> <div class="placeholder placeholder-xs col-9"></div> <div class="placeholder placeholder-xs col-7"></div> </div> <div class="col-2 ms-auto text-end"> <div class="placeholder placeholder-xs col-8"></div> <div class="placeholder placeholder-xs col-10"></div> </div> </div> </li> <li class="list-group-item"> <div class="row align-items-center"> <div class="col-auto"> <div class="avatar avatar-rounded placeholder"></div> </div> <div class="col-7"> <div class="placeholder placeholder-xs col-9"></div> <div class="placeholder placeholder-xs col-7"></div> </div> <div class="col-2 ms-auto text-end"> <div class="placeholder placeholder-xs col-8"></div> <div class="placeholder placeholder-xs col-10"></div> </div> </div> </li> <li class="list-group-item"> <div class="row align-items-center"> <div class="col-auto"> <div class="avatar avatar-rounded placeholder"></div> </div> <div class="col-7"> <div class="placeholder placeholder-xs col-9"></div> <div class="placeholder placeholder-xs col-7"></div> </div> <div class="col-2 ms-auto text-end"> <div class="placeholder placeholder-xs col-8"></div> <div class="placeholder placeholder-xs col-10"></div> </div> </div> </li> </ul> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Popover
|
||||
summary: A popover is used to provide additional information for elements where a simple tooltip is not sufficient.
|
||||
bootstrapLink: components/popovers
|
||||
description: Provide extra information with a popover.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
To create a default popover use:
|
||||
|
||||
<Example centered bg="surface-secondary">
|
||||
<button type="button" class="btn" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" > Click to toggle popover </button>
|
||||
</Example>
|
||||
|
||||
## Four directions
|
||||
|
||||
Four options are available: `top`, `right`, `bottom`, and `left` aligned. Directions are mirrored when using Bootstrap in RTL.
|
||||
|
||||
<Example centered bg="surface-secondary">
|
||||
<button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover" > Popover on top </button> <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover" > Popover on right </button> <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover" > Popover on bottom </button> <button type="button" class="btn" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover" > Popover on left </button>
|
||||
</Example>
|
||||
|
||||
## Popover on hover
|
||||
|
||||
Popover can be triggered in one or more of the following styles: `manual`, with a `click`, on `focus`, and on `hover`. This one reacts on hover. See more details on the Popover component page of [Bootstrap's documentation](https://getbootstrap.com/docs)
|
||||
|
||||
<Example centered bg="surface-secondary">
|
||||
<button type="button" class="btn btn-primary" data-bs-trigger="hover" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?" > Hover to toggle popover </button>
|
||||
</Example>
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: Progress Steps
|
||||
summary: A progress step helps users track their place in a short process by breaking it into clear, simple steps. This makes flows like setup or onboarding easier to follow and finish.
|
||||
new: true
|
||||
description: Use progress steps to display compact onboarding, checkout, and setup progress.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import ProgressSteps from '@shared/components/ui/ProgressSteps.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
Use `.progress-steps` as the container and `.progress-steps-item` for each segment. These two classes are enough to create the base component structure.
|
||||
|
||||
```html
|
||||
<ol class="progress-steps" aria-label="Onboarding progress">
|
||||
<li class="progress-steps-item"></li>
|
||||
<li class="progress-steps-item"></li>
|
||||
<li class="progress-steps-item"></li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
The example below shows the default progress step structure.
|
||||
|
||||
<Example>
|
||||
<ol class="progress-steps" aria-label="Onboarding progress"> <li class="progress-steps-item"></li> <li class="progress-steps-item"></li> <li class="progress-steps-item"></li> <li class="progress-steps-item"></li> </ol>
|
||||
</Example>
|
||||
|
||||
## Variants
|
||||
|
||||
### Current and completed step
|
||||
|
||||
Use color classes to mark completed steps. Set `aria-current="step"` on the current item.
|
||||
|
||||
<Example>
|
||||
<ProgressSteps count={4} active={2} ariaLabel="Setup progress" />
|
||||
</Example>
|
||||
|
||||
### Custom labels
|
||||
|
||||
Use hidden labels so assistive technologies can announce meaningful step names.
|
||||
|
||||
<Example>
|
||||
<ProgressSteps labels="Account,Profile,Billing,Review" active={3} ariaLabel="Checkout progress" />
|
||||
</Example>
|
||||
|
||||
### Color state
|
||||
|
||||
Use contextual background classes on completed and current items. This helps match state color to your flow semantics.
|
||||
|
||||
<Example>
|
||||
<div class="mb-2"> <ol class="progress-steps" aria-label="Green progress"> <li class="progress-steps-item bg-green" aria-current="step"> <span class="visually-hidden">Step 1</span> </li> <li class="progress-steps-item"> <span class="visually-hidden">Step 2</span> </li> </ol> </div> <div class="mb-2"> <ol class="progress-steps" aria-label="Orange progress"> <li class="progress-steps-item bg-orange" aria-current="step"> <span class="visually-hidden">Step 1</span> </li> <li class="progress-steps-item"> <span class="visually-hidden">Step 2</span> </li> </ol> </div> <div> <ol class="progress-steps" aria-label="Red progress"> <li class="progress-steps-item bg-red" aria-current="step"> <span class="visually-hidden">Step 1</span> </li> <li class="progress-steps-item"> <span class="visually-hidden">Step 2</span> </li> </ol> </div>
|
||||
</Example>
|
||||
|
||||
### Width and layout utilities
|
||||
|
||||
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" />
|
||||
</Example>
|
||||
@@ -0,0 +1,124 @@
|
||||
---
|
||||
title: Progress Bar
|
||||
summary: A progress bar is used to provide feedback on an action status and inform users about current progress. Although it is a small interface element, it is extremely helpful in managing user expectations and preventing abandonment of an initiated process.
|
||||
bootstrapLink: components/progress
|
||||
description: Track and display progress with a progress bar.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import ProgressBg from '@shared/components/ui/ProgressBg.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
To create a default progress bar, add a `.progress` class to a `<div>` element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete.
|
||||
|
||||
<Example>
|
||||
<div class="progress"> <div class="progress-bar" style="width: 38%"></div> </div>
|
||||
</Example>
|
||||
|
||||
## Progress size
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed.
|
||||
|
||||
```html
|
||||
<div class="progress progress-sm">...</div>
|
||||
```
|
||||
|
||||
Look at the example below to see how it works:
|
||||
|
||||
<Example columnFullWidth>
|
||||
<div class="progress progress-sm"> <div class="progress-bar" style="width: 57%" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" aria-label="57% Complete" > <span class="visually-hidden">57% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="45% Complete"> <span class="visually-hidden">45% Complete</span> </div> </div> <div class="progress progress-lg"> <div class="progress-bar" style="width: 63%" role="progressbar" aria-valuenow="63" aria-valuemin="0" aria-valuemax="100" aria-label="63% Complete"> <span class="visually-hidden">63% Complete</span> </div> </div> <div class="progress progress-xl"> <div class="progress-bar" style="width: 82%" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" aria-label="82% Complete"> <span class="visually-hidden">82% Complete</span> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Progress with value
|
||||
|
||||
If you want to display the numeric value inside the bar, place the percentage text directly in the `.progress-bar`.
|
||||
|
||||
<Example columnFullWidth>
|
||||
<div class="progress progress-lg"> <div class="progress-bar" style="width: 10%" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" aria-label="10% Complete"> 10% </div> </div> <div class="progress progress-lg"> <div class="progress-bar" style="width: 35%" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" aria-label="35% Complete"> 35% </div> </div> <div class="progress progress-lg"> <div class="progress-bar" style="width: 90%" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" aria-label="90% Complete"> 90% </div> </div>
|
||||
</Example>
|
||||
|
||||
## Indeterminate progress
|
||||
|
||||
You can create a progress bar which shows indeterminate progress by adding `.progress-bar-indeterminate` to the `.progress-bar` element.
|
||||
|
||||
<Example>
|
||||
<div class="progress progress-sm"> <div class="progress-bar progress-bar-indeterminate"></div> </div>
|
||||
</Example>
|
||||
|
||||
## Native progress element
|
||||
|
||||
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" />
|
||||
</Example>
|
||||
|
||||
## Progress color
|
||||
|
||||
You can change the color of the progress bar by adding a color class to the `.progress-bar` element. You can use the color classes like `.bg-primary`, `.bg-success`, etc. to change the color of the progress bar.
|
||||
|
||||
See the [full list of available colors](/ui/base/colors) for more details.
|
||||
|
||||
<Example columnFullWidth>
|
||||
<div class="progress"> <div class="progress-bar bg-red" style="width: 24%" role="progressbar" aria-valuenow="24" aria-valuemin="0" aria-valuemax="100" aria-label="24% Complete" > <span class="visually-hidden">24% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar bg-green" style="width: 45%" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="45% Complete" > <span class="visually-hidden">45% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar bg-purple" style="width: 64%" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="64% Complete" > <span class="visually-hidden">64% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar bg-blue" style="width: 38%" role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" aria-label="38% Complete" > <span class="visually-hidden">38% Complete</span> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Multiple progress bars
|
||||
|
||||
You can stack multiple progress bars on top of each other to create a visually appealing design. This can be done by adding multiple `.progress` elements inside a `.progress-stacked` container.
|
||||
|
||||
```html
|
||||
<div class="progress-stacked">
|
||||
<div class="progress">...</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
This is how it looks:
|
||||
|
||||
<Example vertical column>
|
||||
<div class="progress-stacked"> <div class="progress" style="width: 15%"> <div class="progress-bar"></div> </div> <div class="progress" style="width: 30%"> <div class="progress-bar bg-success"></div> </div> <div class="progress" style="width: 20%"> <div class="progress-bar bg-info"></div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Striped progress
|
||||
|
||||
You can create a striped progress bar by adding the `.progress-bar-striped` class to the `.progress-bar` element.
|
||||
|
||||
<Example>
|
||||
<div class="progress"> <div class="progress-bar progress-bar-striped" style="width: 60%"></div> </div>
|
||||
</Example>
|
||||
|
||||
## Animated progress
|
||||
|
||||
To animate stripes, add the `.progress-bar-animated` class to a striped progress bar.
|
||||
|
||||
<Example columnFullWidth>
|
||||
<div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div> </div>
|
||||
</Example>
|
||||
|
||||
## Separated progress
|
||||
|
||||
Use `.progress-separated` to make stacked segments easier to read when values are close to each other.
|
||||
|
||||
<Example vertical column>
|
||||
<div class="progress-stacked"> <div class="progress progress-separated" style="width: 10%"> <div class="progress-bar bg-blue"></div> </div> <div class="progress progress-separated" style="width: 20%"> <div class="progress-bar bg-red"></div> </div> <div class="progress progress-separated" style="width: 30%"> <div class="progress-bar bg-green"></div> </div> <div class="progress progress-separated" style="width: 40%"> <div class="progress-bar bg-yellow"></div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Progress background
|
||||
|
||||
By using a progress bar component as a background element, designers can create a dynamic and engaging visual experience for users. For example, the progress bar could be used to represent the completion of a long-term goal or project, such as a fundraising campaign or construction project. As users interact with the
|
||||
page, the progress bar could gradually fill up, creating a sense of momentum and progress.
|
||||
|
||||
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 />
|
||||
</Example>
|
||||
|
||||
## Progress background colors
|
||||
|
||||
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 />
|
||||
</Example>
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: Range slider
|
||||
docs-libs: nouislider
|
||||
description: Adjust values with a range slider.
|
||||
summary: A range slider allows users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
To be able to use the range slider in your application you will need to install the noUiSlider dependency with `npm install nouislider`.
|
||||
|
||||
## Basic range slider
|
||||
|
||||
<Example>
|
||||
<div id="range-simple"></div> <script>{`document.addEventListener("DOMContentLoaded", function () { window.noUiSlider && noUiSlider.create(document.getElementById("range-simple"), { start: 20, connect: [true, false], step: 10, range: { min: 0, max: 100, }, }); });`}</script>
|
||||
</Example>
|
||||
|
||||
For more details on customizing a noUiSlider element, see the documentation on the [noUiSlider website](https://refreshless.com/nouislider/).
|
||||
@@ -0,0 +1,55 @@
|
||||
---
|
||||
title: Ribbon
|
||||
summary: A ribbon is a graphical element that attracts user attention to a given interface element and makes it stand out.
|
||||
description: Highlight an element with a graphical ribbon.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the `ribbon` class to add the default ribbon to any section of your interface.
|
||||
|
||||
<Example card column>
|
||||
<div class="card"> <div class="card-body" style="height: 5rem"></div> <div class="ribbon"> <Icon name="star" /> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Ribbon position
|
||||
|
||||
You can change the position of a ribbon by adding one of the following classes to the element:
|
||||
|
||||
- `ribbon-top` - moves it to the top
|
||||
- `ribbon-end` - moves it to the right
|
||||
- `ribbon-bottom` - moves it to the bottom
|
||||
- `ribbon-start` - moves it to the left
|
||||
|
||||
Using multiple classes at once will give you more position options. For example, the following class: `.ribbon.ribbon-top.ribbon-left` will move the ribbon to the top left corner.
|
||||
|
||||
<Example column>
|
||||
<div class="card"> <div class="card-body" style="height: 5rem"></div> <div class="ribbon ribbon-top ribbon-start"> <Icon name="star" /> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Ribbon color
|
||||
|
||||
Customize the ribbon's background color. See the [full list of available colors](/ui/base/colors) for more details.
|
||||
|
||||
<Example column>
|
||||
<div class="card"> <div class="card-body" style="height: 5rem"></div> <div class="ribbon bg-red"> <Icon name="star" /> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Ribbon text
|
||||
|
||||
Add your own text to a ribbon to display any additional information and make it easy to spot for users.
|
||||
|
||||
<Example column>
|
||||
<div class="card"> <div class="card-body" style="height: 5rem"></div> <div class="ribbon bg-green">NEW</div> </div>
|
||||
</Example>
|
||||
|
||||
## Bookmark ribbon
|
||||
|
||||
Use the `.ribbon-bookmark` class to create a bookmark ribbon. It is a special style of ribbon that is used to highlight important elements in your interface.
|
||||
|
||||
<Example column>
|
||||
<div class="card w-100"> <div class="card-body" style="height: 5rem"></div> <div class="ribbon ribbon-bookmark bg-orange"> <Icon name="star" /> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
title: Segmented Control
|
||||
summary: A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
|
||||
To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links.
|
||||
|
||||
<Example centered>
|
||||
<nav class="nav nav-segmented" role="tablist"> <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page" > First </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Second </button> <button class="nav-link" disabled role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1" > Disabled </button> </nav>
|
||||
</Example>
|
||||
|
||||
## Full width
|
||||
|
||||
To make the segmented control full width, add the `w-100` class to the `nav` element. It will take up the full width of its parent container.
|
||||
|
||||
```html
|
||||
<nav class="nav nav-segmented w-100" role="tablist">...</nav>
|
||||
```
|
||||
|
||||
The results can be seen in the example below.
|
||||
|
||||
<Example>
|
||||
<nav class="nav nav-segmented w-100" role="tablist"> <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page" > Daily </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Weekly </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Monthly </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Quarterly </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Yearly </button> </nav>
|
||||
</Example>
|
||||
|
||||
## With emojis
|
||||
|
||||
You can also use emojis in the segmented control. To do this, add the emoji inside the `button` element.
|
||||
|
||||
<Example centered>
|
||||
<nav class="nav nav-segmented nav-1" role="tablist"> <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page" > 👦 </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> 👦🏿 </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> 👦🏾 </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> 👦🏽 </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> 👦🏼 </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> 👦🏻 </button> </nav>
|
||||
</Example>
|
||||
|
||||
## With icons
|
||||
|
||||
You can also use icons in the segmented control. To do this, add the icon inside the `button` element.
|
||||
|
||||
|
||||
<Example centered>
|
||||
<nav class="nav nav-segmented" 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>
|
||||
|
||||
## Vertical direction
|
||||
|
||||
To create a vertical segmented control, add the `nav-segmented-vertical` class to the `nav` element.
|
||||
|
||||
```html
|
||||
<nav class="nav nav-segmented-vertical" role="tablist">...</nav>
|
||||
```
|
||||
|
||||
The results can be seen in the example below.
|
||||
|
||||
<Example centered>
|
||||
<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
|
||||
|
||||
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.
|
||||
|
||||
```html
|
||||
<nav class="nav nav-segmented nav-sm" role="tablist">...</nav>
|
||||
```
|
||||
|
||||
The results can be seen in the examples below.
|
||||
|
||||
<Example centered vertical>
|
||||
<nav class="nav nav-segmented nav-sm" role="tablist"> <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page" > List </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Kanban </button> <button class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false" aria-disabled="true" tabindex="-1" > Calendar </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Files </button> </nav> <nav class="nav nav-segmented nav-lg" role="tablist"> <button class="nav-link active" role="tab" data-bs-toggle="tab" aria-selected="true" aria-current="page" > List </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Kanban </button> <button class="nav-link disabled" role="tab" data-bs-toggle="tab" aria-selected="false" aria-disabled="true" tabindex="-1" > Calendar </button> <button class="nav-link" role="tab" data-bs-toggle="tab" aria-selected="false" tabindex="-1"> Files </button> </nav>
|
||||
</Example>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
title: Spinner
|
||||
summary: A spinner is used to show the loading state of a component or page. It provides feedback for an action that takes longer to complete.
|
||||
bootstrapLink: components/spinners/
|
||||
description: Indicate loading state with a spinner.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion.
|
||||
|
||||
<Example centered>
|
||||
<div class="spinner-border"></div>
|
||||
</Example>
|
||||
|
||||
|
||||
## Colors
|
||||
|
||||
Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/ui/base/colors) section.
|
||||
|
||||
<Example centered>
|
||||
<div class="spinner-border text-blue" role="status"></div> <div class="spinner-border text-azure" role="status"></div> <div class="spinner-border text-indigo" role="status"></div> <div class="spinner-border text-purple" role="status"></div> <div class="spinner-border text-pink" role="status"></div> <div class="spinner-border text-red" role="status"></div> <div class="spinner-border text-orange" role="status"></div> <div class="spinner-border text-yellow" role="status"></div> <div class="spinner-border text-lime" role="status"></div> <div class="spinner-border text-green" role="status"></div> <div class="spinner-border text-teal" role="status"></div> <div class="spinner-border text-cyan" role="status"></div>
|
||||
</Example>
|
||||
|
||||
## Size
|
||||
|
||||
Choose the size of your spinner. You can use the default size or use the `spinner-border-sm` class to display a smaller spinner.
|
||||
|
||||
<Example centered>
|
||||
<div class="spinner-border" role="status"></div> <div class="spinner-border spinner-border-sm" role="status"></div>
|
||||
</Example>
|
||||
|
||||
## Growing spinner
|
||||
|
||||
Use the growing spinner, if you are looking for a more original design than a border spinner. The spinner grows to show the loading state.
|
||||
|
||||
<Example centered>
|
||||
<div class="spinner-grow" role="status"></div>
|
||||
</Example>
|
||||
|
||||
Growing spinners also come in a variety of colors to choose from.
|
||||
|
||||
<Example centered>
|
||||
<div class="spinner-grow text-blue" role="status"></div> <div class="spinner-grow text-azure" role="status"></div> <div class="spinner-grow text-indigo" role="status"></div> <div class="spinner-grow text-purple" role="status"></div> <div class="spinner-grow text-pink" role="status"></div> <div class="spinner-grow text-red" role="status"></div> <div class="spinner-grow text-orange" role="status"></div> <div class="spinner-grow text-yellow" role="status"></div> <div class="spinner-grow text-lime" role="status"></div> <div class="spinner-grow text-green" role="status"></div> <div class="spinner-grow text-teal" role="status"></div> <div class="spinner-grow text-cyan" role="status"></div>
|
||||
</Example>
|
||||
|
||||
## Button with spinner
|
||||
|
||||
Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
|
||||
|
||||
<Example centered>
|
||||
<a href="#" class="btn btn-primary"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a> <a href="#" class="btn btn-danger"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a> <a href="#" class="btn btn-warning"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a> <a href="#" class="btn btn-success"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a> <a href="#" class="btn"> <span class="spinner-border spinner-border-sm me-2" role="status"></span> Button </a>
|
||||
</Example>
|
||||
|
||||
## Animated dots
|
||||
|
||||
Use animated dots to show the loading state of a component. They provide feedback for an action a user has taken, when it takes a bit longer to complete. To do it you need to use the `.animated-dots` class on a `span` element.
|
||||
|
||||
<Example centered>
|
||||
<h1>Loading<span class="animated-dots"></span></h1>
|
||||
</Example>
|
||||
|
||||
Use buttons with animated dots to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up.
|
||||
|
||||
<Example centered>
|
||||
<a href="#" class="btn btn-primary"> Loading<span class="animated-dots"></span> </a> <a href="#" class="btn btn-primary disabled"> Loading<span class="animated-dots"></span> </a>
|
||||
</Example>
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
title: Star Rating
|
||||
summary: Use star rating to show score values with static stars or interactive star states.
|
||||
description: Build star rating UI with stars classes and data-star-rating state selectors.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
|
||||
## Overview
|
||||
|
||||
Use `.stars` as the container and `.star` for each icon.
|
||||
This creates an inline star row with spacing and base color.
|
||||
|
||||
<Example centered>
|
||||
<div class="stars"> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star"><Icon name="star" type="filled" /></span> </div>
|
||||
</Example>
|
||||
|
||||
## Variants
|
||||
|
||||
### Static value rows
|
||||
|
||||
Use `.stars` for read-only values in lists and cards.
|
||||
Color only the active stars and keep the rest in default color.
|
||||
|
||||
<Example>
|
||||
<div class="space-y"> <div class="d-flex justify-content-between align-items-center"> <span>Product quality</span> <div class="stars"> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> </div> </div> <div class="d-flex justify-content-between align-items-center"> <span>Delivery speed</span> <div class="stars"> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star"><Icon name="star" type="filled" /></span> <span class="star"><Icon name="star" type="filled" /></span> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
### Data-star-rating states
|
||||
|
||||
The vendor styles also target `[data-star-rating]`.
|
||||
Use `.gl-active` and `.gl-star-full` to control active and inactive star color.
|
||||
|
||||
<Example centered>
|
||||
<div data-star-rating class="d-flex gap-1" style="--tblr-icon-size: 1.25rem;"> <span class="gl-active"><Icon name="star" type="filled" class="gl-star-full" /></span> <span class="gl-active"><Icon name="star" type="filled" class="gl-star-full" /></span> <span class="gl-active"><Icon name="star" type="filled" class="gl-star-full" /></span> <span><Icon name="star" type="filled" class="gl-star-full" /></span> <span><Icon name="star" type="filled" class="gl-star-full" /></span> </div>
|
||||
</Example>
|
||||
|
||||
### Custom rating colors
|
||||
|
||||
Use CSS custom properties from vendor styles to change star colors.
|
||||
You can set active and inactive colors per instance.
|
||||
|
||||
<Example centered>
|
||||
<div data-star-rating class="d-flex gap-1" style="--gl-star-color: var(--tblr-red); --gl-star-color-inactive: var(--tblr-border-color); --tblr-icon-size: 1.25rem;"> <span class="gl-active"><Icon name="heart" type="filled" class="gl-star-full" /></span> <span class="gl-active"><Icon name="heart" type="filled" class="gl-star-full" /></span> <span class="gl-active"><Icon name="heart" type="filled" class="gl-star-full" /></span> <span><Icon name="heart" type="filled" class="gl-star-full" /></span> <span><Icon name="heart" type="filled" class="gl-star-full" /></span> </div>
|
||||
</Example>
|
||||
|
||||
## Examples
|
||||
|
||||
### Summary rating block
|
||||
|
||||
Combine stars with text to show score and vote count.
|
||||
This pattern works for cards, reviews, and product lists.
|
||||
|
||||
<Example centered>
|
||||
<div class="d-flex align-items-center gap-2"> <div class="stars"> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star text-yellow"><Icon name="star" type="filled" /></span> <span class="star"><Icon name="star" type="filled" /></span> </div> <span class="text-secondary">4.0 (128 reviews)</span> </div>
|
||||
</Example>
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Add a text label near stars, for example `4.0 out of 5`.
|
||||
- For read-only stars, keep the value visible in text.
|
||||
- For interactive ratings, ensure keyboard focus and clear selected state.
|
||||
- Do not rely on color alone; pair color with a numeric value.
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
title: Status
|
||||
summary: A status dot is particularly useful when you want to make an interface element more noticeable in limited space.
|
||||
description: Highlight an interface element with a status dot.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/ui/base/colors) section.
|
||||
|
||||
<Example>
|
||||
<span class="status status-blue">Blue</span> <span class="status status-azure">Azure</span> <span class="status status-indigo">Indigo</span> <span class="status status-purple">Purple</span> <span class="status status-pink">Pink</span> <span class="status status-red">Red</span> <span class="status status-orange">Orange</span> <span class="status status-yellow">Yellow</span> <span class="status status-lime">Lime</span> <span class="status status-green">Green</span> <span class="status status-teal">Teal</span> <span class="status status-cyan">Cyan</span>
|
||||
</Example>
|
||||
|
||||
|
||||
## Status with dot
|
||||
|
||||
You can add a dot to the status to make it more noticeable. To do this, use the `.status-dot` element inside the `.status` element.
|
||||
|
||||
<Example>
|
||||
<span class="status status-blue"> <span class="status-dot"></span> Blue </span> <span class="status status-azure"> <span class="status-dot"></span> Azure </span> <span class="status status-indigo"> <span class="status-dot"></span> Indigo </span> <span class="status status-purple"> <span class="status-dot"></span> Purple </span> <span class="status status-pink"> <span class="status-dot"></span> Pink </span> <span class="status status-red"> <span class="status-dot"></span> Red </span> <span class="status status-orange"> <span class="status-dot"></span> Orange </span> <span class="status status-yellow"> <span class="status-dot"></span> Yellow </span> <span class="status status-lime"> <span class="status-dot"></span> Lime </span> <span class="status status-green"> <span class="status-dot"></span> Green </span> <span class="status status-teal"> <span class="status-dot"></span> Teal </span> <span class="status status-cyan"> <span class="status-dot"></span> Cyan </span>
|
||||
</Example>
|
||||
|
||||
### Animated dot
|
||||
|
||||
You can also animate the dot to make it more noticeable. To do this, add a `.status-dot-animated` class to the `.status-dot` element.
|
||||
|
||||
<Example>
|
||||
<span class="status status-blue"> <span class="status-dot status-dot-animated"></span> Blue </span> <span class="status status-azure"> <span class="status-dot status-dot-animated"></span> Azure </span> <span class="status status-indigo"> <span class="status-dot status-dot-animated"></span> Indigo </span> <span class="status status-purple"> <span class="status-dot status-dot-animated"></span> Purple </span> <span class="status status-pink"> <span class="status-dot status-dot-animated"></span> Pink </span> <span class="status status-red"> <span class="status-dot status-dot-animated"></span> Red </span> <span class="status status-orange"> <span class="status-dot status-dot-animated"></span> Orange </span> <span class="status status-yellow"> <span class="status-dot status-dot-animated"></span> Yellow </span> <span class="status status-lime"> <span class="status-dot status-dot-animated"></span> Lime </span> <span class="status status-green"> <span class="status-dot status-dot-animated"></span> Green </span> <span class="status status-teal"> <span class="status-dot status-dot-animated"></span> Teal </span> <span class="status status-cyan"> <span class="status-dot status-dot-animated"></span> Cyan </span>
|
||||
</Example>
|
||||
|
||||
## Lite status
|
||||
|
||||
Use the lite status to make the status less noticeable. To do this, add a `.status-lite` class to the `.status` element.
|
||||
|
||||
<Example>
|
||||
<span class="status status-blue status-lite"> <span class="status-dot"></span> Blue </span> <span class="status status-azure status-lite"> <span class="status-dot"></span> Azure </span> <span class="status status-indigo status-lite"> <span class="status-dot"></span> Indigo </span> <span class="status status-purple status-lite"> <span class="status-dot"></span> Purple </span> <span class="status status-pink status-lite"> <span class="status-dot"></span> Pink </span> <span class="status status-red status-lite"> <span class="status-dot"></span> Red </span> <span class="status status-orange status-lite"> <span class="status-dot"></span> Orange </span> <span class="status status-yellow status-lite"> <span class="status-dot"></span> Yellow </span> <span class="status status-lime status-lite"> <span class="status-dot"></span> Lime </span> <span class="status status-green status-lite"> <span class="status-dot"></span> Green </span> <span class="status status-teal status-lite"> <span class="status-dot"></span> Teal </span> <span class="status status-cyan status-lite"> <span class="status-dot"></span> Cyan </span>
|
||||
</Example>
|
||||
|
||||
## Status dots
|
||||
|
||||
If you need only dot status, you can use the `.status-dot` class.
|
||||
|
||||
<Example>
|
||||
<span class="status-dot status-blue"></span> <span class="status-dot status-azure"></span> <span class="status-dot status-indigo"></span> <span class="status-dot status-purple"></span> <span class="status-dot status-pink"></span> <span class="status-dot status-red"></span> <span class="status-dot status-orange"></span> <span class="status-dot status-yellow"></span> <span class="status-dot status-lime"></span> <span class="status-dot status-green"></span> <span class="status-dot status-teal"></span> <span class="status-dot status-cyan"></span>
|
||||
</Example>
|
||||
|
||||
The dots can also be animated. To do this, add the `.status-dot-animated` class.
|
||||
|
||||
```html
|
||||
<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.
|
||||
|
||||
<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>
|
||||
</Example>
|
||||
|
||||
## Status indicator
|
||||
|
||||
Use the status indicator to show the status of a component or page. The status indicator can be animated. To do this, also add the `.status-indicator-animated` class.
|
||||
|
||||
<Example>
|
||||
<span class="status-indicator status-blue status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-azure status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-indigo status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-purple status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-pink status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-red status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-orange status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-yellow status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-lime status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-green status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-teal status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span> <span class="status-indicator status-cyan status-indicator-animated"> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> <span class="status-indicator-circle"></span> </span>
|
||||
</Example>
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: Step
|
||||
summary: A step is used to guide users through a complex process and make it easier to complete. Breaking a multi-step process into smaller parts and tracking progress along the way helps users finish it successfully.
|
||||
new: true
|
||||
description: Simplify a complex process with a step.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
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.
|
||||
|
||||
```html
|
||||
<div class="steps">
|
||||
<a href="#" class="step-item"> Step 1 </a>
|
||||
<a href="#" class="step-item"> Step 2 </a>
|
||||
<a href="#" class="step-item active"> Step 3 </a>
|
||||
</div>
|
||||
```
|
||||
|
||||
The example below demonstrates a simple progress tracker with four steps, where the third step is active.
|
||||
|
||||
<Example>
|
||||
<div class="steps"> <a href="#" class="step-item"> Step 1 </a> <a href="#" class="step-item"> Step 2 </a> <a href="#" class="step-item active"> Step 3 </a> <span href="#" class="step-item"> Step 4 </span> </div>
|
||||
</Example>
|
||||
|
||||
## Tooltips
|
||||
|
||||
Add tooltips if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.
|
||||
|
||||
To add a tooltip, use the `data-bs-toggle="tooltip"` attribute and specify the tooltip content with the `title` attribute.
|
||||
|
||||
```html
|
||||
<a
|
||||
href="#"
|
||||
class="step-item"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
title="Step 1 description"
|
||||
>
|
||||
Step 1
|
||||
</a>
|
||||
```
|
||||
|
||||
The example below demonstrates a progress tracker with tooltips for each step.
|
||||
|
||||
<Example>
|
||||
<div class="steps"> <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description" > Step 1 </a> <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 2 description" > Step 2 </a> <a href="#" class="step-item active" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 3 description" > Step 3 </a> <span href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 4 description" > Step 4 </span> </div>
|
||||
</Example>
|
||||
|
||||
## Color
|
||||
|
||||
You can customize the default progress indicator by changing the color to one that better suits your design. See the [full list of available colors](/ui/base/colors) for more details.
|
||||
|
||||
```html
|
||||
<div class="steps steps-green">...</div>
|
||||
```
|
||||
|
||||
The example below demonstrates a progress tracker with two different color schemes.
|
||||
|
||||
<Example>
|
||||
<div class="steps steps-green"> <a href="#" class="step-item"> Step 1 </a> <a href="#" class="step-item"> Step 2 </a> <a href="#" class="step-item active"> Step 3 </a> <span href="#" class="step-item"> Step 4 </span> </div> <div class="steps steps-red"> <a href="#" class="step-item"> Step 1 </a> <a href="#" class="step-item"> Step 2 </a> <a href="#" class="step-item active"> Step 3 </a> <span href="#" class="step-item"> Step 4 </span> </div>
|
||||
</Example>
|
||||
|
||||
## Steps without title
|
||||
|
||||
For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.
|
||||
|
||||
<Example>
|
||||
<div class="steps"> <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description" ></a> <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 2 description" ></a> <a href="#" class="step-item active" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 3 description" ></a> <span href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 4 description" ></span> </div>
|
||||
</Example>
|
||||
|
||||
## 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.
|
||||
|
||||
```html
|
||||
<div class="steps steps-counter">...</div>
|
||||
```
|
||||
|
||||
The example below demonstrates a progress tracker with numbers and a different color scheme.
|
||||
|
||||
<Example>
|
||||
<div class="steps steps-counter"> <a href="#" class="step-item"></a> <a href="#" class="step-item active"></a> <span href="#" class="step-item"></span> <span href="#" class="step-item"></span> <span href="#" class="step-item"></span> </div>
|
||||
</Example>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title: Tab
|
||||
summary: A tab allows users to alternate between equally important views within the same context. By dividing content into meaningful sections, it improves organization and makes navigation easier.
|
||||
bootstrapLink: components/navs/
|
||||
description: Organize content with an interactive tab.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
Use tabs to let users access different sections within one context quickly and with ease. In the default design, the current tab is highlighted, which makes the interface clear and user-friendly.
|
||||
|
||||
<Example>
|
||||
<div class="card"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs"> <li class="nav-item"> <a href="#tabs-home-ex1" class="nav-link active" data-bs-toggle="tab">Home</a> </li> <li class="nav-item"> <a href="#tabs-profile-ex1" class="nav-link" data-bs-toggle="tab">Profile</a> </li> </ul> </div> <div class="card-body"> <div class="tab-content"> <div class="tab-pane active show" id="tabs-home-ex1"> <h4>Home tab</h4> <div> Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh </div> </div> <div class="tab-pane" id="tabs-profile-ex1"> <h4>Profile tab</h4> <div> Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed </div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Tabs with icons
|
||||
|
||||
Add icons to your tab labels, if you want to use a visual element and make the tab content easier to identify.
|
||||
|
||||
<Example>
|
||||
<div class="card"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs"> <li class="nav-item"> <a href="#tabs-home-ex2" class="nav-link active" data-bs-toggle="tab"> <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <polyline points="5 12 3 12 12 3 21 12 19 12" /> <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /> <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /> </svg> Home </a> </li> <li class="nav-item"> <a href="#tabs-profile-ex2" class="nav-link" data-bs-toggle="tab"> <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="7" r="4" /> <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /> </svg> Profile </a> </li> <li class="nav-item ms-auto"> <a href="#tabs-settings-ex2" class="nav-link" title="Settings" data-bs-toggle="tab"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /> <circle cx="12" cy="12" r="3" /> </svg> </a> </li> </ul> </div> <div class="card-body"> <div class="tab-content"> <div class="tab-pane active show" id="tabs-home-ex2"> <h4>Home tab</h4> <div> Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh </div> </div> <div class="tab-pane" id="tabs-profile-ex2"> <h4>Profile tab</h4> <div> Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed </div> </div> <div class="tab-pane" id="tabs-settings-ex2"> <h4>Settings tab</h4> <div> Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus </div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Tabs only with icons
|
||||
|
||||
Use tabs without label names to save space and make the tab content easy to recognize for international users.
|
||||
|
||||
<Example>
|
||||
<div class="card"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs"> <li class="nav-item"> <a href="#tabs-home-ex3" class="nav-link active" data-bs-toggle="tab"> <Icon name="home" /> </a> </li> <li class="nav-item"> <a href="#tabs-profile-ex3" class="nav-link" data-bs-toggle="tab"> <Icon name="user" /> </a> </li> <li class="nav-item ms-auto"> <a href="#tabs-settings-ex3" class="nav-link" title="Settings" data-bs-toggle="tab"> <Icon name="settings" /> </a> </li> </ul> </div> <div class="card-body"> <div class="tab-content"> <div class="tab-pane active show" id="tabs-home-ex3"> <h4>Home tab</h4> <div> Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh </div> </div> <div class="tab-pane" id="tabs-profile-ex3"> <h4>Profile tab</h4> <div> Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed </div> </div> <div class="tab-pane" id="tabs-settings-ex3"> <h4>Settings tab</h4> <div> Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus </div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Tabs with dropdown
|
||||
|
||||
Make one or more of your tabs into a dropdown to add more options within one element.
|
||||
|
||||
<Example>
|
||||
<div class="card"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs"> <li class="nav-item"> <a href="#tabs-home-ex4" class="nav-link active" data-bs-toggle="tab">Home</a> </li> <li class="nav-item"> <a href="#tabs-profile-ex4" class="nav-link" data-bs-toggle="tab">Profile</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" >Dropdown</a > <div class="dropdown-menu"> <a class="dropdown-item" href="#"> Action </a> <a class="dropdown-item" href="#"> Another action </a> </div> </li> </ul> </div> <div class="card-body"> <div class="tab-content"> <div class="tab-pane active show" id="tabs-home-ex4"> <h4>Home tab</h4> <div> Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh </div> </div> <div class="tab-pane" id="tabs-profile-ex4"> <h4>Profile tab</h4> <div> Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed </div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Full-width tabs
|
||||
|
||||
Add the `.nav-fill` class to make the tabs take up the full space of the parent element.
|
||||
|
||||
<Example>
|
||||
<div class="card"> <div class="card-header"> <ul class="nav nav-tabs card-header-tabs nav-fill" data-bs-toggle="tabs"> <li class="nav-item"> <a href="#tabs-home-ex5" class="nav-link active" data-bs-toggle="tab"> <Icon name="home" /> </a> </li> <li class="nav-item"> <a href="#tabs-profile-ex5" class="nav-link" data-bs-toggle="tab"> <Icon name="user" /> </a> </li> <li class="nav-item"> <a href="#tabs-activity-ex5" class="nav-link" data-bs-toggle="tab"> <Icon name="activity" /> </a> </li> </ul> </div> <div class="card-body"> <div class="tab-content"> <div class="tab-pane active show" id="tabs-home-ex5"> <h4>Home tab</h4> <div> Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh </div> </div> <div class="tab-pane" id="tabs-profile-ex5"> <h4>Profile tab</h4> <div> Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed </div> </div> <div class="tab-pane" id="tabs-activity-ex5"> <h4>Activity tab</h4> <div> Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus </div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,46 @@
|
||||
---
|
||||
title: Table
|
||||
summary: A table is a useful interface element that lets you visualize data and arrange it clearly. It allows users to browse a lot of information at once, and a good table design improves readability.
|
||||
bootstrapLink: content/tables/
|
||||
description: Visualize data clearly with a table.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Basic Table
|
||||
|
||||
The basic table design has light padding and the presented data is separated with horizontal dividers. It helps provide users with all the necessary information, without overwhelming them with visuals.
|
||||
|
||||
The `.table` class adds basic styling to a table:
|
||||
|
||||
<Example>
|
||||
<div class="table-responsive"> <table class="table table-vcenter"> <thead> <tr> <th>Name</th> <th>Title</th> <th>Email</th> <th>Role</th> <th class="w-1"></th> </tr> </thead> <tbody> <tr> <td>Paweł Kuna</td> <td class="text-secondary">UI Designer, Training</td> <td class="text-secondary"> <a href="#" class="text-reset">paweluna@howstuffworks.com</a> </td> <td class="text-secondary">User</td> <td> <a href="#">Edit</a> </td> </tr> <tr> <td>Jeffie Lewzey</td> <td class="text-secondary">Chemical Engineer, Support</td> <td class="text-secondary"> <a href="#" class="text-reset">jlewzey1@seesaa.net</a> </td> <td class="text-secondary">Admin</td> <td> <a href="#">Edit</a> </td> </tr> <tr> <td>Mallory Hulme</td> <td class="text-secondary">Geologist IV, Support</td> <td class="text-secondary"> <a href="#" class="text-reset">mhulme2@domainmarket.com</a> </td> <td class="text-secondary">User</td> <td> <a href="#">Edit</a> </td> </tr> <tr> <td>Dunn Slane</td> <td class="text-secondary">Research Nurse, Sales</td> <td class="text-secondary"> <a href="#" class="text-reset">dslane3@epa.gov</a> </td> <td class="text-secondary">Owner</td> <td> <a href="#">Edit</a> </td> </tr> <tr> <td>Emmy Levet</td> <td class="text-secondary">VP Product Management, Accounting</td> <td class="text-secondary"> <a href="#" class="text-reset">elevet4@senate.gov</a> </td> <td class="text-secondary">Admin</td> <td> <a href="#">Edit</a> </td> </tr> </tbody> </table> </div>
|
||||
</Example>
|
||||
|
||||
## Responsive tables
|
||||
|
||||
Use the `.table-responsive` class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use `.table-responsive{-sm|-md|-lg|-xl}`. From that breakpoint and up, the table will behave normally, rather than scroll horizontally.
|
||||
|
||||
<Example>
|
||||
<table class="table table-responsive"> <thead> <tr> <th>#</th> <th class="text-nowrap">Heading 1</th> <th class="text-nowrap">Heading 2</th> <th class="text-nowrap">Heading 3</th> <th class="text-nowrap">Heading 4</th> <th class="text-nowrap">Heading 5</th> <th class="text-nowrap">Heading 6</th> <th class="text-nowrap">Heading 7</th> <th class="text-nowrap">Heading 8</th> <th class="text-nowrap">Heading 9</th> <th class="text-nowrap">Heading 10</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> <tr> <th>2</th> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table>
|
||||
</Example>
|
||||
|
||||
## No wrap
|
||||
|
||||
If you don't want the table cell content to wrap to another line, use the `table-nowrap` class.
|
||||
|
||||
<Example>
|
||||
<div class="table-responsive"> <table class="table table-vcenter table-nowrap"> <thead> <tr> <th>Name</th> <th>Title</th> <th>Email</th> <th>Role</th> <th></th> <th class="w-1"></th> </tr> </thead> <tbody> <tr> <td>Paweł Kuna</td> <td class="text-secondary">UI Designer, Training</td> <td class="text-secondary"> <a href="#" class="text-reset">paweluna@howstuffworks.com</a> </td> <td class="text-secondary">User</td> <td> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates. </td> <td> <a href="#">Edit</a> </td> </tr> </tbody> </table> </div>
|
||||
</Example>
|
||||
|
||||
## Table Variants
|
||||
|
||||
<Example>
|
||||
<table class="table"> <thead> <tr> <th scope="col">Class</th> <th scope="col">Heading</th> <th scope="col">Heading</th> </tr> </thead> <tbody> <tr> <th scope="row">Default</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-primary"> <th scope="row">Primary</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-secondary"> <th scope="row">Secondary</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-success"> <th scope="row">Success</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-danger"> <th scope="row">Danger</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-warning"> <th scope="row">Warning</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-info"> <th scope="row">Info</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-light"> <th scope="row">Light</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-dark"> <th scope="row">Dark</th> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table>
|
||||
</Example>
|
||||
|
||||
## Table with sticky header
|
||||
|
||||
<Example height="42rem">
|
||||
<table class="table"> <thead class="sticky-top"> <tr> <th scope="col">Class</th> <th scope="col">Heading</th> <th scope="col">Heading</th> </tr> </thead> <tbody> <tr> <th scope="row">Default</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Primary</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Secondary</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Success</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Danger</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Warning</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Info</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Light</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-dark"> <th scope="row">Dark</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Default</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Primary</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Secondary</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Success</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Danger</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Warning</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Info</th> <td>Cell</td> <td>Cell</td> </tr> <tr> <th scope="row">Light</th> <td>Cell</td> <td>Cell</td> </tr> <tr class="table-dark"> <th scope="row">Dark</th> <td>Cell</td> <td>Cell</td> </tr> </tbody> </table>
|
||||
</Example>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
title: Tag
|
||||
summary: Use tags to show compact metadata values with optional media, badges, and remove actions.
|
||||
description: Build inline tag elements with the tag class API and related tag part classes.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Flag from '@shared/components/ui/Flag.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
import Payment from '@shared/components/ui/Payment.astro';
|
||||
|
||||
## Overview
|
||||
|
||||
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>
|
||||
</Example>
|
||||
|
||||
## Variants
|
||||
|
||||
### With icon
|
||||
|
||||
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>
|
||||
</Example>
|
||||
|
||||
### With avatar, flag, or payment
|
||||
|
||||
Use `.tag-avatar`, `.tag-flag`, or `.tag-payment` to add media at the start of the tag. These classes keep spacing aligned with tag content.
|
||||
|
||||
<Example centered>
|
||||
<div class="tags-list"> <span class="tag"> <span class="avatar avatar-xs tag-avatar">AP</span> Alex P. <a href="#" class="btn-close" aria-label="Remove Alex tag"></a> </span> <span class="tag"> <Flag flag="us" size="xxs" class="tag-flag" />United States <a href="#" class="btn-close" aria-label="Remove country tag"></a> </span> <span class="tag"> <Payment provider="visa" size="xxs" class="tag-payment" />Visa <a href="#" class="btn-close" aria-label="Remove payment tag"></a> </span> </div>
|
||||
</Example>
|
||||
|
||||
### With badge
|
||||
|
||||
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>
|
||||
</Example>
|
||||
|
||||
### With checkbox
|
||||
|
||||
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>
|
||||
</Example>
|
||||
|
||||
## Examples
|
||||
|
||||
### Tags list
|
||||
|
||||
Use `.tags-list` for groups of tags. It applies consistent spacing and wrapping between items.
|
||||
|
||||
<Example centered>
|
||||
<div class="tags-list"> <span class="tag">Alpha <a href="#" class="btn-close" aria-label="Remove alpha tag"></a></span> <span class="tag">Beta <a href="#" class="btn-close" aria-label="Remove beta tag"></a></span> <span class="tag">Gamma <a href="#" class="btn-close" aria-label="Remove gamma tag"></a></span> <span class="tag">Delta <a href="#" class="btn-close" aria-label="Remove delta tag"></a></span> </div>
|
||||
</Example>
|
||||
|
||||
## Accessibility
|
||||
|
||||
- Keep tag labels short and meaningful.
|
||||
- Add `aria-label` to every close button action.
|
||||
- Keep selectable tags keyboard reachable when using `.tag-check`.
|
||||
- Ensure icon or media tags still include readable text.
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
title: Timeline
|
||||
summary: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.
|
||||
description: Visualize events and processes clearly.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Timeline from '@shared/components/ui/Timeline.astro';
|
||||
|
||||
## Timeline
|
||||
|
||||
The available timeline design is composed of many components that will help you visualize a process or show an outline of events. Thanks to the possibility of adding icons, avatars and links and the way of presenting the elements of content, your timeline will be clear for users and will make your website or app more attractive.
|
||||
|
||||
<Example>
|
||||
<Timeline />
|
||||
</Example>
|
||||
|
||||
## Simple timeline
|
||||
|
||||
Use a simplified version of the timeline, if it suits your design better. You can still make use of all the available timeline components.
|
||||
|
||||
<Example>
|
||||
<Timeline simple />
|
||||
</Example>
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Toast
|
||||
summary: A toast is a lightweight alert box that displays for a few seconds after a user action to communicate state or outcome. It is useful after actions like clicking a button or submitting a form, where feedback is needed without prompting another action.
|
||||
bootstrapLink: components/toasts/
|
||||
description: Display a lightweight alert notification with a toast.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the default toast message to inform users of the outcome of their action and provide additional information. It contains an `x` close button to make it possible for users to close the toast if they wish.
|
||||
|
||||
<Example>
|
||||
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast" > <div class="toast-header"> <span class="avatar avatar-xs me-2" style="background-image: url(/static/avatars/018f.jpg)" ></span> <strong class="me-auto">Mallory Hulme</strong> <small>11 mins ago</small> <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close" ></button> </div> <div class="toast-body">Hello, world! This is a toast message.</div> </div>
|
||||
</Example>
|
||||
|
||||
## Translucent
|
||||
|
||||
Toasts blend over the elements they appear over. If a browser supports the `backdrop-filter` CSS property, the elements under a toast will be blurred.
|
||||
|
||||
<Example>
|
||||
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast" > <div class="toast-header"> <span class="avatar avatar-xs me-2" style="background-image: url(/static/avatars/029m.jpg)" ></span> <strong class="me-auto">Mallory Hulme</strong> <small>11 mins ago</small> <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close" ></button> </div> <div class="toast-body">Hello, world! This is a toast message.</div> </div>
|
||||
</Example>
|
||||
|
||||
## Stacking toasts
|
||||
|
||||
Stack multiple toasts together by putting them within one `.toast-container`.
|
||||
|
||||
<Example height="25rem" centered bg="surface-secondary">
|
||||
<div class="toast-container"> <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast" > <div class="toast-header"> <span class="avatar avatar-xs me-2" style="background-image: url(/static/avatars/008m.jpg)" ></span> <strong class="me-auto">Dunn Slane</strong> <small>11 mins ago</small> <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close" ></button> </div> <div class="toast-body">Hello, world! This is a toast message.</div> </div> <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast" > <div class="toast-header"> <span class="avatar avatar-xs me-2" style="background-image: url(/static/avatars/020m.jpg)" ></span> <strong class="me-auto">Mallory Hulme</strong> <small>7 mins ago</small> <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close" ></button> </div> <div class="toast-body">This is another toast message.</div> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,24 @@
|
||||
---
|
||||
title: Tooltip
|
||||
summary: A tooltip is a text label that appears when a user hovers over an interface element. It explains unclear elements and guides users when they need help. When used properly, it can significantly enhance user experience and add value to your website or software.
|
||||
bootstrapLink: components/tooltips/
|
||||
description: Guide users with an informative tooltip.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element.
|
||||
|
||||
<Example>
|
||||
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top" > Tooltip on top </button> <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right" > Tooltip on right </button> <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom" > Tooltip on bottom </button> <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left" > Tooltip on left </button>
|
||||
</Example>
|
||||
|
||||
## Tooltip with HTML
|
||||
|
||||
If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.
|
||||
|
||||
<Example>
|
||||
<button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>" > Tooltip with HTML </button>
|
||||
</Example>
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: Tracking
|
||||
summary: Component for visualizing activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience.
|
||||
description: Monitor data activity visually.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Basic example
|
||||
|
||||
<Example>
|
||||
<div class="tracking"> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Big load" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data" ></div> <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> </div>
|
||||
</Example>
|
||||
|
||||
## Tracking inside a card
|
||||
|
||||
You can add a tracking component inside the cards to give your reports a fresh look and visualize the status of your system in an attractive way. If you want to read how to add other elements to a card it is worth reading [documentation of card](/img/components/cards).
|
||||
|
||||
<Example>
|
||||
<div class="card"> <div class="card-body"> <div class="d-flex align-items-center"> <div class="subheader">Status monitoring</div> <div class="ms-auto lh-1"> <div class="dropdown"> <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Current month</a > <div class="dropdown-menu dropdown-menu-end"> <a class="dropdown-item active" href="#">Current month</a> <a class="dropdown-item" href="#">Last month</a> <a class="dropdown-item" href="#">Last 3 months</a> </div> </div> </div> </div> <div class="d-flex align-items-baseline"> <div class="h1 mb-3 me-2">99.5%</div> <div class="me-auto"> <span class="text-green d-inline-flex align-items-center lh-1"> 2% <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <polyline points="3 17 9 11 13 15 21 7" /> <polyline points="14 7 21 7 21 14" /> </svg> </span> </div> </div> <div class="mt-2"> <div class="tracking"> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Big load" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data" ></div> <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational" ></div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Vector Map
|
||||
docs-libs: [jsvectormap]
|
||||
description: Interactive guide to creating a vector map with jsVectorMap.
|
||||
summary: A vector map is a great way to display geographical data in an interactive and visually appealing way. Learn how to create a vector map with jsVectorMap.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import MapVector from '@shared/components/ui/MapVector.astro'
|
||||
|
||||
## 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>
|
||||
```
|
||||
|
||||
## Default map
|
||||
|
||||
Integrating the vector map into your website is straightforward. Below is a sample implementation for a world map:
|
||||
|
||||
<Example codeOnly>
|
||||
<MapVector mapId="empty" />
|
||||
</Example>
|
||||
|
||||
## Sample demo
|
||||
|
||||
Look at the example below to see how the vector map works with a world map.
|
||||
|
||||
<Example>
|
||||
<MapVector mapId="world" />
|
||||
</Example>
|
||||
|
||||
## Markers
|
||||
|
||||
You can add markers to the map to highlight specific locations. Below is a sample implementation for a world map with markers:
|
||||
|
||||
<Example>
|
||||
<MapVector mapId="world-markers" />
|
||||
</Example>
|
||||
|
||||
## Lines
|
||||
|
||||
You can also draw lines on the map to represent routes or connections between different locations. Below is a sample implementation for a world map with lines:
|
||||
|
||||
<Example>
|
||||
<MapVector mapId="world-lines" />
|
||||
</Example>
|
||||
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: WYSIWYG editor
|
||||
docs-libs: [hugerte]
|
||||
summary: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. HugeRTE can handle any challenge, from the most simple implementation through to the most complex use case.
|
||||
description: Flexible WYSIWYG editor for content.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Wysiwyg from '@shared/components/ui/Wysiwyg.astro'
|
||||
|
||||
[HugeRTE](https://hugerte.org/) documentation.
|
||||
|
||||
## Default text editor
|
||||
|
||||
Initialize HugeRTE on any element (or elements) on the web page by passing an object containing a selector value to `hugerte.init()`. The selector value can be any valid CSS selector.
|
||||
|
||||
<Example>
|
||||
<Wysiwyg />
|
||||
</Example>
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Color check
|
||||
summary: The color check is a great way to make your form more user-friendly and engaging. You can use the color check to create a visually appealing form that will help users make decisions quickly and easily.
|
||||
description: Enhance forms with color checks.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import InputColor from '@shared/components/parts/form/InputColor.astro'
|
||||
|
||||
Your input controls can come in a variety of colors, depending on your preferences. See the [full list of available colors](/ui/base/colors) for more details.
|
||||
|
||||
```html
|
||||
<label class="form-colorinput">
|
||||
<input name="..." type="radio" value="..." class="form-colorinput-input" />
|
||||
<span class="form-colorinput-color bg-lime"></span>
|
||||
</label>
|
||||
```
|
||||
|
||||
There is also an example of a color input:
|
||||
|
||||
<Example>
|
||||
<InputColor type="checkbox" />
|
||||
</Example>
|
||||
|
||||
If you need to select only one color, you can use the radio input type:
|
||||
|
||||
<Example>
|
||||
<InputColor name="color-rounded" rounded={true} />
|
||||
</Example>
|
||||
|
||||
## Input color picker
|
||||
|
||||
Add an color picker to your form to let users customize it according to their preferences.
|
||||
|
||||
<Example>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Color picker</label>
|
||||
<input
|
||||
type="color"
|
||||
class="form-control form-control-color"
|
||||
value="#066fd1"
|
||||
title="Choose your color"
|
||||
/>
|
||||
</div>
|
||||
</Example>
|
||||
@@ -0,0 +1,166 @@
|
||||
---
|
||||
title: Form elements
|
||||
summary: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
|
||||
bootstrapLink: components/forms/
|
||||
docs-libs: nouislider
|
||||
description: Design user-friendly and effective forms.
|
||||
order: 1
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Classic inputs
|
||||
|
||||
Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form. Add the `form-control` class to style your input controls.
|
||||
|
||||
```html
|
||||
<input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder" />
|
||||
```
|
||||
|
||||
All variants of the input control are available in the examples below:
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Text</label> <input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder" /> </div> <div class="mb-3"> <label class="form-label">Password</label> <input type="password" class="form-control" name="example-password-input" placeholder="Input placeholder" /> </div> <div class="mb-3"> <label class="form-label">Disabled</label> <input type="text" class="form-control" name="example-password-input" placeholder="Input placeholder" disabled /> </div> <div class="mb-3"> <label class="form-label">Readonly</label> <input type="text" class="form-control" name="example-password-input" value="Readolny value" readonly /> </div>
|
||||
</Example>
|
||||
|
||||
## Form control rounded
|
||||
|
||||
Use the `form-control-rounded` class if you prefer form controls with rounded corners.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Form control rounded</label> <input type="text" class="form-control form-control-rounded mb-2" name="Form control rounded" placeholder="Text.." /> <div class="input-icon"> <input type="text" value="" class="form-control form-control-rounded" placeholder="Search…" /> <span class="input-icon-addon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="10" cy="10" r="7" /> <line x1="21" y1="21" x2="15" y2="15" /> </svg> </span> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Form control flush
|
||||
|
||||
You can remove borders from your form control by adding the `form-control-flush` class.
|
||||
|
||||
<Example>
|
||||
<label class="form-label">Form control flush</label> <input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text.." />
|
||||
</Example>
|
||||
|
||||
## Input with icon
|
||||
|
||||
Add icons to your input controls to suggest users what they should enter or inform them of the current state of a form element.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Icon input</label> <div class="input-icon mb-3"> <input type="text" value="" class="form-control" placeholder="Search…" /> <span class="input-icon-addon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="10" cy="10" r="7" /> <line x1="21" y1="21" x2="15" y2="15" /> </svg> </span> </div> <div class="input-icon mb-3"> <span class="input-icon-addon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="7" r="4" /> <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /> </svg> </span> <input type="text" value="" class="form-control" placeholder="Username" /> </div> </div> <div class="mb-3"> <label class="form-label">Loader input</label> <div class="input-icon mb-3"> <input type="text" value="" class="form-control" placeholder="Loading…" /> <span class="input-icon-addon"> <div class="spinner-border spinner-border-sm text-secondary" role="status"></div> </span> </div> <div class="input-icon mb-3"> <span class="input-icon-addon"> <div class="spinner-border spinner-border-sm text-secondary" role="status"></div> </span> <input type="text" value="" class="form-control" placeholder="Loading…" /> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Separated inputs
|
||||
|
||||
Include an additional element in your input section, such as a button which can be used to submit the information entered in the input control.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Separated inputs</label> <div class="row g-2"> <div class="col"> <input type="text" class="form-control" placeholder="Search for…" /> </div> <div class="col-auto"> <a href="#" class="btn btn-icon" aria-label="Button"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="10" cy="10" r="7" /> <line x1="21" y1="21" x2="15" y2="15" /> </svg> </a> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Textarea and select
|
||||
|
||||
Use a multi-line text input control to enable users to enter longer pieces of text. The control will automatically adjust to the length of the text entered.
|
||||
|
||||
Add one of the available selects - either a dropdown or a multiple choice select - to let users choose from a predefined set of options.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Textarea</label> <textarea class="form-control" name="example-textarea" placeholder="Textarea placeholder" ></textarea> </div> <div class="mb-3"> <div class="form-label">Select</div> <select class="form-select"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="mb-3"> <div class="form-label">Select multiple</div> <select class="form-select" multiple> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div>
|
||||
</Example>
|
||||
|
||||
## Input size
|
||||
|
||||
Choose the size of an input control that will go well with your form design. Besides the default size, you can also use small and large input controls.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Input sizing</label> <input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg" /> <input class="form-control mb-2" type="text" placeholder="Default input" /> <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" /> </div>
|
||||
</Example>
|
||||
|
||||
## Datalists
|
||||
|
||||
Use the `datalist` element to add an autocomplete feature to your input control. The list of available options will display once a user starts to type and will make it quicker to complete form sections.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Datalist example</label> <input class="form-control" list="datalistOptions" placeholder="Type to search..." /> <datalist id="datalistOptions"> <option value="Aruba" /> <option value="Afghanistan" /> <option value="Angola" /> <option value="Anguilla" /> <option value="Albania" /> <option value="Andorra" /> <option value="United Arab Emirates" /> <option value="Argentina" /> <option value="Armenia" /> <option value="American Samoa" /> </datalist> </div>
|
||||
</Example>
|
||||
|
||||
## Toggle switches
|
||||
|
||||
Use toggle switches for the elements of your form which require choosing between two opposing states.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <div class="form-label">Toggle switches</div> <label class="form-check form-switch"> <input class="form-check-input" type="checkbox" checked /> <span class="form-check-label">Option 1</span> </label> <label class="form-check form-switch"> <input class="form-check-input" type="checkbox" /> <span class="form-check-label">Option 2</span> </label> <label class="form-check form-switch"> <input class="form-check-input" type="checkbox" /> <span class="form-check-label">Option 3</span> </label> </div> <div class="mb-3"> <div class="form-label">Single switch</div> <label class="form-check form-switch"> <input class="form-check-input" type="checkbox" /> <span class="form-check-label">I agree with terms and conditions</span> </label> </div>
|
||||
</Example>
|
||||
|
||||
## Radios
|
||||
|
||||
Use radio buttons for the parts of your form which require users to choose one option from a set of two or more mutually exclusive options.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <div class="form-label">Radios</div> <div> <label class="form-check"> <input class="form-check-input" type="radio" name="radios" checked /> <span class="form-check-label">Option 1</span> </label> <label class="form-check"> <input class="form-check-input" type="radio" name="radios" /> <span class="form-check-label">Option 2</span> </label> <label class="form-check"> <input class="form-check-input" type="radio" disabled /> <span class="form-check-label">Option 3</span> </label> <label class="form-check"> <input class="form-check-input" type="radio" checked disabled /> <span class="form-check-label">Option 4</span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <div class="form-label">Inline Radios</div> <div> <label class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="radios-inline" checked /> <span class="form-check-label">Option 1</span> </label> <label class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="radios-inline" /> <span class="form-check-label">Option 2</span> </label> <label class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="radios-inline" disabled /> <span class="form-check-label">Option 3</span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Checkboxes
|
||||
|
||||
Use checkboxes if you want to allow users to select more than one option from a set of predefined options or to turn an option on or off.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <div class="form-label">Checkboxes</div> <div> <label class="form-check"> <input class="form-check-input" type="checkbox" /> <span class="form-check-label">Checkbox input</span> </label> <label class="form-check"> <input class="form-check-input" type="checkbox" disabled /> <span class="form-check-label">Disabled checkbox input</span> </label> <label class="form-check"> <input class="form-check-input" type="checkbox" checked /> <span class="form-check-label">Checked checkbox input</span> </label> </div> </div> <div class="mb-3"> <div class="form-label">Inline Checkboxes</div> <div> <label class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" /> <span class="form-check-label">Option 1</span> </label> <label class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" disabled /> <span class="form-check-label">Option 2</span> </label> <label class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" checked /> <span class="form-check-label">Option 3</span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Range input
|
||||
|
||||
Add a range slider to make it possible for users to set a value or range, such as a price range or a time frame.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Range input</label> <input type="range" class="form-range mb-2" value="40" min="0" max="100" step="10" /> <div class="form-range mb-2 text-green" id="range-color"></div> </div> <script>{`document.addEventListener("DOMContentLoaded", function () { window.noUiSlider && noUiSlider.create(document.getElementById("range-color"), { start: 40, connect: [true, false], step: 10, range: { min: 0, max: 100, }, }); });`}</script>
|
||||
</Example>
|
||||
|
||||
## Input group
|
||||
|
||||
Create a group of input controls and place add-ons on either side of an input.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Input group</label> <div class="input-group mb-2"> <span class="input-group-text"> @ </span> <input type="text" class="form-control" placeholder="username" autocomplete="off" /> </div> <div class="input-group mb-2"> <input type="text" class="form-control" placeholder="subdomain" autocomplete="off" /> <span class="input-group-text"> .tabler.io </span> </div> <div class="input-group"> <span class="input-group-text"> https:// </span> <input type="text" class="form-control" placeholder="subdomain" autocomplete="off" /> <span class="input-group-text"> .tabler.io </span> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Input with checkboxes or radios
|
||||
|
||||
Add checkboxes or radio buttons on either side of your input control.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Input with checkbox or radios</label> <div class="input-group mb-2"> <span class="input-group-text"> <input class="form-check-input m-0" type="checkbox" checked /> </span> <input type="text" class="form-control" autocomplete="off" /> </div> <div class="input-group"> <input type="text" class="form-control" autocomplete="off" /> <span class="input-group-text"> <input class="form-check-input m-0" type="radio" checked /> </span> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Input with prepended or appended text
|
||||
|
||||
Add text to your input control, either before or after the text which is to be entered by a user.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Input with prepended text</label> <div class="input-group input-group-flat mb-2"> <span class="input-group-text"> https://tabler.io/users/ </span> <input type="text" class="form-control ps-0" value="yourfancyusername" autocomplete="off" /> </div> <div class="input-group input-group-flat"> <input type="text" class="form-control text-end pe-0" value="yourfancydomain" autocomplete="off" /> <span class="input-group-text"> .tabler.io </span> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Input with appended link
|
||||
|
||||
Include a link in your input control to add a clickable element within the control.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Input with appended link</label> <div class="input-group input-group-flat"> <input type="password" class="form-control" value="ultrastrongpassword" autocomplete="off" /> <span class="input-group-text"> <a href="#" class="input-group-link">Show password</a> </span> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Input with appended kbd
|
||||
|
||||
Include a `<kbd>` in your input control to add a shortcut hint to the control.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Input with appended kbd</label> <div class="input-group input-group-flat"> <input type="password" class="form-control" value="ultrastrongpassword" autocomplete="off" /> <span class="input-group-text"> <kbd>ctrl + K</kbd> </span> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Input with appended icon links
|
||||
|
||||
Add an icon link which you want to display at the end of your input control to visually represent actions which a user can take.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Input with appended icon links</label> <div class="input-group input-group-flat"> <input type="text" class="form-control" autocomplete="off" /> <span class="input-group-text"> <a href="#" class="link-secondary" title="Clear search" data-bs-toggle="tooltip"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /> </svg> </a> <a href="#" class="link-secondary ms-2" title="Search settings" data-bs-toggle="tooltip"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="6" cy="10" r="2" /> <line x1="6" y1="4" x2="6" y2="8" /> <line x1="6" y1="12" x2="6" y2="20" /> <circle cx="12" cy="16" r="2" /> <line x1="12" y1="4" x2="12" y2="14" /> <line x1="12" y1="18" x2="12" y2="20" /> <circle cx="18" cy="7" r="2" /> <line x1="18" y1="4" x2="18" y2="5" /> <line x1="18" y1="9" x2="18" y2="20" /> </svg> </a> <a href="#" class="link-secondary ms-2 disabled" title="Add notification" data-bs-toggle="tooltip" > <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /> <path d="M9 17v1a3 3 0 0 0 6 0v-1" /> </svg> </a> </span> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Form fieldset
|
||||
summary: By grouping form elements together with the fieldset element, you can improve the organization and accessibility of your forms, making it easier for users to understand the purpose of each input and provide accurate information.
|
||||
description: Group form elements for clarity.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
Group parts of your form to make it well-structured and clearer for users, using the `fieldset` element.
|
||||
|
||||
<Example>
|
||||
<fieldset class="form-fieldset"> <div class="mb-3"> <label class="form-label required">Full name</label> <input type="text" class="form-control" autocomplete="off" /> </div> <div class="mb-3"> <label class="form-label required">Company</label> <input type="text" class="form-control" autocomplete="off" /> </div> <div class="mb-3"> <label class="form-label required">Email</label> <input type="email" class="form-control" autocomplete="off" /> </div> <div class="mb-3"> <label class="form-label">Phone number</label> <input type="tel" class="form-control" autocomplete="off" /> </div> <label class="form-check"> <input type="checkbox" class="form-check-input" /> <span class="form-check-label required">I agree to the Terms & Conditions</span> </label> </fieldset>
|
||||
</Example>
|
||||
@@ -0,0 +1,58 @@
|
||||
---
|
||||
title: Form helpers
|
||||
summary: Use form helpers to provide additional information about a form element. You can use input help, required field, form hint, and additional info inside the label.
|
||||
description: Provide additional guidance in forms.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Input help
|
||||
|
||||
Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper. To add an input helper, use the `.form-help` class.
|
||||
|
||||
```html
|
||||
<span
|
||||
class="form-help"
|
||||
data-bs-toggle="popover"
|
||||
data-bs-placement="top"
|
||||
data-bs-html="true"
|
||||
data-bs-content="<p>...</p>"
|
||||
>?</span
|
||||
>
|
||||
```
|
||||
|
||||
Look at the example below to see how the input help works:
|
||||
|
||||
<Example>
|
||||
<div> <label class="form-label"> ZIP Code <span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-html="true" data-bs-content="<p>ZIP Code must be US or CDN format. You can use an extended ZIP+4 code to determine address more accurately.</p><p class='mb-0'><a href=''>USP ZIP codes lookup tools</a></p>" >?</span > </label> <input type="text" class="form-control" placeholder="Your ZIP Code" /> </div>
|
||||
</Example>
|
||||
|
||||
## Required field
|
||||
|
||||
Use the `.required` class to indicate that a field is required. It will add a red asterisk to the label.
|
||||
|
||||
<Example>
|
||||
<div> <label class="form-label required">Required</label> <input type="text" class="form-control" name="..." placeholder="Required..." /> </div>
|
||||
</Example>
|
||||
|
||||
## Form hint
|
||||
|
||||
Use a form hint to provide users with additional information about a form element. The text will appear below the input field. To add a form hint, use the `.form-hint` class.
|
||||
|
||||
```html
|
||||
<div class="form-hint">We'll never share your email with anyone else.</div>
|
||||
```
|
||||
|
||||
Look at the example below to see how the form hint works:
|
||||
|
||||
<Example>
|
||||
<div> <label class="form-label">Email address</label> <input type="email" class="form-control" placeholder="Enter your email address" /> <div class="form-hint">We'll never share your email with anyone else.</div> </div>
|
||||
</Example>
|
||||
|
||||
## Additional info inside label
|
||||
|
||||
Use the `.form-label-description` class to add additional information to the label. The text will appear next to the label. You can use it to add for example a character counter.
|
||||
|
||||
<Example>
|
||||
<div> <label class="form-label">Textarea <span class="form-label-description">56/100</span> </label> <textarea class="form-control" name="" rows="3" placeholder="Content.."></textarea> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: Image check
|
||||
summary: The image check is a great way to make your form more user-friendly and engaging. You can use the image check to create a visually appealing form that will help users make decisions quickly and easily.
|
||||
description: Add visual appeal to forms with images.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Default markup
|
||||
|
||||
To build an image check, you need to use the `.form-imagecheck` class and the `.form-imagecheck-input` class for the input element. You can also use the `.form-imagecheck-figure` class to display the custom checkbox and the `.form-imagecheck-image` class to style the image itself.
|
||||
|
||||
```html
|
||||
<label class="form-imagecheck">
|
||||
<input name="..." type="checkbox" value="" class="form-imagecheck-input" checked />
|
||||
<span class="form-imagecheck-figure">
|
||||
<img src="..." alt="" class="form-imagecheck-image" />
|
||||
</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
Look at the examples below to see how the image check works:
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Image Check</label> <div class="row g-2"> <div class="col-3"> <label class="form-imagecheck"> <input name="image" type="checkbox" value="1" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <img src="/static/photos/everything-you-need-to-work-from-your-bed-2.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> <div class="col-3"> <label class="form-imagecheck"> <input name="image" type="checkbox" value="2" class="form-imagecheck-input" checked /> <span class="form-imagecheck-figure"> <img src="/static/photos/color-palette-guide-sample-colors-catalog-.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> <div class="col-3"> <label class="form-imagecheck"> <input name="image" type="checkbox" value="3" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <img src="/static/photos/woman-read-book-and-drink-coffee-2.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> <div class="col-3"> <label class="form-imagecheck"> <input name="image" type="checkbox" value="4" class="form-imagecheck-input" checked /> <span class="form-imagecheck-figure"> <img src="/static/photos/stylish-workspace-with-macbook-pro-2.jpg" alt="" class="form-imagecheck-image" /> </span> </label> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Radio buttons
|
||||
|
||||
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>
|
||||
</Example>
|
||||
|
||||
## Avatars
|
||||
|
||||
If you want to use the image check with avatars, you can use an [avatar component](/ui/components/avatar) instead of an image.
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Person Check</label> <div class="row g-2"> <div class="col-auto"> <label class="form-imagecheck mb-2"> <input name="image" type="checkbox" value="1" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <span class="form-imagecheck-image"> <span class="avatar avatar-xl" style="background-image: url(/static/avatars/057f.jpg)" ></span> </span> </span> </label> </div> <div class="col-auto"> <label class="form-imagecheck mb-2"> <input name="image" type="checkbox" value="2" class="form-imagecheck-input" checked /> <span class="form-imagecheck-figure"> <span class="form-imagecheck-image"> <span class="avatar avatar-xl">HS</span> </span> </span> </label> </div> <div class="col-auto"> <label class="form-imagecheck mb-2"> <input name="image" type="checkbox" value="3" class="form-imagecheck-input" /> <span class="form-imagecheck-figure"> <span class="form-imagecheck-image"> <span class="avatar avatar-xl" style="background-image: url(/static/avatars/062m.jpg)" ></span> </span> </span> </label> </div> <div class="col-auto"> <label class="form-imagecheck mb-2"> <input name="image" type="checkbox" value="4" class="form-imagecheck-input" checked /> <span class="form-imagecheck-figure"> <span class="form-imagecheck-image"> <span class="avatar avatar-xl" style="background-image: url(/static/avatars/070m.jpg)" ></span> </span> </span> </label> </div> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Input mask
|
||||
summary: An input mask is used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors.
|
||||
description: Clarify input formats for users.
|
||||
docs-libs: imask
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.astro'
|
||||
|
||||
## Installation
|
||||
|
||||
To be able to use the input mask in your application you will need to install the imask dependency. You can do this by running the following command:
|
||||
|
||||
<TabsPackage name="imask" />
|
||||
|
||||
And import or require:
|
||||
|
||||
```javascript
|
||||
import IMask from 'imask'
|
||||
```
|
||||
|
||||
You can also use the CDN link to include the script in your project:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/npm/imask"></script>
|
||||
```
|
||||
|
||||
If you struggle with the installation, you can find more information in the [IMask documentation](https://imask.js.org/guide.html#installation).
|
||||
|
||||
## Default markup
|
||||
|
||||
Use an input mask in the fields where users have to enter their phone number, to make the formatting rules clear and help them avoid confusion.
|
||||
|
||||
To create an input mask, add the `data-mask` attribute to the input element:
|
||||
|
||||
```html
|
||||
<input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" placeholder="(00) 0000-0000" autocomplete="off" />
|
||||
```
|
||||
|
||||
Look at the example below to see how the input mask works:
|
||||
|
||||
<Example>
|
||||
<label class="form-label">Telephone mask</label>
|
||||
<input type="text" name="input-mask" class="form-control" data-mask="(00) 0000-0000" data-mask-visible="true" placeholder="(00) 0000-0000" autocomplete="off" />
|
||||
</Example>
|
||||
|
||||
## More examples
|
||||
|
||||
If you need more examples of input masks, you can find them in the [IMask documentation](https://imask.js.org/guide.html#masked-input).
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: Form selectgroup
|
||||
summary: Use selectgroup to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectgroup with a label, use icons only or icons with labels. Alternatively, you can use pill selectgroup if they go well with your design.
|
||||
description: Improve form UX with select groups.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Simple selectgroup
|
||||
|
||||
To create a simple selectgroup, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label.
|
||||
|
||||
```html
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="checkbox" name="name" value="..." class="form-selectgroup-input" checked />
|
||||
<span class="form-selectgroup-label">...</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
Look at the example below to see how the simple selectgroup works:
|
||||
|
||||
<Example centered>
|
||||
<div> <div class="form-selectgroup"> <label class="form-selectgroup-item"> <input type="radio" name="name" value="HTML" class="form-selectgroup-input" checked /> <span class="form-selectgroup-label">HTML</span> </label> <label class="form-selectgroup-item"> <input type="radio" name="name" value="CSS" class="form-selectgroup-input" /> <span class="form-selectgroup-label">CSS</span> </label> <label class="form-selectgroup-item"> <input type="radio" name="name" value="PHP" class="form-selectgroup-input" /> <span class="form-selectgroup-label">PHP</span> </label> <label class="form-selectgroup-item"> <input type="radio" name="name" value="JavaScript" class="form-selectgroup-input" /> <span class="form-selectgroup-label">JavaScript</span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Multiple choices
|
||||
|
||||
You can also create a selectgroup with multiple choices. To do this, change the `type` attribute of the input element to `checkbox`.
|
||||
|
||||
```html
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="checkbox" name="name" value="..." class="form-selectgroup-input" checked />
|
||||
<span class="form-selectgroup-label">...</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
Look at the example below to see how the multiple choices selectgroup works:
|
||||
|
||||
<Example centered>
|
||||
<div> <div class="form-selectgroup"> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked /> <span class="form-selectgroup-label">HTML</span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" /> <span class="form-selectgroup-label">CSS</span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" /> <span class="form-selectgroup-label">PHP</span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" /> <span class="form-selectgroup-label">JavaScript</span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Icon input
|
||||
|
||||
To create an icon input, use the `.form-selectgroup` class. You should add a label to the selectgroup by using the `.form-selectgroup-item` class for the input element and the `.form-selectgroup-label` class for the label. You can use the `.icon` class to style the icon.
|
||||
|
||||
```html
|
||||
<label class="form-selectgroup-item">
|
||||
<input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked />
|
||||
<span class="form-selectgroup-label">
|
||||
<svg class="icon" width="24" height="24">...</svg>
|
||||
</span>
|
||||
</label>
|
||||
```
|
||||
|
||||
We recommend you use Tabler Icons for the best experience. You can find 123 free icons in the [Tabler Icons](https://tabler-icons.io/) library. Just copy the SVG code and paste it into your project.
|
||||
|
||||
<Example centered>
|
||||
<div class="mb-3"> <label class="form-label">Icon input</label> <div class="form-selectgroup"> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="sun" class="form-selectgroup-input" checked /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="4" /> <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /> </svg> </span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="moon" class="form-selectgroup-input" /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /> </svg> </span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="cloud-rain" class="form-selectgroup-input" /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7" /> <path d="M11 13v2m0 3v2m4 -5v2m0 3v2" /> </svg> </span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="cloud" class="form-selectgroup-input" /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path d="M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.475 2.085 -4.482 4.657 -4.482c.393 -1.762 1.794 -3.2 3.675 -3.773c1.88 -.572 3.956 -.193 5.444 .996c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486c0 1.927 -1.551 3.487 -3.465 3.487h-11.878" /> </svg> </span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="Other" class="form-selectgroup-input" /> <span class="form-selectgroup-label">Other</span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
You can also add text to the element. Look at the example below to see how it works:
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Selectgroup with icons and text</label> <div class="form-selectgroup"> <label class="form-selectgroup-item"> <input type="radio" name="icons" value="home" class="form-selectgroup-input" checked /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <polyline points="5 12 3 12 12 3 21 12 19 12" /> <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /> <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /> </svg> Home </span> </label> <label class="form-selectgroup-item"> <input type="radio" name="icons" value="user" class="form-selectgroup-input" /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="7" r="4" /> <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /> </svg> User </span> </label> <label class="form-selectgroup-item"> <input type="radio" name="icons" value="circle" class="form-selectgroup-input" /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <circle cx="12" cy="12" r="9" /> </svg> Circle </span> </label> <label class="form-selectgroup-item"> <input type="radio" name="icons" value="square" class="form-selectgroup-input" /> <span class="form-selectgroup-label"> <svg xmlns="http://www.w3.org/2000/svg" class="icon me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" > <path stroke="none" d="M0 0h24v24H0z" fill="none" /> <rect x="4" y="4" width="16" height="16" rx="2" /> </svg> Square </span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Pill selectgroup
|
||||
|
||||
If you want to use pill selectgroup, use the `.form-selectgroup-pills` class. All the other classes are the same as in the simple selectgroup.
|
||||
|
||||
```html
|
||||
<div class="form-selectgroup form-selectgroup-pills">...</div>
|
||||
```
|
||||
|
||||
Look at the example below to see how the pill selectgroup works:
|
||||
|
||||
<Example>
|
||||
<div class="mb-3"> <label class="form-label">Different style</label> <div class="form-selectgroup form-selectgroup-pills"> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="HTML" class="form-selectgroup-input" checked /> <span class="form-selectgroup-label">HTML</span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="CSS" class="form-selectgroup-input" /> <span class="form-selectgroup-label">CSS</span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="PHP" class="form-selectgroup-input" /> <span class="form-selectgroup-label">PHP</span> </label> <label class="form-selectgroup-item"> <input type="checkbox" name="name" value="JavaScript" class="form-selectgroup-input" /> <span class="form-selectgroup-label">JavaScript</span> </label> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Advanced selectboxes
|
||||
|
||||
Use more advanced selectboxes to display the range of available options. You can choose selectboxes with radio buttons if you want users to select only one option, or with checkboxes if they are allowed to choose multiple options.
|
||||
|
||||
<Example column>
|
||||
<div class="mb-3"> <label class="form-label">Payment method</label> <div class="form-selectgroup form-selectgroup-boxes d-flex flex-column"> <label class="form-selectgroup-item flex-fill"> <input type="radio" name="form-payment" value="visa" class="form-selectgroup-input" /> <div class="form-selectgroup-label d-flex align-items-center p-3"> <div class="me-3"> <span class="form-selectgroup-check"></span> </div> <div> <span class="payment payment-provider-visa payment-xs me-2"></span> ending in <strong>7998</strong> </div> </div> </label> <label class="form-selectgroup-item flex-fill"> <input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked /> <div class="form-selectgroup-label d-flex align-items-center p-3"> <div class="me-3"> <span class="form-selectgroup-check"></span> </div> <div> <span class="payment payment-provider-mastercard payment-xs me-2"></span> ending in <strong>2807</strong> </div> </div> </label> <label class="form-selectgroup-item flex-fill"> <input type="radio" name="form-payment" value="paypal" class="form-selectgroup-input" /> <div class="form-selectgroup-label d-flex align-items-center p-3"> <div class="me-3"> <span class="form-selectgroup-check"></span> </div> <div> <span class="payment payment-provider-paypal payment-xs me-2"></span> </div> </div> </label> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: Validation states
|
||||
summary: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
|
||||
description: Indicate valid or invalid inputs.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Validation states
|
||||
|
||||
To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect.
|
||||
|
||||
To apply the validation state to the form control, use the `.is-valid` and `.is-invalid` classes.
|
||||
|
||||
<Example>
|
||||
<input type="text" class="form-control is-valid" placeholder="Valid State..." /> <input type="text" class="form-control is-invalid" placeholder="Invalid State..." />
|
||||
</Example>
|
||||
|
||||
## Validation feedback
|
||||
|
||||
To provide users with additional information about the validation state, you can use the `.valid-feedback` and `.invalid-feedback` classes.
|
||||
|
||||
<Example>
|
||||
<div> <label class="form-label required">City</label> <input type="text" class="form-control is-invalid" required /> <div class="invalid-feedback">Please provide a valid city.</div> </div>
|
||||
</Example>
|
||||
|
||||
You can also use the `.valid-feedback` to provide users with positive feedback.
|
||||
|
||||
<Example>
|
||||
<div> <label class="form-label required">City</label> <input type="text" class="form-control is-valid" value="Warsaw" /> <div class="valid-feedback">Looks good!</div> </div>
|
||||
</Example>
|
||||
|
||||
## Subtle validation states
|
||||
|
||||
If you prefer a more subtle manner of informing users of the input control validation state, you can use tick and cross symbols and refrain from using colored control frames and the validation feedback.
|
||||
|
||||
To do this, use the `.is-valid-lite` and `.is-invalid-lite` classes.
|
||||
|
||||
<Example>
|
||||
<input type="text" class="form-control is-valid is-valid-lite" placeholder="Valid State..." /> <input type="text" class="form-control is-invalid is-invalid-lite" placeholder="Invalid State..." />
|
||||
</Example>
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Forms
|
||||
order: 5
|
||||
description: Build and manage web forms.
|
||||
summary: The forms section provides a collection of components and tools for creating user-friendly and accessible forms, enhancing user interaction and improving data collection.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: Browser Support
|
||||
description: Check browser compatibility for Tabler.
|
||||
summary: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
Tabler is fully optimized for all modern browsers, including the latest versions of Chrome, Firefox, Edge, Safari, and Opera. These browsers ensure a seamless and responsive experience, allowing users to enjoy Tabler's advanced UI components without compatibility issues.
|
||||
|
||||
Tabler supports browsers with at least 0.5% global usage, the last 2 major versions of each browser, and excludes dead browsers. The framework introduces modern features like CSS Grid, object fit, and sticky positioning, which enhance design flexibility but may not be fully supported on older browsers.
|
||||
|
||||
For the best experience, we recommend using one of the latest supported browsers to take full advantage of Tabler’s capabilities and design precision.
|
||||
|
||||
## Supported Browsers
|
||||
|
||||
Browser|Minimum Version
|
||||
---|----------
|
||||
<img src="/img/browsers/chrome.svg" width="48" height="48" alt="Chrome Logo"/>|Chrome 120+
|
||||
<img src="/img/browsers/firefox.svg" width="48" height="48" alt="Firefox Logo"/>|Firefox 121+
|
||||
<img src="/img/browsers/safari.svg" width="48" height="48" alt="Safari Logo"/>|Safari 15.6+
|
||||
<img src="/img/browsers/edge.svg" width="48" height="48" alt="Edge Logo"/>|last 2 major versions
|
||||
<img src="/img/browsers/opera.svg" width="48" height="48" alt="Opera Logo"/>|last 2 major versions
|
||||
<img src="/img/browsers/electron.svg" width="48" height="48" alt="Electron Logo"/>|last 2 major versions
|
||||
<img src="/img/browsers/brave.svg" width="48" height="48" alt="Brave Logo"/>|last 2 major versions
|
||||
<img src="/img/browsers/vivaldi.svg" width="48" height="48" alt="Vivaldi Logo"/>|last 2 major versions
|
||||
|
||||
## Mobile Browsers
|
||||
|
||||
Browser|Minimum Version
|
||||
---|----------
|
||||
iOS Safari|iOS 15.6+
|
||||
Samsung Internet|Samsung 23+
|
||||
|
||||
## Unsupported Browsers
|
||||
|
||||
Internet Explorer 11 and earlier versions are not supported. KaiOS 2.5 and earlier versions are also not supported.
|
||||
@@ -0,0 +1,120 @@
|
||||
---
|
||||
title: Customize Tabler
|
||||
summary: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it.
|
||||
description: Adjust fonts, colors, and styles.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Custom Google Font
|
||||
|
||||
To use a custom Google Fonts font in Tabler you must import the font in the `<head>` section of the page. In this example we will use the _Inter_ font:
|
||||
|
||||
```html
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
```
|
||||
|
||||
Now you just need to tell Tabler to use your favorite font:
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--tblr-font-sans-serif: "Inter";
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Custom font sizes
|
||||
|
||||
Tabler exposes typography settings as CSS variables. You can override them by setting variables on `:root` (global) or on any container (scoped).
|
||||
|
||||
### Base font size
|
||||
|
||||
To change the default font size used by body text and many components, override `--tblr-body-font-size`:
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--tblr-body-font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Headings
|
||||
|
||||
Headings use `--tblr-font-size-h1` … `--tblr-font-size-h6` and `--tblr-line-height-h1` … `--tblr-line-height-h6`:
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--tblr-font-size-h1: 2rem;
|
||||
--tblr-line-height-h1: 2.5rem;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Custom primary color
|
||||
|
||||
To change the primary color of Tabler you need to set the `--tblr-primary` variable in your CSS. You can use any color format you like (hex, rgb, hsl, etc). In this example we will use a custom red color:
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--tblr-primary: #f11d46;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
If you use `--tblr-primary` in `rgba()` contexts (or see inconsistent colors), also override `--tblr-primary-rgb` (as comma-separated RGB values) and optionally `--tblr-primary-fg` (text/icon color used on primary backgrounds):
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--tblr-primary: #f11d46;
|
||||
--tblr-primary-rgb: 241, 29, 70;
|
||||
--tblr-primary-fg: #fff;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Other system colors
|
||||
|
||||
Tabler also exposes a few "system" colors you can customize globally:
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--tblr-secondary: #6b7280;
|
||||
--tblr-tertiary: #9ca3af;
|
||||
--tblr-link-color: #066fd1;
|
||||
--tblr-link-hover-color: #045db0;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Gray scale
|
||||
|
||||
You can override the full gray palette (`--tblr-gray-50` … `--tblr-gray-950`) to match your brand:
|
||||
|
||||
```html
|
||||
<style>
|
||||
:root {
|
||||
--tblr-gray-50: #f9fafb;
|
||||
--tblr-gray-100: #f3f4f6;
|
||||
--tblr-gray-200: #e5e7eb;
|
||||
--tblr-gray-300: #d1d5db;
|
||||
--tblr-gray-400: #9ca3af;
|
||||
--tblr-gray-500: #6b7280;
|
||||
--tblr-gray-600: #4b5563;
|
||||
--tblr-gray-700: #374151;
|
||||
--tblr-gray-800: #1f2937;
|
||||
--tblr-gray-900: #111827;
|
||||
--tblr-gray-950: #030712;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: Download
|
||||
summary: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more.
|
||||
description: Get Tabler CSS, JS, and source code.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import TabsPackage from '@shared/components/docs/TabsPackage.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" />
|
||||
```
|
||||
|
||||
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" />
|
||||
```
|
||||
|
||||
## Package managers
|
||||
|
||||
Install Tabler in your Node.js powered apps with the npm package:
|
||||
|
||||
<TabsPackage name="@tabler/core" />
|
||||
|
||||
## 3rd-party Libraries
|
||||
|
||||
Tabler uses other packages to enhance its functionality - for example, charts and input masks. These are not automatically installed to avoid huge dependency trees and need to be installed by using `npm install`. The full list of recommended libraries is available on the
|
||||
[3rd-party Libraries & Resources](/ui/getting-started/references) page. For the most recent list of supported packages, you can also check the [libs.json](https://github.com/tabler/tabler/blob/dev/core/libs.json) file.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: FAQ
|
||||
summary: Answers to the most frequently asked questions.
|
||||
description: Common questions and answers.
|
||||
order: 12
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## I found an issue, what can I do?
|
||||
|
||||
If you think you have found an issue that can only be fixed by the maintainers, feel free to open an issue on [GitHub](https://github.com/tabler/tabler).
|
||||
|
||||
## Will there be a version for Vue or React?
|
||||
|
||||
We are evaluating adding support for Vue 3 and React to all of our components, but it is not a top priority at the moment.
|
||||
|
||||
## Can I use Tabler in open source projects?
|
||||
|
||||
Yes, absolutely.
|
||||
|
||||
## Can I use Tabler in commercial projects?
|
||||
|
||||
Of course! Tabler is under MIT license, so you can confidently use it in commercial projects. However, remember to include a note that your project uses Tabler. You can read about our license here: [License](https://tabler.io/license).
|
||||
|
||||
## Can Tabler be used with WordPress?
|
||||
|
||||
Tabler is an HTML template that can be used for any purpose. However, it is not made to be easily installed on WordPress. It will require some effort and enough knowledge of the WordPress script to do so.
|
||||
|
||||
## How do I get notified of new Tabler versions?
|
||||
|
||||
You may watch [the releases on GitHub](https://github.com/tabler/tabler/releases), follow us on [X](https://x.com/tabler_io) or stay up to date with our [changelog](https://tabler.io/changelog).
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
title: How to Contribute
|
||||
summary: This guide explains how to contribute to Tabler, from setting up a development environment to making and testing changes. It covers essential steps like forking the repository, installing dependencies, and submitting a pull request to help improve Tabler's features and functionality.
|
||||
description: Guide to contributing to Tabler and setting up for development.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.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.
|
||||
|
||||
## Contribution Requirements
|
||||
|
||||
When contributing to Tabler, please adhere to the following guidelines:
|
||||
|
||||
1. By submitting a contribution, you grant a non-exclusive license to the Tabler project to use your contribution in any context deemed appropriate.
|
||||
2. If your contribution includes content from other sources, it must be appropriately licensed under an open source license.
|
||||
3. Contributions must be submitted via GitHub pull requests.
|
||||
4. Ensure your code works in all supported browsers (refer to our [browser support documentation](/ui/getting-started/browser-support)).
|
||||
|
||||
## Installation
|
||||
|
||||
Follow these steps to set up Tabler for development:
|
||||
|
||||
1. Fork the repository: [Guide to forking](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
|
||||
|
||||
2. Clone the repository to your local machine:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/YOUR_USERNAME/tabler.git
|
||||
```
|
||||
|
||||
3. Create a new branch for your changes:
|
||||
|
||||
```bash
|
||||
# Use the project branch naming convention, e.g.:
|
||||
git checkout -b fix/markdown-table-overflow
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
To set up Tabler for development, follow these steps:
|
||||
|
||||
<div class="steps steps-vertical">
|
||||
|
||||
### 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:
|
||||
|
||||
- [Node.js](https://nodejs.org/)
|
||||
- [pnpm](https://pnpm.io/) (we use pnpm over other package managers for faster installation).
|
||||
|
||||
### Install dependencies
|
||||
|
||||
Run the following command to install all required npm packages:
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### Start developer mode
|
||||
|
||||
Use the following command to enable autocompilation with live reload. This will start up the preview website at `http://localhost:3000/`, and the documentation website at `http://localhost:3010/`:
|
||||
|
||||
```bash
|
||||
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>
|
||||
|
||||
## Compiling for Production
|
||||
|
||||
Before submitting a pull request, ensure your changes are properly compiled and tested:
|
||||
|
||||
1. Compile the production files
|
||||
|
||||
```bash
|
||||
pnpm run build
|
||||
```
|
||||
|
||||
2. Test all pages to confirm everything works as expected.
|
||||
|
||||
## Submitting Your Contribution
|
||||
|
||||
Once your changes are ready, create a pull request (PR) on GitHub. Make sure to include a clear and concise description of the changes and their purpose. Thank you for contributing to Tabler!
|
||||
@@ -0,0 +1,17 @@
|
||||
---
|
||||
title: Introduction
|
||||
summary: Free and open-source HTML Dashboard UI Kit built on Bootstrap
|
||||
order: 1
|
||||
description: Overview of Tabler UI Kit.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
## What is Tabler?
|
||||
|
||||
Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern and user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful!
|
||||
|
||||
## What are the benefits?
|
||||
|
||||
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" />
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
title: Installation
|
||||
order: 1
|
||||
summary: Learn how to set up Tabler in your project by creating a basic HTML file, adding Tabler’s CSS and JavaScript, and exploring its powerful components to build responsive and visually stunning web applications.
|
||||
description: "Set up Tabler: HTML, CSS, JS, and build stunning UIs."
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
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!
|
||||
|
||||
<div class="steps steps-vertical">
|
||||
|
||||
### Create a Basic HTML File
|
||||
|
||||
Begin by creating a new `index.html` file in the root of your project. This file will serve as the foundation for your Tabler-based interface. Include the basic HTML structure and a `<meta name="viewport" />` tag for proper responsiveness:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Tabler demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Add Tabler CSS and JavaScript
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
Update your HTML file to include these resources:
|
||||
|
||||
```html
|
||||
<!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" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, Tabler!</h1>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.4.0/dist/js/tabler.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
This setup includes the Tabler CSS and JavaScript via a CDN, providing a responsive and functional base for your project.
|
||||
|
||||
You can also download the files and include them locally in your project. For more information, see the [Download](/ui/getting-started/download) page.
|
||||
|
||||
### Open in Your Browser
|
||||
|
||||
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>
|
||||
|
||||
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.
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Tabler License
|
||||
summary: The MIT license grants you the flexibility to use Tabler in commercial or personal projects, modify its code, and distribute it freely. Ensure you include the required license and copyright notices to stay compliant with the terms.
|
||||
description: "Tabler's MIT license: freedom to use, modify, and share."
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
Tabler is an open-source project licensed under the **MIT license**, giving you extensive freedom to use, modify, and distribute the software. This license ensures that you can adapt Tabler to your needs while maintaining the required attributions. While attribution is not required, it is greatly appreciated to acknowledge the hard work of the developers.
|
||||
|
||||
## 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.
|
||||
- **Distribute** the original or modified code.
|
||||
- **Sublicense**: Integrate Tabler into projects with a more restrictive license.
|
||||
|
||||
## What You Cannot Do with Tabler
|
||||
|
||||
- The software is provided **“as is”**, meaning you cannot hold the authors or contributors liable for any issues, bugs, or damages that may arise from its use.
|
||||
|
||||
## 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.
|
||||
|
||||
For more details, please refer to the full [Tabler License](https://github.com/tabler/tabler/blob/main/LICENSE).
|
||||
|
||||
By adhering to these requirements, you help ensure the continued openness and usability of Tabler for everyone. Thank you for supporting open-source software!
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: 3rd-party Libraries & Resources
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import OpenSourceResources from '@shared/components/docs/OpenSourceResources.astro'
|
||||
|
||||
Tabler uses the following open source resources:
|
||||
|
||||
<OpenSourceResources />
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Tabler UI
|
||||
order: 1
|
||||
description: Free and open source web application UI kit based on Bootstrap
|
||||
summary: Tabler UI is a carefully crafted collection of modern and responsive user interface components. Built on top of Bootstrap, it helps developers create stunning and functional web applications quickly and efficiently.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
# Tabler UI
|
||||
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Layout
|
||||
order: 3
|
||||
description: Structure your UI effectively.
|
||||
summary: The layout section covers essential tools and techniques for structuring content and organizing UI elements, helping you build visually appealing and functional designs.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
@@ -0,0 +1,91 @@
|
||||
---
|
||||
title: Navbars
|
||||
summary: A navbar serves as a central navigation tool, offering users quick and easy access to key sections of a website or application, improving usability and enhancing the overall user experience.
|
||||
description: Create and customize responsive navigation bars with ease.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import NavbarLogo from '@shared/components/NavbarLogo.astro'
|
||||
import Icon from '@shared/components/Icon.astro'
|
||||
|
||||
The navbar is a core component of any website or application, serving as the primary navigation tool. It provides users with quick access to key sections, enhancing usability and improving the overall user experience. Positioned typically at the top of the page, the navbar can contain links, buttons, branding elements,
|
||||
and even interactive components like dropdown menus or search bars.
|
||||
|
||||
With Tabler's utility classes, creating and customizing a responsive navbar is straightforward. Whether you’re building a simple site or a complex dashboard, Tabler’s navbar utilities offer the flexibility to design navigation that aligns perfectly with your project’s requirements.
|
||||
|
||||
## Sample navbar
|
||||
|
||||
To create a navbar, use the `.navbar` class. The navbar is a horizontal bar that contains links to different sections of a website. It is typically placed at the top of the page and is used to provide navigation to the rest of the site.
|
||||
|
||||
```html
|
||||
<header class="navbar navbar-expand-md d-print-none">...</header>
|
||||
```
|
||||
|
||||
The navbar can contain links, buttons, and other elements. You can customize the appearance of the navbar by adding classes to the elements inside it.
|
||||
|
||||
<Example>
|
||||
<header class="navbar navbar-expand-md d-print-none">
|
||||
<div class="container-xl">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<NavbarLogo class="me-3" />
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="nav-link-icon">
|
||||
<Icon name="home" />
|
||||
</span>
|
||||
<span class="nav-link-title"> Home </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="nav-link-icon">
|
||||
<Icon name="checkbox" />
|
||||
</span>
|
||||
<span class="nav-link-title"> Profile </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="nav-link-icon">
|
||||
<Icon name="checkbox" />
|
||||
</span>
|
||||
<span class="nav-link-title"> Settings </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="navbar-nav flex-row order-md-last ms-auto">
|
||||
<div class="nav-item dropdown">
|
||||
<a href="#" class="nav-link d-flex lh-1 text-reset" data-bs-toggle="dropdown" aria-label="Open user menu">
|
||||
<span class="avatar avatar-sm" style="background-image: url(/static/avatars/044m.jpg)"></span>
|
||||
<div class="d-none d-xl-block ps-2">
|
||||
<div>Paweł Kuna</div>
|
||||
<div class="mt-1 small text-secondary">UI Designer</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
|
||||
<a href="#" class="dropdown-item">
|
||||
Status
|
||||
</a>
|
||||
<a href="./profile.html" class="dropdown-item">
|
||||
Profile
|
||||
</a>
|
||||
<a href="#" class="dropdown-item">
|
||||
Feedback
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a href="./settings.html" class="dropdown-item">
|
||||
Settings
|
||||
</a>
|
||||
<a href="./sign-in.html" class="dropdown-item">
|
||||
Logout
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</Example>
|
||||
@@ -0,0 +1,97 @@
|
||||
---
|
||||
title: Navs and tabs
|
||||
summary: This guide covers the basics of creating different types of navigation bars and tabs, including horizontal, vertical, pill-shaped, and underline-styled navs.
|
||||
description: "Essential guide to nav styles: tabs, pills, dropdowns, and more."
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
Navigation bars are essential components of modern web applications, providing users with intuitive ways to navigate between different sections and content. This guide explores various types of navigation bars and tabs that can be easily implemented using predefined classes in HTML and CSS. Each type serves specific use cases, from horizontal and vertical layouts to tabbed interfaces and dropdown menus. By utilizing these examples, developers can enhance the usability and aesthetics of their web projects.
|
||||
|
||||
## Horizontal nav
|
||||
|
||||
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>
|
||||
|
||||
## Vertical nav
|
||||
|
||||
To create a vertical navigation bar, add the `.flex-column` class to the `.nav` element. This arranges the navigation items in a column instead of a row, making it suitable for sidebars or vertical menus.
|
||||
|
||||
```html
|
||||
<ul class="nav flex-column">
|
||||
...
|
||||
</ul>
|
||||
```
|
||||
|
||||
There is an example below to see how the vertical navigation bar is displayed.
|
||||
|
||||
<Example>
|
||||
<ul class="nav flex-column"> <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>
|
||||
|
||||
## Tabs
|
||||
|
||||
To create a tabbed navigation interface, use the `.nav-tabs` class. This is ideal for displaying different content sections within a single interface, where each tab represents a section.
|
||||
|
||||
```html
|
||||
<ul class="nav nav-tabs">
|
||||
...
|
||||
</ul>
|
||||
```
|
||||
|
||||
The example below shows how the tabbed navigation interface is displayed.
|
||||
|
||||
<Example>
|
||||
<ul class="nav nav-tabs"> <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>
|
||||
|
||||
## Pills
|
||||
|
||||
For a pill-shaped navigation style, use the `.nav-pills` class. This is a great choice for a sleek, modern look, especially in the interactive UI components.
|
||||
|
||||
<Example>
|
||||
<ul class="nav nav-pills"> <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>
|
||||
|
||||
## Underline
|
||||
|
||||
To create a navigation bar with an underline effect for active links, use the `.nav-underline` class. This provides a clean and minimalistic style.
|
||||
|
||||
<Example>
|
||||
<ul class="nav nav-underline"> <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>
|
||||
|
||||
## Tabs with Dropdown
|
||||
|
||||
You can enhance tabs by adding dropdown menus using the `.dropdown` class inside a `.nav-tabs` structure. This allows for additional options under a single tab, improving the navigation experience.
|
||||
|
||||
```html
|
||||
<ul class="nav nav-tabs">
|
||||
...
|
||||
<li class="nav-item dropdown">
|
||||
<a
|
||||
class="nav-link dropdown-toggle"
|
||||
data-bs-toggle="dropdown"
|
||||
href="#"
|
||||
role="button"
|
||||
aria-expanded="false"
|
||||
>Dropdown</a
|
||||
>
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</li>
|
||||
...
|
||||
</ul>
|
||||
```
|
||||
|
||||
Example below shows how tabs with dropdown menus are displayed.
|
||||
|
||||
<Example overflow="visible">
|
||||
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Active</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false" >Dropdown</a > <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> <li><hr class="dropdown-divider" /></li> <li><a class="dropdown-item" href="#">Separated link</a></li> </ul> </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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user