Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-05 01:44:41 +04:00
Code Issues Projects Releases Wiki Activity

Use shared Astro UI components across preview pages (#2724)

Browse Source
This commit is contained in:
Paweł Kuna
2026-07-30 13:53:33 +02:00
committed by GitHub
parent bc24b3ada8
commit 4ea449df1b
390 changed files with 3190 additions and 3127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/pages/ui/base/prose.mdx
+6 -5
View File
@@ -6,6 +6,7 @@ description: Long-form content styles for markdown-like HTML.
layout: '@shared/layouts/DocsMdxLayout.astro'
---
import Example from '@shared/components/docs/Example.astro';
import Prose from '@shared/components/ui/Prose.astro';
## How it works
@@ -21,7 +22,7 @@ Wrap your content in the `.prose` class to apply long-form typography styles to
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>
<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> </Prose>
</Example>
## Inline HTML elements
@@ -47,7 +48,7 @@ Headings help readers scan long documents quickly. Use them to create a clear hi
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) &#123; return a + b; &#125; </code></pre> </div>
<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) &#123; return a + b; &#125; </code></pre> </Prose>
</Example>
### Lists
@@ -55,7 +56,7 @@ Inline code is available with `<code>`. For multi-line snippets, use `<pre><code
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>
<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> </Prose>
</Example>
### Images
@@ -63,7 +64,7 @@ Use ordered lists for steps and unordered lists for related points.
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>
<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" /> </Prose>
</Example>
### Tables
@@ -71,5 +72,5 @@ Images should support the text and provide useful context.
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>
<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> </Prose>
</Example>
docs/pages/ui/base/typography.mdx
+2 -1
View File
@@ -6,6 +6,7 @@ description: Role of typography in interface design.
layout: '@shared/layouts/DocsMdxLayout.astro'
---
import Example from '@shared/components/docs/Example.astro';
import Prose from '@shared/components/ui/Prose.astro';
## Headings
@@ -114,5 +115,5 @@ To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd
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>
<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> </Prose>
</Example>
docs/pages/ui/components/accordion.mdx
+1 -1
View File
@@ -5,7 +5,7 @@ description: Build collapsible content sections with accordion classes and modif
layout: '@shared/layouts/DocsMdxLayout.astro'
---
import Example from '@shared/components/docs/Example.astro';
import Icon from '@shared/components/Icon.astro';
import Icon from '@shared/components/ui/Icon.astro';
## Overview
docs/pages/ui/components/alert.mdx
+1 -1
View File
@@ -6,7 +6,7 @@ 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';
import Alert from '@shared/components/ui/Alert.astro';
## Default markup
docs/pages/ui/components/avatar.mdx
+5 -4
View File
@@ -5,7 +5,8 @@ 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';
import Icon from '@shared/components/ui/Icon.astro';
import AvatarList from '@shared/components/ui/AvatarList.astro';
## Default markup
@@ -76,7 +77,7 @@ Change the shape of an avatar with the default Bootstrap image classes. You can
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>
<AvatarList> <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> </AvatarList>
</Example>
## Stacked list
@@ -84,9 +85,9 @@ Create a list of avatars within one parent container.
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>
<AvatarList stacked={true}> <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> </AvatarList>
</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>
<AvatarList stacked={true}> <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> </AvatarList>
</Example>
docs/pages/ui/components/badge.mdx
+2 -1
View File
@@ -5,6 +5,7 @@ description: Add extra information with a badge.
bootstrapLink: components/badge/
layout: '@shared/layouts/DocsMdxLayout.astro'
---
import BadgesList from '@shared/components/ui/BadgesList.astro';
import Example from '@shared/components/docs/Example.astro';
import Badge from '@shared/components/ui/Badge.astro';
import site from '@data/site.json';
@@ -16,7 +17,7 @@ export const colors = Object.entries(site.colors);
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>
<BadgesList>{colors.map(([key, val]) => <Badge color={key} text={val.title} />)}</BadgesList>
</Example>
## Headings
docs/pages/ui/components/breadcrumb.mdx
+1 -1
View File
@@ -7,7 +7,7 @@ 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';
import Icon from '@shared/components/ui/Icon.astro';
## Default markup
docs/pages/ui/components/button.mdx
+5 -4
View File
@@ -5,8 +5,9 @@ bootstrapLink: components/buttons/
description: A customizable button for user actions.
layout: '@shared/layouts/DocsMdxLayout.astro'
---
import ButtonGroup from '@shared/components/ui/ButtonGroup.astro';
import Example from '@shared/components/docs/Example.astro';
import Icon from '@shared/components/Icon.astro';
import Icon from '@shared/components/ui/Icon.astro';
## Button tag
@@ -272,13 +273,13 @@ Use the `.btn-actions` container to group multiple action buttons together. This
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>
<ButtonGroup> <button type="button" class="btn">Left</button> <button type="button" class="btn">Middle</button> <button type="button" class="btn">Right</button> </ButtonGroup>
</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>
<ButtonGroup> <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> </ButtonGroup>
</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>
<ButtonGroup vertical={true}> <button type="button" class="btn">Top</button> <button type="button" class="btn">Middle</button> <button type="button" class="btn">Bottom</button> </ButtonGroup>
</Example>
docs/pages/ui/components/card.mdx
+1 -1
View File
@@ -6,7 +6,7 @@ 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';
import Icon from '@shared/components/ui/Icon.astro';
## Default card
docs/pages/ui/components/chart.mdx
+1 -1
View File
@@ -7,7 +7,7 @@ layout: '@shared/layouts/DocsMdxLayout.astro'
---
import Example from '@shared/components/docs/Example.astro'
import Chart from '@shared/components/Chart.astro'
import Chart from '@shared/components/ui/Chart.astro'
To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
docs/pages/ui/components/icon.mdx
+1 -1
View File
@@ -6,7 +6,7 @@ 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';
import Icon from '@shared/components/ui/Icon.astro';
If you need to add icons to your website, you can use the [Tabler Icons library](https://tabler.io/icons). It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects.
docs/pages/ui/components/modal.mdx
+1 -1
View File
@@ -5,7 +5,7 @@ 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';
import Icon from '@shared/components/ui/Icon.astro';
Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `<body>` so that modal content scrolls instead.
docs/pages/ui/components/ribbon.mdx
+1 -1
View File
@@ -5,7 +5,7 @@ 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';
import Icon from '@shared/components/ui/Icon.astro';
## Default markup
docs/pages/ui/components/segmented-control.mdx
+1 -1
View File
@@ -4,7 +4,7 @@ summary: A segmented control is a set of two or more segments, each of which fun
layout: '@shared/layouts/DocsMdxLayout.astro'
---
import Example from '@shared/components/docs/Example.astro';
import Icon from '@shared/components/Icon.astro';
import Icon from '@shared/components/ui/Icon.astro';
To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links.
docs/pages/ui/components/star-rating.mdx
+1 -1
View File
@@ -5,7 +5,7 @@ description: Build star rating UI with stars classes and data-star-rating state
layout: '@shared/layouts/DocsMdxLayout.astro'
---
import Example from '@shared/components/docs/Example.astro';
import Icon from '@shared/components/Icon.astro';
import Icon from '@shared/components/ui/Icon.astro';
## Overview
docs/pages/ui/components/switch-icon.mdx
+1 -1
View File
@@ -6,7 +6,7 @@ description: Transition between two icons smoothly.
layout: '@shared/layouts/DocsMdxLayout.astro'
---
import Example from '@shared/components/docs/Example.astro';
import Icon from '@shared/components/Icon.astro';
import Icon from '@shared/components/ui/Icon.astro';
## Default markup
docs/pages/ui/components/tab.mdx
+1 -1
View File
@@ -6,7 +6,7 @@ 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';
import Icon from '@shared/components/ui/Icon.astro';
## Default markup
docs/pages/ui/components/tag.mdx
+4 -3
View File
@@ -6,8 +6,9 @@ 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 Icon from '@shared/components/ui/Icon.astro';
import Payment from '@shared/components/ui/Payment.astro';
import TagsList from '@shared/components/ui/TagsList.astro';
## Overview
@@ -32,7 +33,7 @@ Use `.tag-icon` for a leading icon inside a tag. The icon uses compact size and
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>
<TagsList> <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> </TagsList>
</Example>
### With badge
@@ -58,7 +59,7 @@ Use `.tag-check` on a checkbox when the tag should be selectable. This variant i
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>
<TagsList> <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> </TagsList>
</Example>
## Accessibility
docs/pages/ui/components/tracking.mdx
+2 -1
View File
@@ -4,6 +4,7 @@ summary: Component for visualizing activity logs or other monitoring-related dat
description: Monitor data activity visually.
layout: '@shared/layouts/DocsMdxLayout.astro'
---
import Subheader from '@shared/components/ui/Subheader.astro';
import Example from '@shared/components/docs/Example.astro';
## Basic example
@@ -17,5 +18,5 @@ import Example from '@shared/components/docs/Example.astro';
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>
<div class="card"> <div class="card-body"> <div class="d-flex align-items-center"> <Subheader>Status monitoring</Subheader> <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>
docs/pages/ui/forms/form-helpers.mdx
+2 -1
View File
@@ -4,6 +4,7 @@ summary: Use form helpers to provide additional information about a form element
description: Provide additional guidance in forms.
layout: '@shared/layouts/DocsMdxLayout.astro'
---
import FormHint from '@shared/components/ui/FormHint.astro';
import Example from '@shared/components/docs/Example.astro';
## Input help
@@ -46,7 +47,7 @@ Use a form hint to provide users with additional information about a form elemen
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>
<div> <label class="form-label">Email address</label> <input type="email" class="form-control" placeholder="Enter your email address" /> <FormHint>We'll never share your email with anyone else.</FormHint> </div>
</Example>
## Additional info inside label
docs/pages/ui/getting-started/how-to-contribute.mdx
+1 -1
View File
@@ -78,7 +78,7 @@ Tabler is a pnpm monorepo. The packages you will work with most often are:
- `core/` - the framework itself: SCSS sources in `core/scss/` and JavaScript in `core/js/`. This is where CSS classes and components are defined.
- `preview/` - the demo website built with [Astro](https://astro.build). Pages live in `preview/pages/*.astro`.
- `docs/` - the documentation website, also built with Astro. Pages live in `docs/pages/**/*.mdx`.
- `shared/astro/` - Astro components, layouts and helpers shared by the preview and docs websites. Import them with the `@shared` alias, for example `import Button from '@shared/components/Button.astro'`.
- `shared/astro/` - Astro components, layouts and helpers shared by the preview and docs websites. Import them with the `@shared` alias, for example `import Button from '@shared/components/ui/Button.astro'`.
- `shared/data/` - JSON data used by demo pages. Import it with the `@data` alias.
A few practical rules:
docs/pages/ui/layout/navbars.mdx
+2 -2
View File
@@ -6,8 +6,8 @@ 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'
import NavbarLogo from '@shared/components/navbar/NavbarLogo.astro'
import Icon from '@shared/components/ui/Icon.astro'
The navbar is a core component of any website or application, serving as the primary navigation tool. It provides users with quick access to key sections, enhancing usability and improving the overall user experience. Positioned typically at the top of the page, the navbar can contain links, buttons, branding elements,
and even interactive components like dropdown menus or search bars.
docs/pages/ui/layout/page-headers.mdx
+1 -1
View File
@@ -5,7 +5,7 @@ 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';
import Icon from '@shared/components/ui/Icon.astro';
## Simple header