Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-29 21:31:28 +04:00
Code Issues Projects Releases Wiki Activity

Unify shared/ui props, split demo components, add SCSS-driven tokens (#2872)

Browse Source
This commit is contained in:
Paweł Kuna
2026-08-14 01:16:54 +02:00
committed by GitHub
parent f11ece4b94
commit 87047250c0
210 changed files with 1885 additions and 948 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/content/ui/components/alert.mdx
+3 -3
View File
@@ -17,7 +17,7 @@ Combine `alert` class with one of the following: `alert-success`, `alert-info`,
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&hellip;"} description="Your account has been deleted and can't be restored." />
<Alert color="success" title="Wow! Everything worked!" description="Your account has been saved!" /> <Alert color="info" title="Did you know?" description="Here is something that you might like to know." /> <Alert color="warning" title="Uh oh, something went wrong" description="Sorry! There was a problem with your request." /> <Alert color="danger" title={"I'm so sorry&hellip;"} description="Your account has been deleted and can't be restored." />
</Example>
## Alert links
@@ -25,7 +25,7 @@ Alert classes affect the color of all the text inside an alert. Use another clas
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" />
<Alert color="danger" title="This is a danger alert" link="check it out" />
</Example>
## Dismissible alerts
@@ -37,7 +37,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
```
<Example>
<Alert type="danger" title="This is a danger alert" showClose />
<Alert color="danger" title="This is a danger alert" showClose />
</Example>
## Alerts with icons
docs/content/ui/components/badge.mdx
+2 -2
View File
@@ -74,7 +74,7 @@ You can use [icons](/ui/components/icon) in badges to make them more visually ap
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>
<BadgeList><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" /></BadgeList>
<BadgeList><Badge text="Star" iconEnd="arrow-right" /> <Badge text="Heart" iconEnd="arrow-right" /> <Badge text="Check" iconEnd="arrow-right" /> <Badge text="X" iconEnd="arrow-right" /> <Badge text="Plus" iconEnd="arrow-right" /> <Badge text="Minus" iconEnd="arrow-right" /></BadgeList>
</Example>
## Links
@@ -108,7 +108,7 @@ You can use the `.badge-blink` class to create a blinking effect. This class wil
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>
<BadgeList> <Badge color="primary" scale="sm" text="New" class="badge-sm" /> <Badge color="primary" scale="sm" text="1" class="badge-pill" /> </BadgeList> <BadgeList> <Badge color="primary" text="New" class="badge-sm" /> <Badge color="primary" text="1" class="badge-pill" /> </BadgeList> <BadgeList> <Badge color="primary" scale="lg" text="New" class="badge-sm" /> <Badge color="primary" scale="lg" text="1" class="badge-pill" /> </BadgeList>
<BadgeList> <Badge color="primary" size="sm" text="New" class="badge-sm" /> <Badge color="primary" size="sm" text="1" class="badge-pill" /> </BadgeList> <BadgeList> <Badge color="primary" text="New" class="badge-sm" /> <Badge color="primary" text="1" class="badge-pill" /> </BadgeList> <BadgeList> <Badge color="primary" size="lg" text="New" class="badge-sm" /> <Badge color="primary" size="lg" text="1" class="badge-pill" /> </BadgeList>
</Example>
docs/content/ui/components/breadcrumb.mdx
+1 -1
View File
@@ -34,7 +34,7 @@ This example shows how to use different breadcrumb styles.
You can use [icons](/ui/components/icon) 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 />
<Breadcrumb pages={['Home', 'Library', 'Data']} homeIcon />
</Example>
## Muted breadcrumbs
docs/content/ui/components/chart.mdx
+7 -7
View File
@@ -7,7 +7,7 @@ related: [/ui/components/countup, /ui/components/trending]
---
import Example from '@components/Example.astro'
import Chart from '@ui/Chart.astro'
import Chart from '@shared/components/demo/Chart.astro'
import CodeDocs from '@components/CodeDocs.astro';
To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`.
@@ -21,7 +21,7 @@ Line charts are an essential tool for visualizing data trends over time. They ar
<Example>
<div class="card">
<div class="card-body">
<Chart chartId="demo-line" legend height={15} />
<Chart chartId="demo-line" label="Line chart example" height={15} />
</div>
</div>
</Example>
@@ -33,7 +33,7 @@ Area charts are ideal for representing cumulative data over time. They add visua
<Example>
<div class="card">
<div class="card-body">
<Chart chartId="demo-area" height={15} />
<Chart chartId="demo-area" label="Area chart example" height={15} />
</div>
</div>
</Example>
@@ -45,7 +45,7 @@ Bar charts are highly effective for comparing data across different categories.
<Example>
<div class="card">
<div class="card-body">
<Chart chartId="demo-bar" height={15} />
<Chart chartId="demo-bar" label="Bar chart example" height={15} />
</div>
</div>
</Example>
@@ -57,7 +57,7 @@ Pie charts are a simple and effective way to visualize proportions and ratios. T
<Example>
<div class="card">
<div class="card-body">
<Chart chartId="demo-pie" height={15} />
<Chart chartId="demo-pie" label="Pie chart example" height={15} />
</div>
</div>
</Example>
@@ -69,7 +69,7 @@ Heatmaps provide a graphical representation of data where individual values are
<Example>
<div class="card">
<div class="card-body">
<Chart chartId="demo-heatmap" height={15} />
<Chart chartId="demo-heatmap" label="Heatmap chart example" height={15} />
</div>
</div>
</Example>
@@ -81,7 +81,7 @@ For more complex data visualizations, you can create advanced charts with multip
<Example>
<div class="card">
<div class="card-body">
<Chart chartId="social-referrals" height={15} />
<Chart chartId="social-referrals" label="Social referrals chart" height={15} />
</div>
</div>
</Example>
docs/content/ui/components/icon.mdx
+2 -2
View File
@@ -28,7 +28,7 @@ Results can be seen in the example below.
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" />
<Icon name="heart" filled /> <Icon name="bell-ringing" filled /> <Icon name="cherry" filled /> <Icon name="circle-key" filled />
</Example>
## Icon colors
@@ -44,7 +44,7 @@ To change the color of the icon, you need to add the `text-*` class to the paren
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>
<span class="text-red"> <Icon name="heart" filled /> </span> <span class="text-yellow"> <Icon name="star" filled /> </span> <span class="text-blue"> <Icon name="circle" /> </span> <span class="text-green"> <Icon name="square-rounded" /> </span>
</Example>
## Icon animations
docs/content/ui/components/pagination.mdx
+6 -6
View File
@@ -13,7 +13,7 @@ import CodeDocs from '@components/CodeDocs.astro';
Use slightly customized pagination with previous and next icon links:
<Example centered vertical>
<Pagination />
<Pagination count={5} activeItem={3} />
</Example>
## With first and last links
@@ -21,7 +21,7 @@ Use slightly customized pagination with previous and next icon 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 />
<Pagination count={5} activeItem={3} firstLast />
</Example>
## Offset
@@ -29,7 +29,7 @@ When you have a lot of pages, you can use first and last links to quickly naviga
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} />
<Pagination offset={3} count={20} activeItem={3} />
</Example>
## Button with text
@@ -37,7 +37,7 @@ If the count of pages is too large, you can use offset to show only a few pages
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 />
<Pagination count={5} activeItem={3} text />
</Example>
## Outline version
@@ -45,7 +45,7 @@ When you want to use pagination with text, you can use text buttons. This will g
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" />
<Pagination count={5} activeItem={3} class="pagination-outline" />
</Example>
## Circle version
@@ -53,7 +53,7 @@ If you want to use an outline version of the pagination, you can use the `.pagin
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" />
<Pagination count={5} activeItem={3} class="pagination-circle" /> <Pagination count={5} activeItem={3} class="pagination-circle pagination-outline" />
</Example>
## SCSS variables
docs/content/ui/components/progress.mdx
+2 -2
View File
@@ -112,7 +112,7 @@ page, the progress bar could gradually fill up, creating a sense of momentum and
Thanks to this you can create a nice looking statistics section:
<Example columnFullWidth>
<ProgressBg value="65" text="Poland" showValue true /> <ProgressBg value="35" text="Germany" showValue true /> <ProgressBg value="28" text="United States" showValue true /> <ProgressBg value="20" text="United Kingdom" showValue true /> <ProgressBg value="15" text="France" showValue true />
<ProgressBg value={65} text="Poland" showValue /> <ProgressBg value={35} text="Germany" showValue /> <ProgressBg value={28} text="United States" showValue /> <ProgressBg value={20} text="United Kingdom" showValue /> <ProgressBg value={15} text="France" showValue />
</Example>
## Progress background colors
@@ -120,7 +120,7 @@ Thanks to this you can create a nice looking statistics section:
You can combine progress background with contextual light colors to better separate categories.
<Example columnFullWidth>
<ProgressBg value="75" text="Success" color="success-lt" showValue true /> <ProgressBg value="60" text="Warning" color="warning-lt" showValue true /> <ProgressBg value="40" text="Danger" color="danger-lt" showValue true /> <ProgressBg value="90" text="Info" color="info-lt" showValue true />
<ProgressBg value={75} text="Success" color="success" showValue /> <ProgressBg value={60} text="Warning" color="warning" showValue /> <ProgressBg value={40} text="Danger" color="danger" showValue /> <ProgressBg value={90} text="Info" color="info" showValue />
</Example>
## SCSS variables
docs/content/ui/components/star-rating.mdx
+5 -5
View File
@@ -13,7 +13,7 @@ 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>
<div class="stars"> <span class="star text-yellow"><Icon name="star" filled /></span> <span class="star text-yellow"><Icon name="star" filled /></span> <span class="star text-yellow"><Icon name="star" filled /></span> <span class="star text-yellow"><Icon name="star" filled /></span> <span class="star"><Icon name="star" filled /></span> </div>
</Example>
## Variants
@@ -24,7 +24,7 @@ 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>
<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" filled /></span> <span class="star text-yellow"><Icon name="star" filled /></span> <span class="star text-yellow"><Icon name="star" filled /></span> <span class="star text-yellow"><Icon name="star" filled /></span> <span class="star text-yellow"><Icon name="star" 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" filled /></span> <span class="star text-yellow"><Icon name="star" filled /></span> <span class="star text-yellow"><Icon name="star" filled /></span> <span class="star"><Icon name="star" filled /></span> <span class="star"><Icon name="star" filled /></span> </div> </div> </div>
</Example>
### Data-star-rating states
@@ -33,7 +33,7 @@ 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>
<div data-star-rating class="d-flex gap-1" style="--tblr-icon-size: 1.25rem;"> <span class="gl-active"><Icon name="star" filled class="gl-star-full" /></span> <span class="gl-active"><Icon name="star" filled class="gl-star-full" /></span> <span class="gl-active"><Icon name="star" filled class="gl-star-full" /></span> <span><Icon name="star" filled class="gl-star-full" /></span> <span><Icon name="star" filled class="gl-star-full" /></span> </div>
</Example>
### Custom rating colors
@@ -42,7 +42,7 @@ 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>
<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" filled class="gl-star-full" /></span> <span class="gl-active"><Icon name="heart" filled class="gl-star-full" /></span> <span class="gl-active"><Icon name="heart" filled class="gl-star-full" /></span> <span><Icon name="heart" filled class="gl-star-full" /></span> <span><Icon name="heart" filled class="gl-star-full" /></span> </div>
</Example>
## Examples
@@ -53,7 +53,7 @@ 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>
<div class="d-flex align-items-center gap-2"> <div class="stars"> <span class="star text-yellow"><Icon name="star" filled /></span> <span class="star text-yellow"><Icon name="star" filled /></span> <span class="star text-yellow"><Icon name="star" filled /></span> <span class="star text-yellow"><Icon name="star" filled /></span> <span class="star"><Icon name="star" filled /></span> </div> <span class="text-secondary">4.0 (128 reviews)</span> </div>
</Example>
## Accessibility
docs/content/ui/components/switch-icon.mdx
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/content/ui/components/tag.mdx
+1 -1
View File
@@ -35,7 +35,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>
<TagList> <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> </TagList>
<TagList> <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 payment="visa" size="xxs" class="tag-payment" />Visa <a href="#" class="btn-close" aria-label="Remove payment tag"></a> </span> </TagList>
</Example>
### With badge
docs/content/ui/components/timeline.mdx
+1 -1
View File
@@ -5,7 +5,7 @@ description: Visualize events in chronological order with a timeline. Add icons,
related: [/ui/components/step]
---
import Example from '@components/Example.astro';
import Timeline from '@ui/Timeline.astro';
import Timeline from '@shared/components/demo/Timeline.astro';
## Timeline
docs/content/ui/components/vector-map.mdx
+1 -1
View File
@@ -7,7 +7,7 @@ related: [/ui/components/map]
---
import Example from '@components/Example.astro'
import MapVector from '@ui/MapVector.astro'
import MapVector from '@shared/components/demo/MapVector.astro'
import { Code } from 'astro:components'
import { site } from '@shared/lib/site.ts'
docs/content/ui/components/wysiwyg.mdx
+1 -1
View File
@@ -16,5 +16,5 @@ import Wysiwyg from '@ui/Wysiwyg.astro'
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 />
<Wysiwyg id="example" />
</Example>