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,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>
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Page headers
|
||||
summary: Page heading examples for Tabler
|
||||
description: Examples of Tabler page headers.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
import Icon from '@shared/components/Icon.astro';
|
||||
|
||||
## Simple header
|
||||
|
||||
<Example>
|
||||
<div class="page-header"> <div class="row align-items-center"> <div class="col"> <div class="page-pretitle">Overview</div> <h2 class="page-title">Dashboard</h2> </div> <div class="col-auto ms-auto"> <div class="btn-list"> <span class="d-none d-sm-inline"> <a href="#" class="btn"> New view </a> </span> <a href="#" class="btn btn-primary d-none d-sm-inline-block" data-bs-toggle="modal" data-bs-target="#modal-report" > <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> Create new report </a> <a href="#" class="btn btn-primary d-sm-none btn-icon" data-bs-toggle="modal" data-bs-target="#modal-report" aria-label="Create new report" > <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> </a> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## With meta, avatar and actions
|
||||
|
||||
<Example>
|
||||
<div class="page-header"> <div class="row align-items-center"> <div class="col-auto"> <span class="avatar avatar-md" style="background-image: url(/static/avatars/023m.jpg)" ></span> </div> <div class="col"> <h2 class="page-title">Paweł Kuna</h2> <div class="page-subtitle"> <div class="row"> <div class="col-auto"> <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="3" y1="21" x2="21" y2="21" /> <path d="M5 21v-14l8 -4v18" /> <path d="M19 21v-10l-6 -4" /> <line x1="9" y1="9" x2="9" y2="9.01" /> <line x1="9" y1="12" x2="9" y2="12.01" /> <line x1="9" y1="15" x2="9" y2="15.01" /> <line x1="9" y1="18" x2="9" y2="18.01" /> </svg> <a href="#" class="text-reset">UI Designer at Tabler</a> </div> <div class="col-auto"> <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="9" cy="7" r="4" /> <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /> <path d="M16 3.13a4 4 0 0 1 0 7.75" /> <path d="M21 21v-2a4 4 0 0 0 -3 -3.85" /> </svg> <a href="#" class="text-reset">194 friends</a> </div> <div class="col-auto text-success"> <Icon name="check" /> Verified </div> </div> </div> </div> <div class="col-auto d-none d-md-flex"> <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" /> <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4" /> <line x1="8" y1="9" x2="16" y2="9" /> <line x1="8" y1="13" x2="14" y2="13" /> </svg> Send message </a> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## With meta, search and actions
|
||||
|
||||
<Example>
|
||||
<div class="page-header"> <div class="row align-items-center"> <div class="col"> <h2 class="page-title">Gallery</h2> <div class="text-secondary mt-1">1-12 of 241 photos</div> </div> <div class="col-auto ms-auto d-print-none"> <div class="d-flex"> <div class="me-3 d-none d-md-block"> <div class="input-icon"> <input type="text" class="form-control" placeholder="Search…" /> <span class="input-icon-addon"> <Icon name="search" /> </span> </div> </div> <a href="#" class="btn btn-primary"> <Icon name="plus" /> Add photo </a> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Bordered header
|
||||
|
||||
A page header with a border to separate content is an effective way to organize and present information in a clear and visually appealing way.
|
||||
|
||||
<Example>
|
||||
<div class="page-header page-header-border"> <div class="container-fluid"> <div class="row align-items-center"> <div class="col"> <h2 class="page-title">Improve cards with no border</h2> <div class="text-secondary mt-1"> <a href="#" class="text-reset">#693</a> opened by <a href="#" class="text-body">Jeffie Lewzey</a> in <a href="#" class="text-body">Calendar Page</a> </div> </div> <div class="col-auto"> <div class="btn-list"> <a href="#" class="btn"> <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 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> Edit </a> <a href="#" class="btn d-none d-md-inline-flex"> <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> Subscribe </a> </div> </div> </div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Header with breadcrumb and actions
|
||||
|
||||
A page header with breadcrumb and actions is a common design element found in many websites and applications. The header typically appears at the top of the page and includes a breadcrumb trail, which shows the user the path they have taken to reach the current page. The breadcrumb can be clickable, allowing the user to navigate back to previous pages.
|
||||
|
||||
In addition to the breadcrumb, the header often includes actions or buttons that allow the user to perform common tasks related to the current page. These actions may include things like adding a new item, editing existing content, or deleting items.
|
||||
|
||||
<Example>
|
||||
<div class="page-header"> <div class="row align-items-center mw-100"> <div class="col"> <div class="mb-1"> <ol class="breadcrumb" aria-label="breadcrumbs"> <li class="breadcrumb-item"> <a href="#">Home</a> </li> <li class="breadcrumb-item"> <a href="#">Library</a> </li> <li class="breadcrumb-item active" aria-current="page"> <a href="#">Articles</a> </li> </ol> </div> <h2 class="page-title"> <span class="text-truncate" >Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</span > </h2> </div> <div class="col-auto"> <div class="btn-list"> <a href="#" class="btn d-none d-md-inline-flex"> <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 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> Edit </a> <a href="#" class="btn btn-primary"> Publish </a> </div> </div> </div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,215 @@
|
||||
---
|
||||
title: Page layouts
|
||||
summary: Learn how to build a sample version of the dashboard
|
||||
description: Learn to design dashboard layouts.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
|
||||
Before you start with this section, make sure you have followed the [installation guideline](/ui/getting-started/installation).
|
||||
|
||||
## Sample layout
|
||||
|
||||
To create a sample version of the dashboard, you can use the following code snippet. This code snippet will help you to create a dashboard layout with a header.
|
||||
|
||||
<Example>
|
||||
|
||||
<div class="page">
|
||||
<header class="navbar navbar-expand-sm navbar-light d-print-none">
|
||||
<div class="container-xl">
|
||||
<h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
|
||||
<a href="#">
|
||||
<img
|
||||
src="/static/logo.svg"
|
||||
width="110"
|
||||
height="32"
|
||||
alt="Tabler"
|
||||
class="navbar-brand-image"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
<div class="navbar-nav flex-row order-md-last">
|
||||
<div class="nav-item">
|
||||
<a href="#" class="nav-link d-flex lh-1 text-reset p-0">
|
||||
<span
|
||||
class="avatar avatar-sm"
|
||||
style="background-image: url(/static/avatars/002m.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>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="page-wrapper">
|
||||
<div class="page-body">
|
||||
<div class="container-xl">
|
||||
<div class="row row-deck row-cards">
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Sidebar layout
|
||||
|
||||
To create a sidebar layout, you can use the following code snippet. This code snippet will help you to create a sidebar layout with a header.
|
||||
|
||||
<Example>
|
||||
|
||||
<div class="page">
|
||||
<aside class="navbar navbar-vertical navbar-expand-sm position-absolute" data-bs-theme="dark">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<h1 class="navbar-brand navbar-brand-autodark">
|
||||
<a href="#">
|
||||
<img
|
||||
src="/static/logo-white.svg"
|
||||
width="110"
|
||||
height="32"
|
||||
alt="Tabler"
|
||||
class="navbar-brand-image"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
<div class="collapse navbar-collapse" id="sidebar-menu">
|
||||
<ul class="navbar-nav pt-lg-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="./">
|
||||
<span class="nav-link-title"> Home </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="nav-link-title"> Link 1 </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="nav-link-title"> Link 2 </span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span class="nav-link-title"> Link 3 </span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<div class="page-wrapper">
|
||||
<div class="page-header d-print-none">
|
||||
<div class="container-xl">
|
||||
<div class="row g-2 align-items-center">
|
||||
<div class="col">
|
||||
<h2 class="page-title">Vertical layout</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-body">
|
||||
<div class="container-xl">
|
||||
<div class="row row-deck row-cards">
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12 col-lg-8">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body" style="height: 10rem"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
title: Flags
|
||||
summary: Thanks to the Tabler flags plugin, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.
|
||||
plugin: flags
|
||||
docs-libs: tabler-flags
|
||||
description: Visual representation of countries/languages.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Flags from '@shared/components/docs/Flags.astro'
|
||||
|
||||
## Installation
|
||||
|
||||
This part of Tabler is distributed as a plugin. To enable it you should include `tabler-flags.css` or `tabler-flags.min.css` file in your page.
|
||||
|
||||
You can also include the plugin via CDN:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-flags.min.css" />
|
||||
```
|
||||
|
||||
## Flag
|
||||
|
||||
To create a flag, add the `flag` class to a component and choose the country whose flag you want to use.
|
||||
|
||||
<Example>
|
||||
<span class="flag flag-country-us"></span>
|
||||
</Example>
|
||||
|
||||
## Country flags
|
||||
|
||||
To use the flag of a particular country, add the `flag-country-(country name)` class. For example, to create a flag of Andorra, you should use the following class: `.flag-country-ad`. The full list of countries can be found at the end of this page.
|
||||
|
||||
<Example>
|
||||
<span class="flag flag-country-tg"></span>
|
||||
<span class="flag flag-country-br"></span>
|
||||
<span class="flag flag-country-pt"></span>
|
||||
</Example>
|
||||
|
||||
## Flag sizes
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up or down to different sizes based on what’s needed.
|
||||
|
||||
<Example>
|
||||
<span class="flag flag-xl flag-country-us"></span>
|
||||
<span class="flag flag-lg flag-country-us"></span>
|
||||
<span class="flag flag-md flag-country-us"></span>
|
||||
<span class="flag flag-sm flag-country-us"></span>
|
||||
<span class="flag flag-xs flag-country-us"></span>
|
||||
</Example>
|
||||
|
||||
## Flags list
|
||||
|
||||
The full list of countries can be found below.
|
||||
|
||||
<Flags />
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Plugins
|
||||
order: 7
|
||||
description: Enhance Tabler UI with useful plugins.
|
||||
summary: Tabler plugins extend the functionality of the framework, providing additional tools and features to enhance your projects and streamline the development process.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Payments
|
||||
summary: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more user-friendly.
|
||||
plugin: payments
|
||||
description: User-friendly payment provider icons.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Payments from '@shared/components/docs/Payments.astro'
|
||||
|
||||
## Installation
|
||||
|
||||
This part of Tabler is distributed as a plugin. To enable it you should include `tabler-payments.css` or `tabler-payments.min.css` file in your page.
|
||||
|
||||
You can also include the plugin via CDN:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-payments.min.css" />
|
||||
```
|
||||
|
||||
## Payment
|
||||
|
||||
To create a payment provider icon, add the `payment` class to a component and specify the payment provider with the `payment-provider-*` class. The full list of payment providers can be found at the end of this page.
|
||||
|
||||
<Example>
|
||||
<span class="payment payment-provider-shopify"></span>
|
||||
<span class="payment payment-provider-visa"></span>
|
||||
<span class="payment payment-provider-paypal"></span>
|
||||
</Example>
|
||||
|
||||
## Payment sizes
|
||||
|
||||
Using Bootstrap’s typical naming structure, you can create a standard payment, or scale it up or down to different sizes based on what’s needed.
|
||||
|
||||
<Example>
|
||||
<span class="payment payment-xl payment-provider-shopify"></span>
|
||||
<span class="payment payment-lg payment-provider-visa"></span>
|
||||
<span class="payment payment-md payment-provider-paypal"></span>
|
||||
<span class="payment payment-sm payment-provider-amazon"></span>
|
||||
<span class="payment payment-xs payment-provider-blik"></span>
|
||||
</Example>
|
||||
|
||||
## List of available payment providers
|
||||
|
||||
Select an icon from the list of payment providers. Each icon comes in two color variants - light and dark, so you can choose the one that goes well with your design.
|
||||
|
||||
<Payments />
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Social Icons
|
||||
summary: Social icons are a great way to make your website more engaging and user-friendly. You can use social icons to help users quickly find your social media profiles and connect with you.
|
||||
plugin: socials
|
||||
docs-libs: tabler-socials
|
||||
description: Connect users to your social profiles.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Socials from '@shared/components/docs/Socials.astro'
|
||||
|
||||
## Installation
|
||||
|
||||
This part of Tabler is distributed as a plugin. To enable it you should include `tabler-socials.css` or `tabler-socials.min.css` file in your page.
|
||||
|
||||
You can also include the plugin via CDN:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{{ cdnUrl }}/dist/css/tabler-socials.min.css" />
|
||||
```
|
||||
|
||||
## Social icons
|
||||
|
||||
To create a social icon, add the `social` class to a component and provide the class `social-app-*` with the social app whose icon you want to use.
|
||||
|
||||
<Example>
|
||||
|
||||
<span class="social social-app-facebook"></span>
|
||||
<span class="social social-app-x"></span>
|
||||
<span class="social social-app-instagram"></span>
|
||||
</Example>
|
||||
|
||||
## Social apps list
|
||||
|
||||
Here is a list of all available social apps:
|
||||
|
||||
<Socials />
|
||||
@@ -0,0 +1,165 @@
|
||||
---
|
||||
title: Background patterns
|
||||
summary: Use background pattern utilities to add subtle textures to elements. Combine pattern type, color, and size modifiers for different visual effects.
|
||||
description: Add decorative background patterns with utility classes.
|
||||
added-in: '1.4.0'
|
||||
source-css: 'ui/_patterns.scss'
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import Illustration from '@shared/components/ui/Illustration.astro'
|
||||
import site from '@data/site.json'
|
||||
export const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'lines-vertical', 'grid', 'grid-diagonal', 'blueprint', 'cross-dots', 'circles', 'diagonal-stripes', 'diagonal-stripes-2', 'zigzag', 'vertical-stripes', 'horizontal-stripes']
|
||||
export const colors = Object.entries(site.colors)
|
||||
|
||||
## Overview
|
||||
|
||||
Background pattern utilities let you apply decorative, repeatable textures to elements like cards, sections, and placeholders. Start with a pattern type class, then optionally combine it with color and size modifiers.
|
||||
|
||||
```html
|
||||
<div class="bg-pattern-diagonal"></div>
|
||||
<div class="bg-pattern-grid bg-pattern-primary"></div>
|
||||
<div class="bg-pattern-circles bg-pattern-lg"></div>
|
||||
```
|
||||
|
||||
## Pattern types
|
||||
|
||||
Use one of the available pattern classes to define the shape and direction of the texture:
|
||||
|
||||
<ul>
|
||||
{patterns.map((pattern) => (
|
||||
<li>
|
||||
<code>.bg-pattern-{pattern}</code>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
Here are the available pattern types:
|
||||
|
||||
<Example hideCode>
|
||||
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 g-3">
|
||||
{patterns.map((pattern, i) => {
|
||||
return (
|
||||
<div class="col">
|
||||
<div class={`bg-pattern-${pattern} rounded mb-2`} style={{height: "6rem"}}></div>
|
||||
<code>.bg-pattern-{ pattern }</code>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Example>
|
||||
<Example codeOnly>
|
||||
{patterns.map((pattern) => (
|
||||
<div class={`bg-pattern-${pattern}`}></div>
|
||||
))}
|
||||
</Example>
|
||||
|
||||
## Pattern colors
|
||||
|
||||
Combine any pattern with color modifiers using `.bg-pattern-{color}`. See the [full list of available colors](/ui/base/colors) for all color names.
|
||||
|
||||
<Example hideCode>
|
||||
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
|
||||
|
||||
{colors.map((color) => ( <div class="col"> <div class={`bg-pattern-diagonal-stripes-2 bg-pattern-${color[0]} rounded mb-2`} style={{height: "6rem"}}></div> <code>.bg-pattern-{ color[0] }</code> </div> ))}
|
||||
|
||||
</div>
|
||||
</Example>
|
||||
<Example codeOnly>
|
||||
{colors.map((color) => (
|
||||
<div class={`bg-pattern-diagonal-stripes-2 bg-pattern-${color[0]}`}></div>
|
||||
))}
|
||||
</Example>
|
||||
|
||||
## Transparent pattern utility
|
||||
|
||||
Use `.bg-pattern-transparent` when you need a checkerboard-style transparent background. This utility comes from the generic background utilities and can be combined with spacing and border classes.
|
||||
|
||||
<Example hideCode>
|
||||
<Illustration image="boy-with-key.svg" class="d-block mx-auto mw-100" height={200} />
|
||||
</Example>
|
||||
<Example codeOnly>
|
||||
<div class="bg-pattern-transparent p-4">
|
||||
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Pattern sizes
|
||||
|
||||
Use size utilities to control pattern density:
|
||||
|
||||
- `.bg-pattern-sm`
|
||||
- `.bg-pattern-md`
|
||||
- `.bg-pattern-lg`
|
||||
- `.bg-pattern-xl`
|
||||
|
||||
Look at the following examples to see how the pattern sizes work:
|
||||
|
||||
<Example hideCode>
|
||||
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
|
||||
<div class="col">
|
||||
<div class="bg-pattern-circles bg-pattern-sm rounded mb-2" style="height: 6rem;"></div>
|
||||
<code>.bg-pattern-sm</code>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="bg-pattern-circles bg-pattern-md rounded mb-2" style="height: 6rem;"></div>
|
||||
<code>.bg-pattern-md</code>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="bg-pattern-circles bg-pattern-lg rounded mb-2" style="height: 6rem;"></div>
|
||||
<code>.bg-pattern-lg</code>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="bg-pattern-circles bg-pattern-xl rounded mb-2" style="height: 6rem;"></div>
|
||||
<code>.bg-pattern-xl</code>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
<Example codeOnly>
|
||||
<div class="bg-pattern-circles bg-pattern-sm"></div>
|
||||
<div class="bg-pattern-circles bg-pattern-md"></div>
|
||||
<div class="bg-pattern-circles bg-pattern-lg"></div>
|
||||
<div class="bg-pattern-circles bg-pattern-xl"></div>
|
||||
</Example>
|
||||
|
||||
## Examples
|
||||
|
||||
Look at the following examples to see how background patterns can be used in real layouts.
|
||||
|
||||
### Card with background pattern
|
||||
|
||||
Card with a background pattern in the body can be used to add a decorative touch to the card. This is useful when you want to add a subtle pattern to the card without affecting the readability of the content.
|
||||
|
||||
<Example hideCode>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
Here is example of a card with a background pattern.
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
<Example codeOnly>
|
||||
<div class="bg-pattern-diagonal">
|
||||
<div class="card">
|
||||
...
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
## Accessibility
|
||||
|
||||
Background patterns are decorative and should never reduce content readability:
|
||||
|
||||
- Keep sufficient contrast between text and background.
|
||||
- Prefer placing patterns on containers around text-heavy content, not directly behind long paragraphs.
|
||||
- For callouts and alerts, test color and pattern combinations in both light and dark contexts.
|
||||
|
||||
## Best practices
|
||||
|
||||
- Start with `.bg-pattern-sm` for dense UIs and increase size only when needed.
|
||||
- Avoid stacking multiple decorative backgrounds in the same section.
|
||||
- Use strong pattern colors on small surfaces (headers, badges, callouts), and subtler combinations on large sections.
|
||||
@@ -0,0 +1,107 @@
|
||||
---
|
||||
title: Borders
|
||||
summary: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.
|
||||
description: Style elements with border utilities.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Border direction
|
||||
|
||||
Borders can be applied to specific sides of an element using utility classes. This is particularly useful for styling individual sides of a box, such as highlighting the top border for emphasis or applying a separator between elements. Below are examples of how to set borders for each side of an element.
|
||||
|
||||
```html
|
||||
<div class="border">1</div>
|
||||
<div class="border-top">2</div>
|
||||
<div class="border-end">3</div>
|
||||
<div class="border-bottom">4</div>
|
||||
<div class="border-start">5</div>
|
||||
<div class="border-x">6</div>
|
||||
<div class="border-y">7</div>
|
||||
```
|
||||
|
||||
<Example centered hideCode>
|
||||
<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border" > 1 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-top" > 2 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-end" > 3 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-bottom" > 4 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-start" > 5 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-x" > 6 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-y" > 7 </div>
|
||||
</Example>
|
||||
|
||||
|
||||
## Border size
|
||||
|
||||
Border size utilities allow you to control the thickness of borders, providing flexibility to suit different design needs. You can add no border, a standard border, or a wide border for a more prominent effect. These classes are especially useful for creating visual hierarchy or highlighting specific elements.
|
||||
|
||||
```html
|
||||
<div class="border-0">1</div>
|
||||
<div class="border">2</div>
|
||||
<div class="border-wide">3</div>
|
||||
```
|
||||
|
||||
<Example centered hideCode>
|
||||
<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-0" > 1 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border" > 2 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border-wide" > 3 </div>
|
||||
</Example>
|
||||
|
||||
## Remove border
|
||||
|
||||
If you want to selectively remove borders from specific sides of an element, you can use border removal utilities. This feature simplifies styling tasks, such as creating a seamless connection between elements or achieving minimalistic designs.
|
||||
|
||||
```html
|
||||
<div class="border border-top-0">1</div>
|
||||
<div class="border border-end-0">2</div>
|
||||
<div class="border border-bottom-0">3</div>
|
||||
<div class="border border-start-0">4</div>
|
||||
<div class="border border-x-0">5</div>
|
||||
<div class="border border-y-0">6</div>
|
||||
```
|
||||
|
||||
<Example centered hideCode>
|
||||
<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-top-0" > 1 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-end-0" > 2 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-bottom-0" > 3 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-start-0" > 4 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-x-0" > 5 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-y-0" > 6 </div>
|
||||
</Example>
|
||||
|
||||
|
||||
## Border color
|
||||
|
||||
Customizing the border color helps to enhance the visual appeal and consistency of your design. With utility classes, you can easily apply specific colors to borders, allowing for greater flexibility in creating visually distinct sections.
|
||||
|
||||
```html
|
||||
<div class="border border-primary">1</div>
|
||||
<div class="border border-secondary">2</div>
|
||||
<div class="border border-success">3</div>
|
||||
<div class="border border-warning">4</div>
|
||||
<div class="border border-danger">5</div>
|
||||
<div class="border border-info">6</div>
|
||||
<div class="border border-dark">7</div>
|
||||
<div class="border border-light">8</div>
|
||||
```
|
||||
|
||||
<Example centered hideCode>
|
||||
<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-primary" > 1 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-secondary" > 2 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-success" > 3 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-warning" > 4 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-danger" > 5 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-info" > 6 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-dark" > 7 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border border-light" > 8 </div>
|
||||
</Example>
|
||||
|
||||
## Border radius
|
||||
|
||||
Adding border radius gives elements smooth, rounded edges, which can make designs feel more modern and approachable. You can choose from various levels of rounding, including full circles, using the available utility classes.
|
||||
|
||||
```html
|
||||
<div class="border rounded-0">1</div>
|
||||
<div class="border rounded">2</div>
|
||||
<div class="border rounded-1">3</div>
|
||||
<div class="border rounded-2">4</div>
|
||||
<div class="border rounded-3">5</div>
|
||||
<div class="border rounded-circle">6</div>
|
||||
```
|
||||
|
||||
<Example centered hideCode>
|
||||
<div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-0" > 1 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded" > 2 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-1" > 3 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-2" > 4 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-3" > 5 </div> <div class="d-flex align-items-center justify-content-center text-secondary w-6 h-6 bg-light border rounded-circle" > 6 </div>
|
||||
</Example>
|
||||
|
||||
|
||||
## Border opacity
|
||||
|
||||
You can adjust the opacity of borders to create subtle visual effects or to blend elements seamlessly into the background. By using border opacity utilities, you can control the transparency of borders, allowing for more creative and visually appealing designs. To change the opacity of a border, add the `border-opacity-*` class to the element.
|
||||
|
||||
```html
|
||||
<div class="border border-success border-opacity-50">This is 50% opacity success border</div>
|
||||
```
|
||||
|
||||
<Example hideCode>
|
||||
<div class="border border-success p-2 mb-2">This is default success border</div> <div class="border border-success p-2 mb-2 border-opacity-75"> This is 75% opacity success border </div> <div class="border border-success p-2 mb-2 border-opacity-50"> This is 50% opacity success border </div> <div class="border border-success p-2 mb-2 border-opacity-25"> This is 25% opacity success border </div> <div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>
|
||||
</Example>
|
||||
@@ -0,0 +1,51 @@
|
||||
---
|
||||
title: Cursors
|
||||
summary: You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed.
|
||||
description: Custom cursors for enhanced interaction.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Cursor utilities
|
||||
|
||||
Use one of the available cursor utilities depending on the action you want to indicate.
|
||||
|
||||
- `.cursor-auto`- the cursor style depends on what's inside a given element
|
||||
- `.cursor-pointer` - a pointing cursor, used to show that an element is clickable
|
||||
- `.cursor-move` - a cursor which shows that a given element can be moved
|
||||
- `.cursor-not-allowed` - a cursor which shows that a user is not allowed to perform an action on an element
|
||||
- `.cursor-zoom-in` - a cursor which shows that a user can zoom in
|
||||
- `.cursor-zoom-out` - a cursor which shows that a user can zoom out
|
||||
- `.cursor-default` - the default cursor
|
||||
- `.cursor-none` - no cursor
|
||||
- `.cursor-help` - a cursor which shows that help information is available
|
||||
- `.cursor-progress` - a cursor which shows that an action is in progress
|
||||
- `.cursor-wait` - a cursor which shows that a user cannot interact with the element because it is busy
|
||||
- `.cursor-text` - a cursor which shows that a user can type
|
||||
- `.cursor-v-text` - a cursor which shows that a user can type in a vertical text input
|
||||
- `.cursor-grab` - a cursor which shows that a user can grab an element
|
||||
- `.cursor-grabbing` - a cursor which shows that a user is grabbing an element
|
||||
|
||||
```html
|
||||
<div class="cursor-auto">auto</div>
|
||||
<div class="cursor-pointer">pointer</div>
|
||||
<div class="cursor-move">move</div>
|
||||
<div class="cursor-not-allowed">not-allowed</div>
|
||||
<div class="cursor-zoom-in">zoom-in</div>
|
||||
<div class="cursor-zoom-out">zoom-out</div>
|
||||
<div class="cursor-default">default</div>
|
||||
<div class="cursor-none">none</div>
|
||||
<div class="cursor-help">help</div>
|
||||
<div class="cursor-progress">progress</div>
|
||||
<div class="cursor-wait">wait</div>
|
||||
<div class="cursor-text">text</div>
|
||||
<div class="cursor-v-text">vertical-text</div>
|
||||
<div class="cursor-grab">grab</div>
|
||||
<div class="cursor-grabbing">grabbing</div>
|
||||
```
|
||||
|
||||
The results can be seen in the example below.
|
||||
|
||||
<Example hideCode>
|
||||
<div class="row g-4 row-cols-4"> <div><div class="cursor-auto bg-surface-secondary p-3">auto</div></div> <div><div class="cursor-pointer bg-surface-secondary p-3">pointer</div></div> <div><div class="cursor-move bg-surface-secondary p-3">move</div></div> <div><div class="cursor-not-allowed bg-surface-secondary p-3">not-allowed</div></div> <div><div class="cursor-zoom-in bg-surface-secondary p-3">zoom-in</div></div> <div><div class="cursor-zoom-out bg-surface-secondary p-3">zoom-out</div></div> <div><div class="cursor-default bg-surface-secondary p-3">default</div></div> <div><div class="cursor-none bg-surface-secondary p-3">none</div></div> <div><div class="cursor-help bg-surface-secondary p-3">help</div></div> <div><div class="cursor-progress bg-surface-secondary p-3">progress</div></div> <div><div class="cursor-wait bg-surface-secondary p-3">wait</div></div> <div><div class="cursor-text bg-surface-secondary p-3">text</div></div> <div><div class="cursor-v-text bg-surface-secondary p-3">vertical-text</div></div> <div><div class="cursor-grab bg-surface-secondary p-3">grab</div></div> <div><div class="cursor-grabbing bg-surface-secondary p-3">grabbing</div></div> </div>
|
||||
</Example>
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
title: Gradients
|
||||
summary: Use gradient utilities to build directional color backgrounds with from, via, and to color stops.
|
||||
description: Create directional gradients with utility classes.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
|
||||
import Example from '@shared/components/docs/Example.astro'
|
||||
import site from '@data/site.json'
|
||||
export const colors = [...Object.keys(site.colors), 'white', 'transparent']
|
||||
|
||||
## Default gradient
|
||||
|
||||
Use `.bg-gradient` to enable gradient background rendering on an element. Then combine it with color stop utilities to define the final look.
|
||||
|
||||
```html
|
||||
<div class="bg-gradient bg-gradient-from-primary bg-gradient-to-transparent"></div>
|
||||
```
|
||||
|
||||
<Example>
|
||||
<div class="border rounded bg-gradient bg-gradient-from-primary bg-gradient-to-transparent p-5"></div>
|
||||
</Example>
|
||||
|
||||
## Gradient directions
|
||||
|
||||
Use direction utilities to control gradient flow:
|
||||
|
||||
- `.bg-gradient-to-t`
|
||||
- `.bg-gradient-to-te`
|
||||
- `.bg-gradient-to-e`
|
||||
- `.bg-gradient-to-be`
|
||||
- `.bg-gradient-to-b`
|
||||
- `.bg-gradient-to-bs`
|
||||
- `.bg-gradient-to-s`
|
||||
- `.bg-gradient-to-ts`
|
||||
|
||||
<Example hideCode>
|
||||
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-t p-4"></div><code>.bg-gradient-to-t</code></div>
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-te p-4"></div><code>.bg-gradient-to-te</code></div>
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-e p-4"></div><code>.bg-gradient-to-e</code></div>
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-be p-4"></div><code>.bg-gradient-to-be</code></div>
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-b p-4"></div><code>.bg-gradient-to-b</code></div>
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-bs p-4"></div><code>.bg-gradient-to-bs</code></div>
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-s p-4"></div><code>.bg-gradient-to-s</code></div>
|
||||
<div class="col"><div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-ts p-4"></div><code>.bg-gradient-to-ts</code></div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
<Example codeOnly>
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-t">...</div>
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-te">...</div>
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-e">...</div>
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-be">...</div>
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-b">...</div>
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-bs">...</div>
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-s">...</div>
|
||||
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-ts">...</div>
|
||||
</Example>
|
||||
|
||||
## Gradient color stops
|
||||
|
||||
Use color stop utilities to control where a gradient starts, transitions, and ends. You can choose any color from [full list of available colors](/ui/base/colors).
|
||||
|
||||
Here is a list of classes:
|
||||
|
||||
- `.bg-gradient-from-{color}`
|
||||
- `.bg-gradient-via-{color}` (optional middle stop for smoother blending)
|
||||
- `.bg-gradient-to-{color}`
|
||||
|
||||
<Example hideCode>
|
||||
<div class="row row-cols-1 row-cols-lg-2 g-3">
|
||||
<div class="col">
|
||||
<div class="border rounded bg-gradient bg-gradient-from-purple bg-gradient-to-transparent p-5"></div>
|
||||
<code>.bg-gradient-from-purple .bg-gradient-to-transparent</code>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="border rounded bg-gradient bg-gradient-from-pink bg-gradient-via-orange bg-gradient-to-yellow p-5"></div>
|
||||
<code>.bg-gradient-from-pink .bg-gradient-via-orange .bg-gradient-to-yellow</code>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
<Example codeOnly>
|
||||
<div class="bg-gradient bg-gradient-from-purple bg-gradient-to-transparent">...</div>
|
||||
<div class="bg-gradient bg-gradient-from-pink bg-gradient-via-orange bg-gradient-to-yellow">...</div>
|
||||
</Example>
|
||||
|
||||
## Available colors
|
||||
|
||||
You can use any project color token with `from`, `via`, and `to` utilities. See the [full list of available colors](/ui/base/colors) for all color names.
|
||||
|
||||
<Example hideCode>
|
||||
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
|
||||
{colors.map((color) => (
|
||||
<div class="col">
|
||||
<div class={`border rounded bg-gradient bg-gradient-from-${color} bg-gradient-to-transparent mb-2 p-4`}></div>
|
||||
<code>.bg-gradient-from-{ color }</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Example>
|
||||
<Example codeOnly>
|
||||
{colors.map((color) => (
|
||||
<div class={`bg-gradient bg-gradient-from-${color} bg-gradient-to-transparent`}>...</div>
|
||||
))}
|
||||
</Example>
|
||||
|
||||
## Examples
|
||||
|
||||
### Card header gradient
|
||||
|
||||
Use gradient utilities on card sections to highlight key content areas.
|
||||
|
||||
<Example>
|
||||
<div class="card">
|
||||
<div class="card-body bg-gradient bg-gradient-from-indigo bg-gradient-to-transparent rounded-top">
|
||||
<h3 class="card-title mb-1">Performance</h3>
|
||||
<p class="text-secondary mb-0">Weekly trend overview</p>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<p class="mb-0">Card content</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
### Badge-like highlight
|
||||
|
||||
Use short gradients on compact UI elements for subtle emphasis.
|
||||
|
||||
<Example>
|
||||
|
||||
<div class="d-flex gap-2 flex-wrap">
|
||||
<span class="badge bg-gradient bg-gradient-from-green bg-gradient-to-teal">Success trend</span>
|
||||
<span class="badge bg-gradient bg-gradient-from-orange bg-gradient-to-red">Warning trend</span>
|
||||
<span class="badge bg-gradient bg-gradient-from-blue bg-gradient-to-purple">New feature</span>
|
||||
</div>
|
||||
</Example>
|
||||
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Utilities
|
||||
order: 6
|
||||
description: Helper classes for layout and design.
|
||||
summary: The utilities section provides a collection of helper classes for layout and design, helping you build visually appealing and functional designs.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
title: Interactions
|
||||
summary: Utility classes that change how users interact with contents of a website.
|
||||
description: Modify user interactions efficiently.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
## Text selection
|
||||
|
||||
Change the way in which the content is selected when the user interacts with it.
|
||||
|
||||
<Example>
|
||||
<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p> <p class="user-select-auto">This paragraph has default select behavior.</p> <p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
|
||||
</Example>
|
||||
|
||||
## Pointer events
|
||||
|
||||
Tabler provides `.pe-none` and `.pe-auto` classes to prevent or add element interactions.
|
||||
|
||||
<Example>
|
||||
<div> <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked. </div> <div><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</div>
|
||||
</Example>
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
title: Margins
|
||||
summary: Use margin utilities to control the space between elements.
|
||||
description: Control the space between elements with margin utilities.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
Margin utilities allow you to control the space between elements, providing flexibility to suit different design needs. These utilities are especially useful for creating spacing between components or aligning them consistently. Below are examples of how to use margin utilities for various directions and sizes.
|
||||
|
||||
|
||||
### Margin size
|
||||
|
||||
In the table below you can see the available margin sizes.
|
||||
|
||||
Name|Value
|
||||
-|-
|
||||
0|0
|
||||
1|0.25rem
|
||||
2|0.5rem
|
||||
3|1rem
|
||||
4|1.5rem
|
||||
5|2rem
|
||||
6|3rem
|
||||
7|5rem
|
||||
8|8rem
|
||||
|
||||
|
||||
### Margin
|
||||
|
||||
Use the `.m-*` utilities to control the margin of an element. Margin utilities are used to create consistent spacing around an element, ensuring that the layout is visually balanced.
|
||||
|
||||
<Example>
|
||||
<div class="d-flex"> <div class="bg-purple-lt"> <div class="px-3 py-2 m-0 bg-purple rounded text-white font-monospace">.m-0</div> </div> </div> <div class="d-flex"> <div class="bg-purple-lt"> <div class="px-3 py-2 m-4 bg-purple rounded text-white font-monospace">.m-4</div> </div> </div> <div class="d-flex"> <div class="bg-purple-lt"> <div class="px-3 py-2 m-8 bg-purple rounded text-white font-monospace">.m-8</div> </div> </div>
|
||||
</Example>
|
||||
|
||||
### Start margin
|
||||
|
||||
Start margins control the spacing to the left of an element, helping to create consistent horizontal gaps between elements. Start margin class names are prefixed with `ms-`.
|
||||
|
||||
```html
|
||||
<div class="ms-4">...</div>
|
||||
```
|
||||
|
||||
<Example>
|
||||
<div class="d-flex"> <div class="bg-red-lt"> <div class="px-3 py-2 ms-0 bg-red rounded text-white font-monospace">.ms-0</div> </div> </div> <div class="d-flex"> <div class="bg-red-lt"> <div class="px-3 py-2 ms-4 bg-red rounded text-white font-monospace">.ms-4</div> </div> </div> <div class="d-flex"> <div class="bg-red-lt"> <div class="px-3 py-2 ms-8 bg-red rounded text-white font-monospace">.ms-8</div> </div> </div>
|
||||
</Example>
|
||||
|
||||
### End margin
|
||||
|
||||
End margins control the spacing on the right side of an element. These utilities are helpful for creating visual separation between elements that flow horizontally. End margin class names are prefixed with `me-`.
|
||||
|
||||
```html
|
||||
<div class="me-4">...</div>
|
||||
```
|
||||
|
||||
<Example>
|
||||
<div class="d-flex"> <div class="bg-orange-lt"> <div class="px-3 py-2 ms-0 bg-orange rounded text-white font-monospace">.me-0</div> </div> </div> <div class="d-flex"> <div class="bg-orange-lt"> <div class="px-3 py-2 me-4 bg-orange rounded text-white font-monospace">.me-4</div> </div> </div> <div class="d-flex"> <div class="bg-orange-lt"> <div class="px-3 py-2 me-8 bg-orange rounded text-white font-monospace">.me-8</div> </div> </div>
|
||||
</Example>
|
||||
|
||||
### Top margin
|
||||
|
||||
Top margins define the spacing above an element. This is useful for separating stacked components or creating vertical spacing between sections. Top margin class names are prefixed with `mt-`.
|
||||
|
||||
```html
|
||||
<div class="mt-4">...</div>
|
||||
```
|
||||
|
||||
<Example>
|
||||
<div class="d-flex"> <div class="bg-yellow-lt"> <div class="px-3 py-2 mt-0 bg-yellow rounded text-white font-monospace">.mt-0</div> </div> </div> <div class="d-flex"> <div class="bg-yellow-lt"> <div class="px-3 py-2 mt-4 bg-yellow rounded text-white font-monospace">.mt-4</div> </div> </div> <div class="d-flex"> <div class="bg-yellow-lt"> <div class="px-3 py-2 mt-8 bg-yellow rounded text-white font-monospace">.mt-8</div> </div> </div>
|
||||
</Example>
|
||||
|
||||
### Bottom margin
|
||||
|
||||
Bottom margins control the spacing below an element, helping to create consistent vertical gaps between stacked elements. Bottom margin class names are prefixed with `mb-`.
|
||||
|
||||
```html
|
||||
<div class="mb-4">...</div>
|
||||
```
|
||||
|
||||
<Example>
|
||||
<div class="d-flex"> <div class="bg-lime-lt"> <div class="px-3 py-2 mb-0 bg-lime rounded text-white font-monospace">.mb-0</div> </div> </div> <div class="d-flex"> <div class="bg-lime-lt"> <div class="px-3 py-2 mb-4 bg-lime rounded text-white font-monospace">.mb-4</div> </div> </div> <div class="d-flex"> <div class="bg-lime-lt"> <div class="px-3 py-2 mb-8 bg-lime rounded text-white font-monospace">.mb-8</div> </div> </div>
|
||||
</Example>
|
||||
|
||||
### Horizontal margin
|
||||
|
||||
Use the `mx-*` utilities to control the horizontal margin of an element. Horizontal margin utilities are used to create consistent spacing between elements that flow horizontally.
|
||||
|
||||
```html
|
||||
<div class="mx-4">...</div>
|
||||
```
|
||||
|
||||
<Example>
|
||||
<div class="d-flex"> <div class="bg-azure-lt"> <div class="px-3 py-2 mx-0 bg-azure rounded text-white font-monospace">.mx-0</div> </div> </div> <div class="d-flex"> <div class="bg-azure-lt"> <div class="px-3 py-2 mx-4 bg-azure rounded text-white font-monospace">.mx-4</div> </div> </div> <div class="d-flex"> <div class="bg-azure-lt"> <div class="px-3 py-2 mx-8 bg-azure rounded text-white font-monospace">.mx-8</div> </div> </div>
|
||||
</Example>
|
||||
|
||||
|
||||
### Vertical margin
|
||||
|
||||
Use the `my-*` utilities to control the vertical margin of an element. Vertical margin utilities are used to create consistent spacing between elements that flow vertically.
|
||||
|
||||
```html
|
||||
<div class="my-4">...</div>
|
||||
```
|
||||
|
||||
<Example>
|
||||
<div class="d-flex"> <div class="bg-blue-lt"> <div class="px-3 py-2 my-0 bg-blue rounded text-white font-monospace">.my-0</div> </div> </div> <div class="d-flex"> <div class="bg-blue-lt"> <div class="px-3 py-2 my-4 bg-blue rounded text-white font-monospace">.my-4</div> </div> </div> <div class="d-flex"> <div class="bg-blue-lt"> <div class="px-3 py-2 my-8 bg-blue rounded text-white font-monospace">.my-8</div> </div> </div>
|
||||
</Example>
|
||||
|
||||
## Horizontal centering
|
||||
|
||||
Additionally, Tabler also includes an `.mx-auto` class for horizontally centering fixed-width block level content — that is, content that has `display: block` and a width set — by setting the horizontal margins to `auto`.
|
||||
|
||||
```html
|
||||
<div class="mx-auto">...</div>
|
||||
```
|
||||
|
||||
<Example>
|
||||
<div class="bg-teal-lt w-100 d-flex"> <div class="px-3 py-2 mx-auto bg-teal rounded text-white font-monospace">.mx-auto</div> </div>
|
||||
</Example>
|
||||
|
||||
## Gap
|
||||
|
||||
Use the `.gap-*` utilities to control the space between elements in a grid layout. The gap utilities are used to create consistent spacing between grid items, ensuring that the layout is visually balanced.
|
||||
|
||||
```html
|
||||
<div class="d-grid gap-6">...</div>
|
||||
```
|
||||
|
||||
```html example
|
||||
<div class="d-grid gap-6 bg-indigo-lt">
|
||||
<div class="px-3 py-2 bg-indigo text-white rounded">Grid item 1</div>
|
||||
<div class="px-3 py-2 bg-indigo text-white rounded">Grid item 2</div>
|
||||
<div class="px-3 py-2 bg-indigo text-white rounded">Grid item 3</div>
|
||||
</div>
|
||||
```
|
||||
@@ -0,0 +1,25 @@
|
||||
---
|
||||
title: Vertical align
|
||||
description: Quickly and easily align elements vertically with utility classes.
|
||||
summary: Easily modify the vertical alignment of elements such as inline, inline-block, inline-table, and table-cell to ensure proper positioning and alignment within their parent containers, allowing for more precise control over your layout and design.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed.
|
||||
|
||||
## Inline elements
|
||||
|
||||
Use vertical alignment utilities to align inline-level elements relative to their surrounding text or baseline. These classes are particularly useful for aligning small inline elements like icons or badges alongside text.
|
||||
|
||||
<Example>
|
||||
<div> <span class="align-baseline">baseline</span> <span class="align-top">top</span> <span class="align-middle">middle</span> <span class="align-bottom">bottom</span> <span class="align-text-top">text-top</span> <span class="align-text-bottom">text-bottom</span> </div>
|
||||
</Example>
|
||||
|
||||
## Table cells
|
||||
|
||||
Vertical alignment utilities are also applicable to table cells, allowing you to control the alignment of content within a cell. This is especially useful for creating well-structured and visually appealing tables where the content aligns consistently across rows and columns.
|
||||
|
||||
<Example>
|
||||
<table style="height: 100px" class="bg-surface"> <tbody> <tr> <td class="align-baseline border">baseline</td> <td class="align-top border">top</td> <td class="align-middle border">middle</td> <td class="align-bottom border">bottom</td> <td class="align-text-top border">text-top</td> <td class="align-text-bottom border">text-bottom</td> </tr> </tbody> </table>
|
||||
</Example>
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: Visually hidden
|
||||
summary: Use these helpers to visually hide elements but keep them accessible to assistive technologies.
|
||||
layout: '@shared/layouts/DocsMdxLayout.astro'
|
||||
---
|
||||
import Example from '@shared/components/docs/Example.astro';
|
||||
|
||||
Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container – thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus.
|
||||
|
||||
```html
|
||||
<h2 class="visually-hidden">Title for screen readers</h2>
|
||||
<a class="visually-hidden-focusable" href="#content">Skip to main content</a>
|
||||
<div class="visually-hidden-focusable">A container with a <a href="#">focusable element</a>.</div>
|
||||
```
|
||||
Reference in New Issue
Block a user