Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-14 07:12:22 +04:00
Code Issues Projects Releases Wiki Activity

Documentation improvements (#2042)

Browse Source
This commit is contained in:
Paweł Kuna
2025-01-07 23:14:44 +01:00
committed by GitHub
parent 35da0ff9b8
commit c510fdfb9d
88 changed files with 1048 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.build/reformat-mdx.js
+36
View File
@@ -0,0 +1,36 @@
#!/usr/bin/env node
'use strict'
const fs = require('fs'),
path = require('path'),
glob = require('glob'),
beautifyHtml = require('js-beautify').html;
const docs = glob
.sync(path.join(__dirname, `../docs/**/*.mdx`))
docs.forEach((file, i) => {
const oldContent = fs.readFileSync(file, 'utf8')
// get codeblocks from markdown
const content = oldContent.replace(/(```([a-z0-9]+).*?\n)(.*?)(```)/gs, (m, m1, m2, m3, m4) => {
if (m2 === 'html') {
const m3m = beautifyHtml(m3, {
"indent_size": 2,
"indent_char": " ",
}).trim();
return m1 + m3m + "\n" + m4;
}
return m
})
if (content !== oldContent) {
fs.writeFileSync(file, content, 'utf8')
console.log(`Reformatted ${file}`)
}
})
docs/icons/libraries/preact.mdx
+1 -1
View File
@@ -4,7 +4,7 @@ description: Tabler Icons library for Preact framework.
summary: Tabler Icons for Preact provides an optimized collection of icons specifically designed for use with Preact. These lightweight and scalable icons are easy to integrate into Preact-based projects. summary: Tabler Icons for Preact provides an optimized collection of icons specifically designed for use with Preact. These lightweight and scalable icons are easy to integrate into Preact-based projects.
--- ---
![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-preact.png) ![](/docs/icons/package-preact.png)
## Installation ## Installation
docs/icons/libraries/react.mdx
+2 -2
View File
@@ -4,7 +4,7 @@ description: Tabler Icons library for React framework.
summary: Tabler Icons for React offers a robust set of icons tailored for React applications, providing developers with a seamless way to enhance their user interfaces with high-quality, scalable graphics. summary: Tabler Icons for React offers a robust set of icons tailored for React applications, providing developers with a seamless way to enhance their user interfaces with high-quality, scalable graphics.
--- ---
![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-react.png) ![](/docs/icons/package-react.png)
## Installation ## Installation
@@ -16,7 +16,7 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases).
It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component. It's build with ESmodules so it's completely tree-shakable. Each icon can be imported as a component.
```js ```jsx
import { IconArrowLeft } from '@tabler/icons-react'; import { IconArrowLeft } from '@tabler/icons-react';
const App = () => { const App = () => {
docs/icons/libraries/solidjs.mdx
+2 -1
View File
@@ -4,7 +4,8 @@ description: Tabler Icons library for SolidJS framework.
summary: Tabler Icons for SolidJS is a lightweight library offering a vast selection of high-quality icons. It is designed for seamless integration with SolidJS, enabling developers to build visually appealing interfaces. summary: Tabler Icons for SolidJS is a lightweight library offering a vast selection of high-quality icons. It is designed for seamless integration with SolidJS, enabling developers to build visually appealing interfaces.
--- ---
![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-solidjs.png) ![](/docs/icons/package-solidjs.png)
## Installation ## Installation
docs/icons/libraries/svelte.mdx
+2 -1
View File
@@ -4,7 +4,8 @@ description: Tabler Icons library for Svelte framework.
summary: Tabler Icons for Svelte provides a clean and efficient way to use Tabler's comprehensive icon set in Svelte applications, helping developers deliver polished, user-friendly designs. summary: Tabler Icons for Svelte provides a clean and efficient way to use Tabler's comprehensive icon set in Svelte applications, helping developers deliver polished, user-friendly designs.
--- ---
![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-svelte.png) ![](/docs/icons/package-svelte.png)
## Installation ## Installation
docs/icons/libraries/vue.mdx
+5 -2
View File
@@ -4,7 +4,8 @@ description: Tabler Icons library for Vue framework.
summary: Tabler Icons for Vue offers a collection of customizable and scalable icons designed for use in Vue applications, providing a powerful tool for creating modern and engaging interfaces. summary: Tabler Icons for Vue offers a collection of customizable and scalable icons designed for use in Vue applications, providing a powerful tool for creating modern and engaging interfaces.
--- ---
![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-vue.png) ![](/docs/icons/package-vue.png)
## Installation ## Installation
@@ -26,7 +27,9 @@ All icons are Vue components that contain SVG elements. So any icon can be impor
import { IconHome } from '@tabler/icons-vue'; import { IconHome } from '@tabler/icons-vue';
export default { export default {
components: { IconHome } components: {
IconHome
}
}; };
</script> </script>
``` ```
docs/icons/libraries/webfont.mdx
+2 -1
View File
@@ -4,7 +4,8 @@ description: Tabler Icons as a webfont.
summary: Tabler Icons as a webfont allows you to easily include icons in your projects using simple CSS classes, offering a lightweight and scalable solution for web development. summary: Tabler Icons as a webfont allows you to easily include icons in your projects using simple CSS classes, offering a lightweight and scalable solution for web development.
--- ---
![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-webfont.png) ![](/docs/icons/package-webfont.png)
## Installation ## Installation
docs/icons/static-files/eps.mdx
+2 -1
View File
@@ -3,7 +3,8 @@ title: EPS version
description: Download Tabler Icons in EPS format. description: Download Tabler Icons in EPS format.
--- ---
![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-eps.png) ![](/docs/icons/package-eps.png)
## Installation ## Installation
docs/icons/static-files/pdf.mdx
+2 -1
View File
@@ -3,7 +3,8 @@ title: PDF version
description: Download Tabler Icons in PDF format. description: Download Tabler Icons in PDF format.
--- ---
![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-pdf.png) ![](/docs/icons/package-pdf.png)
## Installation ## Installation
docs/icons/static-files/png.mdx
+2 -1
View File
@@ -3,7 +3,8 @@ title: PNG version
description: Download Tabler Icons in PNG format. description: Download Tabler Icons in PNG format.
--- ---
![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-png.png) ![](/docs/icons/package-png.png)
## Installation ## Installation
docs/icons/static-files/svg.mdx
+2 -13
View File
@@ -3,7 +3,7 @@ title: SVG version
description: Download Tabler Icons in SVG format. description: Download Tabler Icons in SVG format.
--- ---
![](https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/packages/og-package-svg.png) ![](/docs/icons/package-svg.png)
## Installation ## Installation
@@ -29,18 +29,7 @@ You can paste the content of the icon file into your HTML code to display it on
```html ```html
<a href=""> <a href="">
<svg <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-disabled" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-disabled"
width="24"
height="24"
viewBox="0 0 24 24"
stroke-width="1.25"
stroke="currentColor"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
... ...
</svg> </svg>
Click me Click me
docs/illustrations/index.mdx
+2
View File
@@ -4,3 +4,5 @@ order: 3
description: Customizable illustrations for modern web and mobile designs. description: Customizable illustrations for modern web and mobile designs.
summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience. summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
--- ---
![](/docs/cover-illustrations.png)
docs/illustrations/introduction/customization.mdx
+31 -3
View File
@@ -202,7 +202,8 @@ Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illust
<div class="ribbon"> <div class="ribbon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-star"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-star">
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg> <path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" />
</svg>
</div> </div>
</div> </div>
@@ -328,9 +329,11 @@ Illustration change theme based on the user's system preferences or `data-bs-the
```html ```html
<html data-bs-theme="dark"> <html data-bs-theme="dark">
<body> <body>
<svg>...</svg> <svg>...</svg>
</body> </body>
</html> </html>
``` ```
@@ -339,8 +342,33 @@ Look at the example below to see how the illustration changes based on the user'
```html example columns={1} centered vertical separated height="25rem" background="surface" ```html example columns={1} centered vertical separated height="25rem" background="surface"
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 600"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 800 600">
<style> <style>
:where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-a { fill: black; opacity: 0.07; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-b { fill: #1A2030; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-c { fill: #454C5E; } :where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-a {
@media (prefers-color-scheme: dark) { .tblr-illustrations-boy-girl-a { fill: black; opacity: 0.07; } .tblr-illustrations-boy-girl-b { fill: #1A2030; } .tblr-illustrations-boy-girl-c { fill: #454C5E; } } fill: black;
opacity: 0.07;
}
:where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-b {
fill: #1A2030;
}
:where(.theme-dark, [data-bs-theme="dark"]) .tblr-illustrations-boy-girl-c {
fill: #454C5E;
}
@media (prefers-color-scheme: dark) {
.tblr-illustrations-boy-girl-a {
fill: black;
opacity: 0.07;
}
.tblr-illustrations-boy-girl-b {
fill: #1A2030;
}
.tblr-illustrations-boy-girl-c {
fill: #454C5E;
}
}
</style> </style>
<path d="M658.744 282.266C658.744 325.973 612.535 357.656 592.114 392.937C571.053 429.346 565.991 484.976 529.581 506.037C494.299 526.458 444.065 503.618 400.367 503.618C356.669 503.618 306.435 526.458 271.153 506.037C234.753 484.976 229.681 429.346 208.62 392.937C188.209 357.656 142 325.953 142 282.266C142 238.579 188.209 206.865 208.62 171.584C229.681 135.185 234.753 79.5143 271.153 58.4839C306.435 38.0736 356.669 60.9031 400.367 60.9031C444.065 60.9031 494.299 38.0736 529.581 58.4839C565.991 79.5448 571.053 135.185 592.114 171.584C612.535 206.865 658.744 238.568 658.744 282.266Z" fill="#F7F8FC" class="tblr-illustrations-boy-girl-a" /> <path d="M658.744 282.266C658.744 325.973 612.535 357.656 592.114 392.937C571.053 429.346 565.991 484.976 529.581 506.037C494.299 526.458 444.065 503.618 400.367 503.618C356.669 503.618 306.435 526.458 271.153 506.037C234.753 484.976 229.681 429.346 208.62 392.937C188.209 357.656 142 325.953 142 282.266C142 238.579 188.209 206.865 208.62 171.584C229.681 135.185 234.753 79.5143 271.153 58.4839C306.435 38.0736 356.669 60.9031 400.367 60.9031C444.065 60.9031 494.299 38.0736 529.581 58.4839C565.991 79.5448 571.053 135.185 592.114 171.584C612.535 206.865 658.744 238.568 658.744 282.266Z" fill="#F7F8FC" class="tblr-illustrations-boy-girl-a" />
<path d="M397.248 550C534.459 550 645.689 545.836 645.689 540.7C645.689 535.564 534.459 531.401 397.248 531.401C260.038 531.401 148.808 535.564 148.808 540.7C148.808 545.836 260.038 550 397.248 550Z" fill="#A6A9B3" class="tblr-illustrations-boy-girl-b" /> <path d="M397.248 550C534.459 550 645.689 545.836 645.689 540.7C645.689 535.564 534.459 531.401 397.248 531.401C260.038 531.401 148.808 535.564 148.808 540.7C148.808 545.836 260.038 550 397.248 550Z" fill="#A6A9B3" class="tblr-illustrations-boy-girl-b" />
docs/img/browsers/brave.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.292 7.22l.434-1.061-1.228-1.27c-.664-.665-2.08-.275-2.08-.275l-1.602-1.82H9.162l-1.61 1.827s-1.415-.383-2.079.267L4.246 6.152l.433 1.061-.542 1.574 1.805 6.88c.376 1.474.628 2.044 1.69 2.795l3.3 2.238c.317.195.707.535 1.06.535.355 0 .744-.34 1.062-.535l3.3-2.238c1.061-.75 1.314-1.321 1.69-2.794l1.804-6.881-.556-1.567z" fill="url(#paint0_linear_29_515)"/><path d="M15.971 5.783s2.072 2.506 2.072 3.033c0 .541-.26.679-.52.96l-1.552 1.66c-.144.145-.455.39-.274.817.18.433.433.967.144 1.516-.289.556-.794.924-1.119.866a5.922 5.922 0 0 1-1.372-.65c-.274-.18-1.155-.91-1.155-1.19 0-.282.91-.795 1.083-.896.166-.116.939-.563.953-.737.014-.173.014-.216-.216-.65-.232-.433-.636-1.01-.578-1.386.072-.375.722-.577 1.206-.758l1.494-.563c.116-.058.087-.108-.26-.144-.346-.03-1.321-.16-1.761-.036-.44.122-1.177.31-1.25.411-.057.101-.115.101-.05.448l.419 2.274c.029.289.086.484-.217.556-.318.072-.845.195-1.025.195-.18 0-.715-.123-1.026-.195-.31-.072-.252-.267-.216-.556.029-.289.347-1.935.412-2.274.072-.347.007-.347-.051-.448-.072-.101-.816-.289-1.256-.411-.434-.123-1.416.007-1.762.043-.347.029-.376.072-.26.144l1.495.556c.476.18 1.14.383 1.205.758.072.383-.339.953-.577 1.387-.239.433-.231.476-.217.65.015.173.794.62.953.736.174.108 1.083.614 1.083.895 0 .282-.859 1.011-1.148 1.191a5.922 5.922 0 0 1-1.372.65c-.325.058-.83-.31-1.126-.866-.289-.549-.029-1.083.144-1.516.18-.434-.122-.665-.274-.816l-1.552-1.66c-.253-.268-.513-.412-.513-.947 0-.534 2.072-3.032 2.072-3.032l1.971.317c.231 0 .744-.194 1.213-.36.47-.145.795-.16.795-.16s.317 0 .794.16c.476.158.982.36 1.213.36.238 0 1.985-.339 1.985-.339l-.007.007zm-1.552 9.589c.13.072.05.23-.072.318l-1.834 1.43c-.145.143-.376.36-.527.36-.152 0-.376-.216-.527-.36a95.12 95.12 0 0 0-1.842-1.43c-.115-.087-.195-.239-.072-.318l1.083-.578c.43-.228.886-.404 1.358-.527.108 0 .794.246 1.35.527l1.083.578z" fill="#fff"/><path d="M16.433 4.621l-1.617-1.827H9.163l-1.61 1.827s-1.416-.383-2.08.267c0 0 1.877-.166 2.527.888l1.993.34c.231 0 .744-.195 1.213-.361.47-.145.794-.16.794-.16s.318 0 .794.16c.477.158.982.36 1.213.36.239 0 1.986-.339 1.986-.339.65-1.054 2.527-.888 2.527-.888-.664-.664-2.08-.274-2.08-.274" fill="url(#paint1_linear_29_515)"/><defs><linearGradient id="paint0_linear_29_515" x1="4.137" y1="12.199" x2="19.848" y2="12.199" gradientUnits="userSpaceOnUse"><stop offset=".4" stop-color="#F50"/><stop offset=".6" stop-color="#FF2000"/></linearGradient><linearGradient id="paint1_linear_29_515" x1="5.734" y1="4.488" x2="18.52" y2="4.488" gradientUnits="userSpaceOnUse"><stop stop-color="#FF452A"/><stop offset="1" stop-color="#FF2000"/></linearGradient></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

docs/img/browsers/chrome.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 16.998a5 5 0 1 0 0-10 5 5 0 0 0 0 10z" fill="#fff"/><path d="M12 7h8.659a9.997 9.997 0 0 0-17.319.001L7.67 14.5l.004-.001A4.994 4.994 0 0 1 12 7z" fill="url(#paint0_linear_29_517)"/><path d="M12 15.958a3.958 3.958 0 1 0 0-7.916 3.958 3.958 0 0 0 0 7.916z" fill="#1A73E8"/><path d="M16.33 14.501L12 22a9.998 9.998 0 0 0 8.658-14.999H12l-.002.004a4.993 4.993 0 0 1 4.332 7.496z" fill="url(#paint1_linear_29_517)"/><path d="M7.67 14.501L3.34 7.003A9.997 9.997 0 0 0 12 22l4.33-7.499-.002-.003a4.995 4.995 0 0 1-8.658.003z" fill="url(#paint2_linear_29_517)"/><defs><linearGradient id="paint0_linear_29_517" x1="3.34" y1="8.25" x2="20.659" y2="8.25" gradientUnits="userSpaceOnUse"><stop stop-color="#D93025"/><stop offset="1" stop-color="#EA4335"/></linearGradient><linearGradient id="paint1_linear_29_517" x1="10.634" y1="21.866" x2="19.293" y2="6.868" gradientUnits="userSpaceOnUse"><stop stop-color="#FCC934"/><stop offset="1" stop-color="#FBBC04"/></linearGradient><linearGradient id="paint2_linear_29_517" x1="13.082" y1="21.376" x2="4.423" y2="6.378" gradientUnits="userSpaceOnUse"><stop stop-color="#1E8E3E"/><stop offset="1" stop-color="#34A853"/></linearGradient></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

docs/img/browsers/edge.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.047 16.883c-.266.14-.54.265-.82.367a7.99 7.99 0 0 1-2.805.508c-3.695 0-6.914-2.54-6.914-5.805.008-.89.5-1.71 1.281-2.133-3.344.14-4.203 3.625-4.203 5.664 0 5.774 5.32 6.36 6.469 6.36.617 0 1.547-.18 2.11-.36l.1-.03a9.997 9.997 0 0 0 5.204-4.126.313.313 0 0 0-.094-.43.33.33 0 0 0-.328-.015z" fill="url(#paint0_linear_29_519)"/><path opacity=".35" d="M20.047 16.883c-.266.14-.54.265-.82.367a7.99 7.99 0 0 1-2.805.508c-3.695 0-6.914-2.54-6.914-5.805.008-.89.5-1.71 1.281-2.133-3.344.14-4.203 3.625-4.203 5.664 0 5.774 5.32 6.36 6.469 6.36.617 0 1.547-.18 2.11-.36l.1-.03a9.997 9.997 0 0 0 5.204-4.126.313.313 0 0 0-.094-.43.33.33 0 0 0-.328-.015z" fill="url(#paint1_radial_29_519)"/><path d="M10.258 20.86c-.695-.43-1.297-1-1.774-1.665A6.307 6.307 0 0 1 10.79 9.82c.242-.117.656-.32 1.211-.312a2.522 2.522 0 0 1 2.508 2.476c0-.015 1.914-6.218-6.25-6.218-3.43 0-6.25 3.257-6.25 6.109a10.19 10.19 0 0 0 .945 4.375 10.006 10.006 0 0 0 12.219 5.242 5.92 5.92 0 0 1-4.914-.633z" fill="url(#paint2_linear_29_519)"/><path opacity=".41" d="M10.258 20.86c-.695-.43-1.297-1-1.774-1.665A6.307 6.307 0 0 1 10.79 9.82c.242-.117.656-.32 1.211-.312a2.522 2.522 0 0 1 2.508 2.476c0-.015 1.914-6.218-6.25-6.218-3.43 0-6.25 3.257-6.25 6.109a10.19 10.19 0 0 0 .945 4.375 10.006 10.006 0 0 0 12.219 5.242 5.92 5.92 0 0 1-4.914-.633z" fill="url(#paint3_radial_29_519)"/><path d="M13.898 13.633c-.062.078-.257.195-.257.445 0 .203.132.399.367.563 1.125.78 3.242.68 3.25.68.836 0 1.648-.227 2.367-.65A4.789 4.789 0 0 0 22 10.54c.023-1.75-.625-2.914-.883-3.43C19.461 3.867 15.883 2 12 2a10 10 0 0 0-10 9.86c.04-2.852 2.875-5.157 6.25-5.157.273 0 1.836.024 3.281.79 1.274.671 1.946 1.476 2.406 2.28.485.836.57 1.883.57 2.305 0 .414-.21 1.04-.609 1.555z" fill="url(#paint4_radial_29_519)"/><path d="M13.898 13.633c-.062.078-.257.195-.257.445 0 .203.132.399.367.563 1.125.78 3.242.68 3.25.68.836 0 1.648-.227 2.367-.65A4.789 4.789 0 0 0 22 10.54c.023-1.75-.625-2.914-.883-3.43C19.461 3.867 15.883 2 12 2a10 10 0 0 0-10 9.86c.04-2.852 2.875-5.157 6.25-5.157.273 0 1.836.024 3.281.79 1.274.671 1.946 1.476 2.406 2.28.485.836.57 1.883.57 2.305 0 .414-.21 1.04-.609 1.555z" fill="url(#paint5_radial_29_519)"/><defs><linearGradient id="paint0_linear_29_519" x1="6.586" y1="15.83" x2="20.515" y2="15.83" gradientUnits="userSpaceOnUse"><stop stop-color="#0C59A4"/><stop offset="1" stop-color="#114A8B"/></linearGradient><radialGradient id="paint1_radial_29_519" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(7.45082 0 0 7.07749 14.28 15.94)"><stop offset=".72" stop-opacity="0"/><stop offset=".95" stop-opacity=".53"/><stop offset="1"/></radialGradient><linearGradient id="paint2_linear_29_519" x1="13.935" y1="9.793" x2="5.234" y2="19.27" gradientUnits="userSpaceOnUse"><stop stop-color="#1B9DE2"/><stop offset=".16" stop-color="#1595DF"/><stop offset=".67" stop-color="#0680D7"/><stop offset="1" stop-color="#0078D4"/></linearGradient><radialGradient id="paint3_radial_29_519" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.6786 -11.07643 8.95045 1.3564 7.516 17.548)"><stop offset=".76" stop-opacity="0"/><stop offset=".95" stop-opacity=".5"/><stop offset="1"/></radialGradient><radialGradient id="paint4_radial_29_519" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-.63255 15.81165 -33.68076 -1.3474 4.02 5.703)"><stop stop-color="#35C1F1"/><stop offset=".11" stop-color="#34C1ED"/><stop offset=".23" stop-color="#2FC2DF"/><stop offset=".31" stop-color="#2BC3D2"/><stop offset=".67" stop-color="#36C752"/></radialGradient><radialGradient id="paint5_radial_29_519" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.12926 7.299 -5.93668 1.73185 20.754 8.047)"><stop stop-color="#66EB6E"/><stop offset="1" stop-color="#66EB6E" stop-opacity="0"/></radialGradient></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

docs/img/browsers/electron.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.49 6.745c-2.422-.447-4.335.025-5.105 1.342-.572.981-.41 2.298.397 3.69a.234.234 0 0 0 .336.086.234.234 0 0 0 .087-.335c-.72-1.255-.857-2.385-.398-3.193.634-1.093 2.348-1.515 4.584-1.105a.242.242 0 0 0 .286-.199c.025-.137-.05-.26-.187-.286zm-3.44 6.733a15.278 15.278 0 0 0 3.701 2.92c3.516 2.024 7.255 2.57 9.106 1.316.112-.074.137-.236.062-.348-.075-.111-.236-.136-.348-.062-1.652 1.13-5.205.609-8.571-1.329a14.906 14.906 0 0 1-3.59-2.832.249.249 0 0 0-.348-.013.248.248 0 0 0-.013.348z" fill="#47848F"/><path d="M18.261 13.18c1.59-1.876 2.137-3.764 1.379-5.08-.56-.97-1.752-1.479-3.317-1.504a.25.25 0 0 0-.248.249.25.25 0 0 0 .248.248c1.416.013 2.435.46 2.895 1.255.633 1.093.136 2.782-1.33 4.51a.248.248 0 0 0 .025.347.248.248 0 0 0 .348-.025zm-4.074-6.36a15.689 15.689 0 0 0-4.423 1.75c-3.64 2.1-6 5.193-5.677 7.429a.26.26 0 0 0 .286.211.261.261 0 0 0 .211-.286c-.298-1.987 1.95-4.906 5.429-6.919a15.253 15.253 0 0 1 4.285-1.702.248.248 0 0 0 .187-.298.264.264 0 0 0-.298-.186z" fill="#47848F"/><path d="M8.31 17.553c.833 2.31 2.187 3.739 3.715 3.739 1.118 0 2.137-.758 2.944-2.1a.234.234 0 0 0-.087-.335.234.234 0 0 0-.335.087c-.72 1.205-1.603 1.851-2.522 1.851-1.267 0-2.472-1.267-3.242-3.416a.248.248 0 0 0-.323-.15.25.25 0 0 0-.15.324zm7.578-.447c.452-1.494.674-3.048.659-4.61 0-4.11-1.441-7.664-3.49-8.57-.125-.05-.274 0-.324.124-.05.124 0 .273.124.323 1.826.807 3.193 4.174 3.193 8.124.01 1.51-.203 3.012-.634 4.46a.249.249 0 0 0 .162.31c.124.037.26-.037.31-.161zm4.671-.249a1.192 1.192 0 1 0-2.384 0 1.192 1.192 0 0 0 2.384 0zm-.497 0a.696.696 0 1 1-1.392 0 .696.696 0 0 1 1.392 0zM4.646 18.05a1.192 1.192 0 1 0 0-2.385 1.192 1.192 0 0 0 0 2.385zm0-.497a.696.696 0 1 1 0-1.392.696.696 0 0 1 0 1.392z" fill="#47848F"/><path d="M12.025 5.13a1.192 1.192 0 1 0 0-2.385 1.192 1.192 0 0 0 0 2.385zm0-.496a.696.696 0 1 1 0-1.392.696.696 0 0 1 0 1.392zm.174 8.708a.87.87 0 0 1-1.019-.659.87.87 0 0 1 .659-1.018.87.87 0 0 1 1.018.658.857.857 0 0 1-.658 1.019z" fill="#47848F"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

docs/img/browsers/firefox.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

docs/img/browsers/internet-explorer.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.088 12.158c0-1.753-.454-3.404-1.238-4.848C25.253-.322 18.24.813 17.827.813c-1.443.288-2.887.752-4.125 1.34-4.744-.056-8.87 2.476-10.21 7.736 2.475-2.785 4.228-3.92 5.26-4.332-.217.196-.434.402-.65.608-1.65 1.65-2.992 3.3-4.126 5.054-.877 1.547-1.857 2.888-2.372 4.642-2.785 10.107 5.982 5.878 7.22 5.156a9.815 9.815 0 0 0 4.434 1.022c4.332 0 8.045-2.785 9.386-6.601h-5.26c-2.475 3.919-8.354 2.166-8.56-2.063h14.233c.053-.423.082-.846.082-1.238l-.051.02zM21.23 2.36c.856.577 1.547 1.444.361 4.538-1.134-1.857-2.785-3.3-4.847-4.023.918-.443 3.197-1.34 4.538-.515h-.052zM2.975 21.028c-.7-.712-.825-2.476.722-5.673a9.762 9.762 0 0 0 4.332 5.26c-1 .547-3.61 1.754-5.053.34v.073zm5.776-10.314c.08-2.27 2.063-4.126 4.538-4.126 2.476 0 4.435 1.857 4.539 4.126H8.75z" fill="#1EBBEE"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 866 B

docs/img/browsers/opera.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.78a9.22 9.22 0 1 0 6.145 16.093 6.65 6.65 0 0 1-3.695 1.129c-2.197 0-4.162-1.09-5.487-2.807-1.02-1.204-1.678-2.982-1.724-4.979v-.436c.046-1.997.704-3.776 1.724-4.978 1.322-1.718 3.29-2.808 5.487-2.808a6.65 6.65 0 0 1 3.695 1.13 9.189 9.189 0 0 0-6.11-2.346h-.037L12 2.78z" fill="url(#paint0_linear_29_513)"/><path d="M8.965 6.804c.844-.998 1.94-1.602 3.132-1.602 2.685 0 4.863 3.046 4.863 6.796 0 3.754-2.176 6.796-4.863 6.796-1.192 0-2.286-.601-3.132-1.6 1.321 1.718 3.288 2.808 5.486 2.808a6.66 6.66 0 0 0 3.696-1.129A9.192 9.192 0 0 0 21.22 12a9.194 9.194 0 0 0-3.075-6.873 6.65 6.65 0 0 0-3.695-1.129c-2.197 0-4.162 1.09-5.487 2.808" fill="url(#paint1_linear_29_513)"/><defs><linearGradient id="paint0_linear_29_513" x1="10.459" y1="3.083" x2="10.459" y2="20.954" gradientUnits="userSpaceOnUse"><stop offset=".6" stop-color="#FF1B2D"/><stop offset="1" stop-color="#A70014"/></linearGradient><linearGradient id="paint1_linear_29_513" x1="15.101" y1="4.128" x2="15.101" y2="19.945" gradientUnits="userSpaceOnUse"><stop stop-color="#9C0000"/><stop offset=".7" stop-color="#FF4B4B"/></linearGradient></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

docs/img/browsers/safari.svg
+1
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

docs/img/browsers/vivaldi.svg
+1
View File
@@ -0,0 +1 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.937 21.263c4.063 0 6.316 0 7.79-1.474C21.2 18.316 21.2 16.063 21.2 12s0-6.316-1.473-7.79C18.253 2.737 16 2.737 11.937 2.737c-4.063 0-6.316 0-7.79 1.473C2.675 5.684 2.675 7.938 2.675 12c0 4.063 0 6.316 1.474 7.79 1.473 1.473 3.726 1.473 7.789 1.473z" fill="#EF3939"/><path d="M17.958 8.568A6.947 6.947 0 0 0 5.21 10.211a6.902 6.902 0 0 0 .715 5.305.22.22 0 0 0 .042.063l3.264 5.663 2.684.021c1.8 0 3.252 0 4.442-.126 1.474-.158 2.537-.526 3.358-1.348 1.19-1.189 1.42-2.905 1.463-5.663l-3.221-5.558z" fill="url(#paint0_linear_29_518)"/><path d="M16.81 7.095a6.924 6.924 0 0 0-9.81 0 6.957 6.957 0 0 0 2.25 11.328 6.925 6.925 0 0 0 7.56-1.507 6.957 6.957 0 0 0 0-9.821zm-.41 3.2l-3.431 5.968c-.211.369-.516.59-.948.621-.474.032-.842-.168-1.084-.579l-3.474-6.031c-.442-.769.053-1.706.937-1.748.463-.02.821.19 1.063.6.327.548.642 1.106.958 1.664l.695 1.2c.347.578.842.894 1.516.936a1.856 1.856 0 0 0 1.947-1.642c.01-.074.01-.147.021-.19 0-.326-.063-.6-.2-.862-.358-.716.021-1.506.79-1.685.631-.136 1.273.327 1.357.958a1.2 1.2 0 0 1-.147.79z" fill="#fff"/><defs><linearGradient id="paint0_linear_29_518" x1="8.446" y1="5.994" x2="17.298" y2="21.324" gradientUnits="userSpaceOnUse"><stop stop-opacity=".2"/><stop offset=".79" stop-opacity=".05"/></linearGradient></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

docs/img/cover-illustrations-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

docs/img/cover-illustrations.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 131 KiB

docs/img/cover-tabler-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

docs/img/cover-tabler.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

docs/img/icons/figma-plugin.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 168 KiB

docs/img/icons/package-angular-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

docs/img/icons/package-angular.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

docs/img/icons/package-eps-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

docs/img/icons/package-eps.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

docs/img/icons/package-js-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

docs/img/icons/package-js.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

docs/img/icons/package-pdf-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

docs/img/icons/package-pdf.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

docs/img/icons/package-png-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

docs/img/icons/package-png.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

docs/img/icons/package-preact-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

docs/img/icons/package-preact.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

docs/img/icons/package-react-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

docs/img/icons/package-react-native-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB

docs/img/icons/package-react-native.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 82 KiB

docs/img/icons/package-react.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

docs/img/icons/package-solidjs-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

docs/img/icons/package-solidjs.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

docs/img/icons/package-sprite-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

docs/img/icons/package-sprite.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

docs/img/icons/package-svelte-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

docs/img/icons/package-svelte.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

docs/img/icons/package-svg-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

docs/img/icons/package-svg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

docs/img/icons/package-vue-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

docs/img/icons/package-vue.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

docs/img/icons/package-webfont-dark.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

docs/img/icons/package-webfont.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 KiB

docs/ui/base/typography.mdx
+46 -16
View File
@@ -75,23 +75,53 @@ Text <sup>Superscripted</sup>
Here is an example of semantic text elements: Here is an example of semantic text elements:
```html example vertical separated columns={1} ```html example vertical separated columns={1}
<div><abbr title="Internationalization">I1f8N</abbr></div> <div>
<abbr title="Internationalization">I1f8N</abbr>
</div>
<div><strong>Bold</strong></div> <div><strong>Bold</strong></div>
<div><cite>Citation</cite></div> <div>
<div><code>Hello World!</code></div> <cite>Citation</cite>
<div><del>Deleted</del></div> </div>
<div><em>Emphasis</em></div> <div>
<div><i>Italic</i></div> <code>Hello World!</code>
<div><ins>Inserted</ins></div> </div>
<div><kbd>Ctrl + S</kbd></div> <div>
<div><mark>Highlighted</mark></div> <del>Deleted</del>
<div><s>Strikethrough</s></div> </div>
<div><samp>Sample</samp></div> <div>
<div>Text <sub>Subscripted</sub></div> <em>Emphasis</em>
<div>Text <sup>Superscripted</sup></div> </div>
<div><time>20:00</time></div> <div>
<div><u>Underline</u></div> <i>Italic</i>
<div><var>x</var> = <var>y</var> + 2</div> </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>Subscripted</sub>
</div>
<div>Text <sup>Superscripted</sup>
</div>
<div>
<time>20:00</time>
</div>
<div>
<u>Underline</u>
</div>
<div>
<var>x</var> = <var>y</var> + 2
</div>
``` ```
docs/ui/components/avatars.mdx
+3 -1
View File
@@ -109,7 +109,9 @@ Add a status indicator to your avatar to show, for instance, if a users is onlin
<span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)"> <span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)">
<span class="badge bg-success"></span> <span class="badge bg-success"></span>
</span> </span>
<span class="avatar"><span class="badge bg-warning"></span>SA</span> <span class="avatar">
<span class="badge bg-warning"></span>SA
</span>
<span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)"> <span class="avatar" style="background-image: url(/samples/avatars/022m.jpg)">
<span class="badge bg-info"></span> <span class="badge bg-info"></span>
</span> </span>
docs/ui/components/badges.mdx
+16 -8
View File
@@ -27,12 +27,18 @@ The default badges are square and come in the basic set of colors.
## Headings ## Headings
```html example height="240px" ```html example height="240px"
<h1>Example heading <span class="badge bg-secondary">New</span></h1> <h1>Example heading <span class="badge bg-secondary">New</span>
<h2>Example heading <span class="badge bg-secondary">New</span></h2> </h1>
<h3>Example heading <span class="badge bg-secondary">New</span></h3> <h2>Example heading <span class="badge bg-secondary">New</span>
<h4>Example heading <span class="badge bg-secondary">New</span></h4> </h2>
<h5>Example heading <span class="badge bg-secondary">New</span></h5> <h3>Example heading <span class="badge bg-secondary">New</span>
<h6>Example heading <span class="badge bg-secondary">New</span></h6> </h3>
<h4>Example heading <span class="badge bg-secondary">New</span>
</h4>
<h5>Example heading <span class="badge bg-secondary">New</span>
</h5>
<h6>Example heading <span class="badge bg-secondary">New</span>
</h6>
``` ```
## Outline badges ## Outline badges
@@ -114,8 +120,10 @@ Place the badge within an `<a>` element if you want it to perform the function o
Badges can be used as part of links or buttons to provide a counter. Badges can be used as part of links or buttons to provide a counter.
```html example centered separated height="7rem" ```html example centered separated height="7rem"
<button type="button" class="btn">Notifications <span class="badge bg-red ms-2">4</span></button> <button type="button" class="btn">Notifications <span class="badge bg-red ms-2">4</span>
<button type="button" class="btn">Notifications <span class="badge bg-green ms-2">4</span></button> </button>
<button type="button" class="btn">Notifications <span class="badge bg-green ms-2">4</span>
</button>
``` ```
```html ```html
docs/ui/components/breadcrumb.mdx
+126 -61
View File
@@ -7,87 +7,147 @@ description: Navigation aid for better structure.
## Default markup ## Default markup
Add the `:before` pseudo-element in `li` tags to use the default separators. The `active` modifier in a `li` tag will help you indicate the current page location and facilitate navigation within your website or app. 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.
```html example centered ```html
<ol class="breadcrumb" aria-label="breadcrumbs"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item">
<li class="breadcrumb-item"><a href="#">Library</a></li> <a href="#">...</a>
<li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li> </li>
<li class="breadcrumb-item active">
<a href="#">...</a>
</li>
</ol> </ol>
``` ```
## Breadcrumb variations Look at the example below to see how breadcrumbs work in practice.
If you wish to use different separators, modify the `$breadcrumb-variants` variable in the Tabler config. Depending on the aesthetics of your design, you can choose dots, bullets or arrows.
```html example centered ```html example centered
<ol class="breadcrumb breadcrumb-dots" aria-label="breadcrumbs"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item">
<li class="breadcrumb-item"><a href="#">Library</a></li> <a href="#">Home</a>
<li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li> </li>
<li class="breadcrumb-item">
<a href="#">Library</a>
</li>
<li class="breadcrumb-item active">
<a href="#">Data</a>
</li>
</ol> </ol>
``` ```
```html example centered ## Different separators
<ol class="breadcrumb breadcrumb-arrows" aria-label="breadcrumbs">
<li class="breadcrumb-item"><a href="#">Home</a></li> 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.
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li> ```html
<ol class="breadcrumb breadcrumb-dots">
...
</ol> </ol>
``` ```
```html example centered This example shows how to use different breadcrumb styles.
<ol class="breadcrumb breadcrumb-bullets" aria-label="breadcrumbs">
<li class="breadcrumb-item"><a href="#">Home</a></li> ```html example centered separated vertical
<li class="breadcrumb-item"><a href="#">Library</a></li> <ol class="breadcrumb breadcrumb-dots">
<li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li> <li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">Library</a>
</li>
<li class="breadcrumb-item active">
<a href="#">Data</a>
</li>
</ol> </ol>
<ol class="breadcrumb breadcrumb-arrows">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">Library</a>
</li>
<li class="breadcrumb-item active">
<a href="#">Data</a>
</li>
</ol>
<ol class="breadcrumb breadcrumb-bullets">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">Library</a>
</li>
<li class="breadcrumb-item active">
<a href="#">Data</a>
</li>
</ol>
```
## With icon
You can use icons in breadcrumbs to make them more visually appealing. The example below demonstrates how to use icons in breadcrumbs.
```html example centered
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">
<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" />
<polyline points="5 12 3 12 12 3 21 12 19 12" />
<path d="M5 12v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-8" />
<rect x="10" y="12" width="4" height="4" />
</svg>
</a>
</li>
<li class="breadcrumb-item">
<a href="#">Library</a>
</li>
<li class="breadcrumb-item active">
<a href="#">Data</a>
</li>
</ol>
```
## 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.
```html example centered
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-muted">
<li class="breadcrumb-item">
<a href="#">Home</a>
</li>
<li class="breadcrumb-item">
<a href="#">Library</a>
</li>
<li class="breadcrumb-item active">
<a href="#">Data</a>
</li>
</ol>
</nav>
``` ```
## Breadcrumb in headers ## Breadcrumb in headers
If you wish to use breadcrumbs in headers, place them above the 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.
```html example vertical centered columns={3} ```html example vertical centered columns={3} background="surface"
<div class="page-header"> <div class="page-header">
<div class="row align-items-center mw-100"> <div class="row align-items-center mw-100">
<div class="col"> <div class="col">
<div class="mb-1"> <div class="mb-1">
<ol class="breadcrumb" aria-label="breadcrumbs"> <ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item">
<li class="breadcrumb-item"><a href="#">Library</a></li> <a href="#">Home</a>
<li class="breadcrumb-item active" aria-current="page"><a href="#">Articles</a></li> </li>
</ol> <li class="breadcrumb-item">
</div> <a href="#">Library</a>
<h2 class="page-title"> </li>
<span class="text-truncate">Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods.</span> <li class="breadcrumb-item active">
</h2> <a href="#">Articles</a>
</div> </li>
<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>
```
```html
<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> </ol>
</div> </div>
<h2 class="page-title"> <h2 class="page-title">
@@ -97,8 +157,12 @@ If you wish to use breadcrumbs in headers, place them above the headers.
<div class="col-auto"> <div class="col-auto">
<div class="btn-list"> <div class="btn-list">
<a href="#" class="btn d-none d-md-inline-flex"> <a href="#" class="btn d-none d-md-inline-flex">
<!-- SVG icon from http://tabler.io/icons/icon/edit --> <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">
<svg>...</svg> Edit <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>
<a href="#" class="btn btn-primary">Publish</a> <a href="#" class="btn btn-primary">Publish</a>
</div> </div>
@@ -106,3 +170,4 @@ If you wish to use breadcrumbs in headers, place them above the headers.
</div> </div>
</div> </div>
``` ```
docs/ui/components/buttons.mdx
+103 -49
View File
@@ -86,7 +86,9 @@ Use the `.btn-ghost-*` class to make your button look simple yet aesthetically a
<a href="#" class="btn btn-ghost-danger">Danger</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-info">Info</a>
<a href="#" class="btn btn-ghost-dark">Dark</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> <div class="p-2 bg-dark">
<a href="#" class="btn btn-ghost-light">Light</a>
</div>
``` ```
```html ```html
@@ -191,37 +193,49 @@ Label your button with text and add an icon to communiacate the action and make
Icons can be found [**here**](/docs/components/icons) Icons can be found [**here**](/docs/components/icons)
```html example centered separated height="7rem" ```html example centered separated height="7rem"
<button type="button" 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"> <button type="button" 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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /> <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
<polyline points="7 9 12 4 17 9" /> <polyline points="7 9 12 4 17 9" />
<line x1="12" y1="4" x2="12" y2="16" /> <line x1="12" y1="4" x2="12" y2="16" />
</svg> Upload</button> </svg> Upload
<button type="button" class="btn btn-warning"><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"> </button>
<button type="button" class="btn btn-warning">
<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 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" /> <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> I like</button> </svg> I like
<button type="button" class="btn btn-success"><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"> </button>
<button type="button" class="btn btn-success">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M5 12l5 5l10 -10" /> <path d="M5 12l5 5l10 -10" />
</svg> I agree</button> </svg> I agree
<button type="button" 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"> </button>
<button type="button" 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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="12" y1="5" x2="12" y2="19" /> <line x1="12" y1="5" x2="12" y2="19" />
<line x1="5" y1="12" x2="19" y2="12" /> <line x1="5" y1="12" x2="19" y2="12" />
</svg> More</button> </svg> More
<button type="button" class="btn btn-danger"><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"> </button>
<button type="button" class="btn btn-danger">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" /> <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
<path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" /> <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
</svg> Link</button> </svg> Link
<button type="button" class="btn btn-info"><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"> </button>
<button type="button" class="btn btn-info">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1" /> <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1" />
<line x1="12" y1="12" x2="12" y2="12.01" /> <line x1="12" y1="12" x2="12" y2="12.01" />
<line x1="8" y1="12" x2="8" y2="12.01" /> <line x1="8" y1="12" x2="8" y2="12.01" />
<line x1="16" y1="12" x2="16" y2="12.01" /> <line x1="16" y1="12" x2="16" y2="12.01" />
</svg> Comment</button> </svg> Comment
</button>
``` ```
```html ```html
@@ -262,76 +276,104 @@ Icons can be found [**here**](/docs/components/icons)
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. 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.
```html example vertical centered separated scrollable height="15rem" ```html example vertical centered separated scrollable height="15rem"
<a href="#" class="btn btn-facebook"><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"> <a href="#" class="btn btn-facebook">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /> <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
</svg> Facebook</a> </svg> Facebook
<a href="#" class="btn btn-twitter"><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"> </a>
<a href="#" class="btn btn-twitter">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /> <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" />
</svg> Twitter</a> </svg> Twitter
<a href="#" class="btn btn-google"><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"> </a>
<a href="#" class="btn btn-google">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M17.788 5.108a9 9 0 1 0 3.212 6.892h-8" /> <path d="M17.788 5.108a9 9 0 1 0 3.212 6.892h-8" />
</svg> Google</a> </svg> Google
<a href="#" class="btn btn-youtube"><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"> </a>
<a href="#" class="btn btn-youtube">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="3" y="5" width="18" height="14" rx="4" /> <rect x="3" y="5" width="18" height="14" rx="4" />
<path d="M10 9l5 3l-5 3z" /> <path d="M10 9l5 3l-5 3z" />
</svg> Youtube</a> </svg> Youtube
<a href="#" class="btn btn-vimeo"><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"> </a>
<a href="#" class="btn btn-vimeo">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1.003 1.5 3c-1.052 2.005 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z" /> <path d="M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1.003 1.5 3c-1.052 2.005 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5z" />
</svg> Vimeo</a> </svg> Vimeo
<a href="#" class="btn btn-dribbble"><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"> </a>
<a href="#" class="btn btn-dribbble">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="12" r="9" /> <circle cx="12" cy="12" r="9" />
<path d="M9 3.6c5 6 7 10.5 7.5 16.2" /> <path d="M9 3.6c5 6 7 10.5 7.5 16.2" />
<path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4" /> <path d="M6.4 19c3.5 -3.5 6 -6.5 14.5 -6.4" />
<path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5" /> <path d="M3.1 10.75c5 0 9.814 -.38 15.314 -5" />
</svg> Dribbble</a> </svg> Dribbble
<a href="#" class="btn btn-github"><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"> </a>
<a href="#" class="btn btn-github">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /> <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
</svg> Github</a> </svg> Github
<a href="#" class="btn btn-instagram"><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"> </a>
<a href="#" class="btn btn-instagram">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="4" y="4" width="16" height="16" rx="4" /> <rect x="4" y="4" width="16" height="16" rx="4" />
<circle cx="12" cy="12" r="3" /> <circle cx="12" cy="12" r="3" />
<line x1="16.5" y1="7.5" x2="16.5" y2="7.501" /> <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
</svg> Instagram</a> </svg> Instagram
<a href="#" class="btn btn-pinterest"><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"> </a>
<a href="#" class="btn btn-pinterest">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="8" y1="20" x2="12" y2="11" /> <line x1="8" y1="20" x2="12" y2="11" />
<path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" /> <path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" />
<circle cx="12" cy="12" r="9" /> <circle cx="12" cy="12" r="9" />
</svg> Pinterest</a> </svg> Pinterest
<a href="#" class="btn btn-vk"><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"> </a>
<a href="#" class="btn btn-vk">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 -.004a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" /> <path d="M14 19h-4a8 8 0 0 1 -8 -8v-5h4v5a4 4 0 0 0 4 4h0v-9h4v4.5l.03 -.004a4.531 4.531 0 0 0 3.97 -4.496h4l-.342 1.711a6.858 6.858 0 0 1 -3.658 4.789h0a5.34 5.34 0 0 1 3.566 4.111l.434 2.389h0h-4a4.531 4.531 0 0 0 -3.97 -4.496v4.5z" />
</svg> VK</a> </svg> VK
<a href="#" class="btn btn-rss"><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"> </a>
<a href="#" class="btn btn-rss">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="5" cy="19" r="1" /> <circle cx="5" cy="19" r="1" />
<path d="M4 4a16 16 0 0 1 16 16" /> <path d="M4 4a16 16 0 0 1 16 16" />
<path d="M4 11a9 9 0 0 1 9 9" /> <path d="M4 11a9 9 0 0 1 9 9" />
</svg> RSS</a> </svg> RSS
<a href="#" class="btn btn-flickr"><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"> </a>
<a href="#" class="btn btn-flickr">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="7" cy="12" r="3" /> <circle cx="7" cy="12" r="3" />
<circle cx="17" cy="12" r="3" /> <circle cx="17" cy="12" r="3" />
</svg> Flickr</a> </svg> Flickr
<a href="#" class="btn btn-bitbucket"><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"> </a>
<a href="#" class="btn btn-bitbucket">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" /> <path d="M3.648 4a0.64 .64 0 0 0 -.64 .744l3.14 14.528c.07 .417 .43 .724 .852 .728h10a0.644 .644 0 0 0 .642 -.539l3.35 -14.71a0.641 .641 0 0 0 -.64 -.744l-16.704 -.007z" />
<path d="M14 15h-4l-1 -6h6z" /> <path d="M14 15h-4l-1 -6h6z" />
</svg> Bitbucket</a> </svg> Bitbucket
<a href="#" class="btn btn-tabler"><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"> </a>
<a href="#" class="btn btn-tabler">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M8 9l3 3l-3 3" /> <path d="M8 9l3 3l-3 3" />
<line x1="13" y1="15" x2="16" y2="15" /> <line x1="13" y1="15" x2="16" y2="15" />
<rect x="4" y="4" width="16" height="16" rx="4" /> <rect x="4" y="4" width="16" height="16" rx="4" />
</svg> Tabler</a> </svg> Tabler
</a>
``` ```
```html ```html
@@ -667,7 +709,8 @@ Create a dropdown button that will encourage users to click for more options. Yo
```html example centered separated height="7rem" ```html example centered separated height="7rem"
<div class="dropdown"> <div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"><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"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="4" y="5" width="16" height="16" rx="2" /> <rect x="4" y="5" width="16" height="16" rx="2" />
<line x1="16" y1="3" x2="16" y2="7" /> <line x1="16" y1="3" x2="16" y2="7" />
@@ -675,14 +718,16 @@ Create a dropdown button that will encourage users to click for more options. Yo
<line x1="4" y1="11" x2="20" y2="11" /> <line x1="4" y1="11" x2="20" y2="11" />
<line x1="11" y1="15" x2="12" y2="15" /> <line x1="11" y1="15" x2="12" y2="15" />
<line x1="12" y1="15" x2="12" y2="18" /> <line x1="12" y1="15" x2="12" y2="18" />
</svg></button> </svg>
</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Another action</a>
</div> </div>
</div> </div>
<div class="dropdown"> <div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"><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"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
<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 stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="4" y="5" width="16" height="16" rx="2" /> <rect x="4" y="5" width="16" height="16" rx="2" />
<line x1="16" y1="3" x2="16" y2="7" /> <line x1="16" y1="3" x2="16" y2="7" />
@@ -690,7 +735,8 @@ Create a dropdown button that will encourage users to click for more options. Yo
<line x1="4" y1="11" x2="20" y2="11" /> <line x1="4" y1="11" x2="20" y2="11" />
<line x1="11" y1="15" x2="12" y2="15" /> <line x1="11" y1="15" x2="12" y2="15" />
<line x1="12" y1="15" x2="12" y2="18" /> <line x1="12" y1="15" x2="12" y2="18" />
</svg> Show calendar</button> </svg> Show calendar
</button>
<div class="dropdown-menu"> <div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Another action</a>
@@ -769,7 +815,9 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
``` ```
```html example centered height="7rem" ```html example centered height="7rem"
<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-primary">
<span class="spinner-border spinner-border-sm me-2" role="status"></span> Button
</a>
``` ```
```html ```html
@@ -846,9 +894,15 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align
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. 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.
```html example centered separated height="7rem" ```html example centered separated height="7rem"
<a href="#" class="btn"><span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1542534759-05f6c34a9e63?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar</a> <a href="#" class="btn">
<a href="#" class="btn"><span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1546539782-6fc531453083?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar</a> <span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1542534759-05f6c34a9e63?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar
<a href="#" class="btn"><span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1541585452861-0375331f10bf?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar</a> </a>
<a href="#" class="btn">
<span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1546539782-6fc531453083?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar
</a>
<a href="#" class="btn">
<span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1541585452861-0375331f10bf?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar
</a>
``` ```
```html ```html
docs/ui/components/cards.mdx
+30 -10
View File
@@ -100,7 +100,9 @@ Add an image to your blog post card to make it eye-catching. You can do it by ad
<img class="card-img-top" src="/samples/photos/book-on-the-grass.jpg" alt="" /> <img class="card-img-top" src="/samples/photos/book-on-the-grass.jpg" alt="" />
</a> </a>
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3> <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="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"> <div class="d-flex align-items-center pt-4 mt-auto">
<span class="avatar" style="background-image: url(/samples/avatars/023m.jpg)"></span> <span class="avatar" style="background-image: url(/samples/avatars/023m.jpg)"></span>
@@ -158,7 +160,9 @@ You can also add an image on the left side of the card. To do it, add the `.card
</div> </div>
<div class="col"> <div class="col">
<div class="card-body"> <div class="card-body">
<h3 class="card-title"><a href="#">Shut up!</a></h3> <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="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"> <div class="d-flex align-items-center pt-4 mt-auto">
<span class="avatar" style="background-image: url(/samples/avatars/029m.jpg)"></span> <span class="avatar" style="background-image: url(/samples/avatars/029m.jpg)"></span>
@@ -249,10 +253,18 @@ Organize multiple cards into tabs to be able to display more content in a well-o
```html example columns={2} centered height={400} background="base" ```html example columns={2} centered height={400} background="base"
<div class="card-tabs"> <div class="card-tabs">
<ul class="nav nav-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">
<li class="nav-item"><a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a></li> <a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a>
<li class="nav-item"><a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a></li> </li>
<li class="nav-item"><a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</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> </ul>
<div class="tab-content"> <div class="tab-content">
<div id="tab-top-1" class="card tab-pane active show"> <div id="tab-top-1" class="card tab-pane active show">
@@ -296,10 +308,18 @@ Organize multiple cards into tabs to be able to display more content in a well-o
<div class="card-tabs"> <div class="card-tabs">
<!-- Cards navigation --> <!-- Cards navigation -->
<ul class="nav nav-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">
<li class="nav-item"><a href="#tab-top-2" class="nav-link" data-bs-toggle="tab">Tab 2</a></li> <a href="#tab-top-1" class="nav-link active" data-bs-toggle="tab">Tab 1</a>
<li class="nav-item"><a href="#tab-top-3" class="nav-link" data-bs-toggle="tab">Tab 3</a></li> </li>
<li class="nav-item"><a href="#tab-top-4" class="nav-link" data-bs-toggle="tab">Tab 4</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> </ul>
<div class="tab-content"> <div class="tab-content">
<!-- Content of card #1 --> <!-- Content of card #1 -->
docs/ui/components/dropdowns.mdx
+12 -4
View File
@@ -172,9 +172,15 @@ Use dropdowns with checkboxes to allow users to select options from a predefined
<div class="dropdown"> <div class="dropdown">
<a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a> <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
<div class="dropdown-menu"> <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">
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 2</label> <input class="form-check-input m-0 me-2" type="radio" /> Option 1
<label class="dropdown-item"><input class="form-check-input m-0 me-2" type="radio" /> Option 3</label> </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>
</div> </div>
``` ```
@@ -222,7 +228,9 @@ Use a dropdown with card content to make it easy for users to get more informati
<img class="card-img-top" src="/samples/photos/friends-at-a-restaurant-drinking-wine.jpg" alt="How do you know she is a witch?" /> <img class="card-img-top" src="/samples/photos/friends-at-a-restaurant-drinking-wine.jpg" alt="How do you know she is a witch?" />
</a> </a>
<div class="card-body d-flex flex-column"> <div class="card-body d-flex flex-column">
<h3 class="card-title"><a href="#">How do you know she is a witch?</a></h3> <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="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"> <div class="d-flex align-items-center pt-4 mt-auto">
<span class="avatar" style="background-image: url(/samples/avatars/013m.jpg)"></span> <span class="avatar" style="background-image: url(/samples/avatars/013m.jpg)"></span>
docs/ui/components/empty.mdx
+2 -1
View File
@@ -42,7 +42,8 @@ Make your empty state screen more attractive and engaging by adding an illustrat
```html example height="300px" ```html example height="300px"
<div class="empty"> <div class="empty">
<div class="empty-img"><img src="..." height="128" alt="" /> <div class="empty-img">
<img src="..." height="128" alt="" />
</div> </div>
<p class="empty-title">Invoices are managed from here</p> <p class="empty-title">Invoices are managed from here</p>
<p class="empty-subtitle text-secondary"> <p class="empty-subtitle text-secondary">
docs/ui/components/modals.mdx
+8 -4
View File
@@ -54,12 +54,16 @@ description: Dialogs for notifications and content.
<div class="modal-footer"> <div class="modal-footer">
<div class="w-100"> <div class="w-100">
<div class="row"> <div class="row">
<div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal"> <div class="col">
<a href="#" class="btn w-100" data-bs-dismiss="modal">
Cancel Cancel
</a></div> </a>
<div class="col"><a href="#" class="btn btn-danger w-100" data-bs-dismiss="modal"> </div>
<div class="col">
<a href="#" class="btn btn-danger w-100" data-bs-dismiss="modal">
Delete 84 items Delete 84 items
</a></div> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
docs/ui/components/popover.mdx
+1 -3
View File
@@ -48,9 +48,7 @@ Popover can be triggered `manual`, with a `click` and on `focus` and on `hover`.
``` ```
```html ```html
<button type="button" class="btn btn-primary" data-bs-trigger="hover" data-bs-toggle="popover" <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?">
title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?"
>
Hover to toggle popover Hover to toggle popover
</button> </button>
``` ```
docs/ui/components/spinners.mdx
+2 -1
View File
@@ -123,7 +123,8 @@ Look at the example below to see how the button with a spinner works:
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 `span` element. 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 `span` element.
```html example centered code background="bg-light" ```html example centered code background="bg-light"
<h1>Loading<span class="animated-dots"></span></h1> <h1>Loading<span class="animated-dots"></span>
</h1>
``` ```
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. 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.
docs/ui/components/tables.mdx
+31 -12
View File
@@ -29,7 +29,9 @@ The `.table` class adds basic styling to a table:
<td class="text-secondary"> <td class="text-secondary">
UI Designer, Training UI Designer, Training
</td> </td>
<td class="text-secondary"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td> <td class="text-secondary">
<a href="#" class="text-reset">paweluna@howstuffworks.com</a>
</td>
<td class="text-secondary"> <td class="text-secondary">
User User
</td> </td>
@@ -42,7 +44,9 @@ The `.table` class adds basic styling to a table:
<td class="text-secondary"> <td class="text-secondary">
Chemical Engineer, Support Chemical Engineer, Support
</td> </td>
<td class="text-secondary"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td> <td class="text-secondary">
<a href="#" class="text-reset">jlewzey1@seesaa.net</a>
</td>
<td class="text-secondary"> <td class="text-secondary">
Admin Admin
</td> </td>
@@ -55,7 +59,9 @@ The `.table` class adds basic styling to a table:
<td class="text-secondary"> <td class="text-secondary">
Geologist IV, Support Geologist IV, Support
</td> </td>
<td class="text-secondary"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td> <td class="text-secondary">
<a href="#" class="text-reset">mhulme2@domainmarket.com</a>
</td>
<td class="text-secondary"> <td class="text-secondary">
User User
</td> </td>
@@ -68,7 +74,9 @@ The `.table` class adds basic styling to a table:
<td class="text-secondary"> <td class="text-secondary">
Research Nurse, Sales Research Nurse, Sales
</td> </td>
<td class="text-secondary"><a href="#" class="text-reset">dslane3@epa.gov</a></td> <td class="text-secondary">
<a href="#" class="text-reset">dslane3@epa.gov</a>
</td>
<td class="text-secondary"> <td class="text-secondary">
Owner Owner
</td> </td>
@@ -81,7 +89,9 @@ The `.table` class adds basic styling to a table:
<td class="text-secondary"> <td class="text-secondary">
VP Product Management, Accounting VP Product Management, Accounting
</td> </td>
<td class="text-secondary"><a href="#" class="text-reset">elevet4@senate.gov</a></td> <td class="text-secondary">
<a href="#" class="text-reset">elevet4@senate.gov</a>
</td>
<td class="text-secondary"> <td class="text-secondary">
Admin Admin
</td> </td>
@@ -185,8 +195,7 @@ If you don't want the table cell content to wrap to another line, use the `table
```html ```html
<div class="table-responsive"> <div class="table-responsive">
<table <table class="table table-vcenter table-nowrap">
class="table table-vcenter table-nowrap">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@@ -203,7 +212,9 @@ If you don't want the table cell content to wrap to another line, use the `table
<td class="text-secondary"> <td class="text-secondary">
UI Designer, Training UI Designer, Training
</td> </td>
<td class="text-secondary"><a href="#" class="text-reset">paweluna@howstuffworks.com</a></td> <td class="text-secondary">
<a href="#" class="text-reset">paweluna@howstuffworks.com</a>
</td>
<td class="text-secondary"> <td class="text-secondary">
User User
</td> </td>
@@ -220,7 +231,9 @@ If you don't want the table cell content to wrap to another line, use the `table
<td class="text-secondary"> <td class="text-secondary">
Chemical Engineer, Support Chemical Engineer, Support
</td> </td>
<td class="text-secondary"><a href="#" class="text-reset">jlewzey1@seesaa.net</a></td> <td class="text-secondary">
<a href="#" class="text-reset">jlewzey1@seesaa.net</a>
</td>
<td class="text-secondary"> <td class="text-secondary">
Admin Admin
</td> </td>
@@ -237,7 +250,9 @@ If you don't want the table cell content to wrap to another line, use the `table
<td class="text-secondary"> <td class="text-secondary">
Geologist IV, Support Geologist IV, Support
</td> </td>
<td class="text-secondary"><a href="#" class="text-reset">mhulme2@domainmarket.com</a></td> <td class="text-secondary">
<a href="#" class="text-reset">mhulme2@domainmarket.com</a>
</td>
<td class="text-secondary"> <td class="text-secondary">
User User
</td> </td>
@@ -254,7 +269,9 @@ If you don't want the table cell content to wrap to another line, use the `table
<td class="text-secondary"> <td class="text-secondary">
Research Nurse, Sales Research Nurse, Sales
</td> </td>
<td class="text-secondary"><a href="#" class="text-reset">dslane3@epa.gov</a></td> <td class="text-secondary">
<a href="#" class="text-reset">dslane3@epa.gov</a>
</td>
<td class="text-secondary"> <td class="text-secondary">
Owner Owner
</td> </td>
@@ -271,7 +288,9 @@ If you don't want the table cell content to wrap to another line, use the `table
<td class="text-secondary"> <td class="text-secondary">
VP Product Management, Accounting VP Product Management, Accounting
</td> </td>
<td class="text-secondary"><a href="#" class="text-reset">elevet4@senate.gov</a></td> <td class="text-secondary">
<a href="#" class="text-reset">elevet4@senate.gov</a>
</td>
<td class="text-secondary"> <td class="text-secondary">
Admin Admin
</td> </td>
docs/ui/components/tabs.mdx
+10 -5
View File
@@ -45,22 +45,27 @@ Add icons to your tab labels, if you want to use a visual element and make the t
<div class="card-header"> <div class="card-header">
<ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs"> <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
<li class="nav-item"> <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"> <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" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<polyline points="5 12 3 12 12 3 21 12 19 12" /> <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="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" /> <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg> Home</a> </svg> Home
</a>
</li> </li>
<li class="nav-item"> <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"> <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" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="7" r="4" /> <circle cx="12" cy="7" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /> <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg> Profile</a> </svg> Profile
</a>
</li> </li>
<li class="nav-item ms-auto"> <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"> <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 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" /> <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" /> <circle cx="12" cy="12" r="3" />
docs/ui/components/timelines.mdx
+30 -12
View File
@@ -87,9 +87,15 @@ The available timeline design is comprised of many components that will help you
<div class="text-secondary float-end">2 days ago</div> <div class="text-secondary float-end">2 days ago</div>
<h4>+3 Friend Requests</h4> <h4>+3 Friend Requests</h4>
<div class="avatar-list mt-3"> <div class="avatar-list mt-3">
<span class="avatar" style="background-image: url(...)"><span class="badge bg-success"></span></span> <span class="avatar" style="background-image: url(...)">
<span class="avatar"><span class="badge bg-success"></span>JL</span> <span class="badge bg-success"></span>
<span class="avatar" style="background-image: url(...)"><span class="badge bg-success"></span></span> </span>
<span class="avatar">
<span class="badge bg-success"></span>JL
</span>
<span class="avatar" style="background-image: url(...)">
<span class="badge bg-success"></span>
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -205,11 +211,14 @@ The available timeline design is comprised of many components that will help you
<h4>+3 Friend Requests</h4> <h4>+3 Friend Requests</h4>
<div class="avatar-list mt-3"> <div class="avatar-list mt-3">
<span class="avatar" style="background-image: url(...)"> <span class="avatar" style="background-image: url(...)">
<span class="badge bg-success"></span></span> <span class="badge bg-success"></span>
</span>
<span class="avatar"> <span class="avatar">
<span class="badge bg-success"></span>JL</span> <span class="badge bg-success"></span>JL
</span>
<span class="avatar" style="background-image: url(...)"> <span class="avatar" style="background-image: url(...)">
<span class="badge bg-success"></span></span> <span class="badge bg-success"></span>
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -338,9 +347,15 @@ Use a simplified version of the timeline, if it suits your design better. You ca
<div class="text-secondary float-end">2 days ago</div> <div class="text-secondary float-end">2 days ago</div>
<h4>+3 Friend Requests</h4> <h4>+3 Friend Requests</h4>
<div class="avatar-list mt-3"> <div class="avatar-list mt-3">
<span class="avatar" style="background-image: url(...)"><span class="badge bg-success"></span></span> <span class="avatar" style="background-image: url(...)">
<span class="avatar"><span class="badge bg-success"></span>JL</span> <span class="badge bg-success"></span>
<span class="avatar" style="background-image: url(...)"><span class="badge bg-success"></span></span> </span>
<span class="avatar">
<span class="badge bg-success"></span>JL
</span>
<span class="avatar" style="background-image: url(...)">
<span class="badge bg-success"></span>
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -456,11 +471,14 @@ Use a simplified version of the timeline, if it suits your design better. You ca
<h4>+3 Friend Requests</h4> <h4>+3 Friend Requests</h4>
<div class="avatar-list mt-3"> <div class="avatar-list mt-3">
<span class="avatar" style="background-image: url(...)"> <span class="avatar" style="background-image: url(...)">
<span class="badge bg-success"></span></span> <span class="badge bg-success"></span>
</span>
<span class="avatar"> <span class="avatar">
<span class="badge bg-success"></span>JL</span> <span class="badge bg-success"></span>JL
</span>
<span class="avatar" style="background-image: url(...)"> <span class="avatar" style="background-image: url(...)">
<span class="badge bg-success"></span></span> <span class="badge bg-success"></span>
</span>
</div> </div>
</div> </div>
</div> </div>
docs/ui/components/tracking.mdx
+5 -1
View File
@@ -143,7 +143,11 @@ You can add a tracking component inside the cards to give your reports a fresh l
<div class="me-auto"> <div class="me-auto">
<span class="text-green d-inline-flex align-items-center lh-1"> <span class="text-green d-inline-flex align-items-center lh-1">
2% 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> <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> </span>
</div> </div>
</div> </div>
docs/ui/forms/form-helpers.mdx
+4 -2
View File
@@ -64,14 +64,16 @@ Look at the example below to see how the form hint works:
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. 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.
```html ```html
<label class="form-label">Textarea <span class="form-label-description">56/100</span></label> <label class="form-label">Textarea <span class="form-label-description">56/100</span>
</label>
``` ```
This example shows how to use the additional info inside the label: This example shows how to use the additional info inside the label:
```html example centered columns={1} height="15rem" ```html example centered columns={1} height="15rem"
<div> <div>
<label class="form-label">Textarea <span class="form-label-description">56/100</span></label> <label class="form-label">Textarea <span class="form-label-description">56/100</span>
</label>
<textarea class="form-control" name="" rows="3" placeholder="Content.."></textarea> <textarea class="form-control" name="" rows="3" placeholder="Content.."></textarea>
</div> </div>
``` ```
docs/ui/forms/form-selectboxes.mdx
+16 -8
View File
@@ -149,34 +149,42 @@ You can also add text to the element. Look at the example below to see how it wo
<div class="form-selectgroup"> <div class="form-selectgroup">
<label class="form-selectgroup-item"> <label class="form-selectgroup-item">
<input type="radio" name="icons" value="home" class="form-selectgroup-input" checked /> <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"> <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" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<polyline points="5 12 3 12 12 3 21 12 19 12" /> <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="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" /> <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" />
</svg> Home</span> </svg> Home
</span>
</label> </label>
<label class="form-selectgroup-item"> <label class="form-selectgroup-item">
<input type="radio" name="icons" value="user" class="form-selectgroup-input" /> <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"> <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" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="7" r="4" /> <circle cx="12" cy="7" r="4" />
<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /> <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
</svg> User</span> </svg> User
</span>
</label> </label>
<label class="form-selectgroup-item"> <label class="form-selectgroup-item">
<input type="radio" name="icons" value="circle" class="form-selectgroup-input" /> <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"> <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" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="12" r="9" /> <circle cx="12" cy="12" r="9" />
</svg> Circle</span> </svg> Circle
</span>
</label> </label>
<label class="form-selectgroup-item"> <label class="form-selectgroup-item">
<input type="radio" name="icons" value="square" class="form-selectgroup-input" /> <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"> <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" /> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="4" y="4" width="16" height="16" rx="2" /> <rect x="4" y="4" width="16" height="16" rx="2" />
</svg> Square</span> </svg> Square
</span>
</label> </label>
</div> </div>
</div> </div>
docs/ui/getting-started/development.mdx
+32
View File
@@ -0,0 +1,32 @@
---
title: Development
description: Learn how to install Tabler and set up the development environment.
summary: This guide provides step-by-step instructions for setting up the environment, including installing Node.js, Ruby, and Bundler, configuring the build system, and running Tabler locally to preview changes in real-time, along with guidance on reporting bugs or submitting feature requests through GitHub.
order: 11
---
## Set up the environment
To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
4. [Install Bundler](https://bundler.io) with `gem install bundler` and, finally, run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
### Windows users
1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\Program Files\git\bin\bash.exe"` to change the default shell.
2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
Once you've completed the setup, you'll be able to run the various commands provided from the command line.
## Build Tabler locally
1. From the root `/tabler` directory, run `npm run start` in the command line.
2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
3. Any change in `/src` directory will build the application and refresh the page.
## Bugs and feature requests
Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
docs/ui/getting-started/download.mdx
+1 -4
View File
@@ -18,6 +18,7 @@ You can also include additional Tabler plugins:
```html ```html
<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-flags.min.css"> <link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-flags.min.css">
<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-payments.min.css"> <link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-payments.min.css">
<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-social.min.css">
<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-vendors.min.css"> <link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-vendors.min.css">
``` ```
@@ -27,10 +28,6 @@ Install Tabler in your Node.js powered apps with the npm package:
<TabsPackage name="@tabler/core" /> <TabsPackage name="@tabler/core" />
OR install for Webfonts
<TabsPackage name="@tabler/icons-webfont" />
Tabler uses other packages to enhance the functionality for example charts and input masks. These are not automatically installed to avoid huge Tabler uses other packages to enhance the 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. We support the following packages as of writing. dependency trees and need to be installed by using npm install. We support the following packages as of writing.
docs/ui/getting-started/faq.mdx
+1
View File
@@ -2,6 +2,7 @@
title: FAQ title: FAQ
summary: Answers to the most frequently asked questions. summary: Answers to the most frequently asked questions.
description: Common questions and answers. description: Common questions and answers.
order: 12
--- ---
## I found an issue, what can I do? ## I found an issue, what can I do?
docs/ui/getting-started/index.mdx
-26
View File
@@ -14,29 +14,3 @@ Tabler is fully responsive and compatible with all modern browsers. Thanks to it
Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully responsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community. 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/src/static/tabler-preview.png?2" src-dark="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/tabler-preview-dark.png?2" alt="Screencap of tabler site showing global traffic and statistics" /> <img src="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/tabler-preview.png?2" src-dark="https://raw.githubusercontent.com/tabler/tabler/dev/src/static/tabler-preview-dark.png?2" alt="Screencap of tabler site showing global traffic and statistics" />
## Set up the environment
To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
4. [Install Bundler](https://bundler.io) with `gem install bundler` and, finally, run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
### Windows users
1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\Program Files\git\bin\bash.exe"` to change the default shell.
2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
Once you've completed the setup, you'll be able to run the various commands provided from the command line.
## Build Tabler locally
1. From the root `/tabler` directory, run `npm run start` in the command line.
2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
3. Any change in `/src` directory will build the application and refresh the page.
## Bugs and feature requests
Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
docs/ui/index.mdx
+2
View File
@@ -4,3 +4,5 @@ order: 1
description: Free and open source web application UI kit based on Bootstrap 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. 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.
--- ---
![](/docs/cover-tabler.png)
docs/ui/layout/page-headers.mdx
+9 -3
View File
@@ -196,9 +196,15 @@ In addition to the breadcrumb, the header often includes actions or buttons that
<div class="col"> <div class="col">
<div class="mb-1"> <div class="mb-1">
<ol class="breadcrumb" aria-label="breadcrumbs"> <ol class="breadcrumb" aria-label="breadcrumbs">
<li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item">
<li class="breadcrumb-item"><a href="#">Library</a></li> <a href="#">Home</a>
<li class="breadcrumb-item active" aria-current="page"><a href="#">Articles</a></li> </li>
<li class="breadcrumb-item">
<a href="#">Library</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
<a href="#">Articles</a>
</li>
</ol> </ol>
</div> </div>
<h2 class="page-title"> <h2 class="page-title">
docs/ui/utilities/interactions.mdx
+6 -2
View File
@@ -19,6 +19,10 @@ Change the way in which the content is selected when the user interacts with it.
Tabler provides `.pe-none` and `.pe-auto` classes to prevent or add element interactions. Tabler provides `.pe-none` and `.pe-auto` classes to prevent or add element interactions.
```html example ```html example
<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p> <p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p> <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.
</p>
<p>
<a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).
</p>
``` ```
package.json
+1
View File
@@ -173,6 +173,7 @@
"plyr": "^3.7.8", "plyr": "^3.7.8",
"postcss": "^8.4.49", "postcss": "^8.4.49",
"prettier": "^2.8.8", "prettier": "^2.8.8",
"js-beautify": "^1.15.1",
"release-it": "^15.11.0", "release-it": "^15.11.0",
"request": "^2.88.2", "request": "^2.88.2",
"rollup": "2.79.2", "rollup": "2.79.2",
pnpm-lock.yaml
Generated
+68
View File
@@ -126,6 +126,9 @@ importers:
imask: imask:
specifier: ^7.6.1 specifier: ^7.6.1
version: 7.6.1 version: 7.6.1
js-beautify:
specifier: ^1.15.1
version: 1.15.1
jsvectormap: jsvectormap:
specifier: ^1.6.0 specifier: ^1.6.0
version: 1.6.0 version: 1.6.0
@@ -889,6 +892,9 @@ packages:
'@octokit/types@9.2.3': '@octokit/types@9.2.3':
resolution: {integrity: sha512-MMeLdHyFIALioycq+LFcA71v0S2xpQUX2cw6pPbHQjaibcHYwLnmK/kMZaWuGfGfjBJZ3wRUq+dOaWsvrPJVvA==} resolution: {integrity: sha512-MMeLdHyFIALioycq+LFcA71v0S2xpQUX2cw6pPbHQjaibcHYwLnmK/kMZaWuGfGfjBJZ3wRUq+dOaWsvrPJVvA==}
'@one-ini/wasm@0.1.1':
resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==}
'@orchidjs/sifter@1.1.0': '@orchidjs/sifter@1.1.0':
resolution: {integrity: sha512-mYwHCfr736cIWWdhhSZvDbf90AKt2xyrJspKFC3qyIJG1LtrJeJunYEqCGG4Aq2ijENbc4WkOjszcvNaIAS/pQ==} resolution: {integrity: sha512-mYwHCfr736cIWWdhhSZvDbf90AKt2xyrJspKFC3qyIJG1LtrJeJunYEqCGG4Aq2ijENbc4WkOjszcvNaIAS/pQ==}
@@ -1014,6 +1020,10 @@ packages:
'@yr/monotone-cubic-spline@1.0.3': '@yr/monotone-cubic-spline@1.0.3':
resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==} resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}
abbrev@2.0.0:
resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
accepts@1.3.8: accepts@1.3.8:
resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==} resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
engines: {node: '>= 0.6'} engines: {node: '>= 0.6'}
@@ -1563,6 +1573,10 @@ packages:
resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
engines: {node: '>= 0.8'} engines: {node: '>= 0.8'}
commander@10.0.1:
resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
engines: {node: '>=14'}
commander@11.0.0: commander@11.0.0:
resolution: {integrity: sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==} resolution: {integrity: sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==}
engines: {node: '>=16'} engines: {node: '>=16'}
@@ -1847,6 +1861,11 @@ packages:
ecc-jsbn@0.1.2: ecc-jsbn@0.1.2:
resolution: {integrity: sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==} resolution: {integrity: sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==}
editorconfig@1.0.4:
resolution: {integrity: sha512-L9Qe08KWTlqYMVvMcTIvMAdl1cDUubzRNYL+WfA4bLDMHe4nemKkpmYzkznE1FwLKu0EEmy6obgQKzMJrg4x9Q==}
engines: {node: '>=14'}
hasBin: true
ee-first@1.1.1: ee-first@1.1.1:
resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==} resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
@@ -2895,10 +2914,19 @@ packages:
resolution: {integrity: sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==} resolution: {integrity: sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==}
engines: {node: '>=14'} engines: {node: '>=14'}
js-beautify@1.15.1:
resolution: {integrity: sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==}
engines: {node: '>=14'}
hasBin: true
js-cleanup@1.2.0: js-cleanup@1.2.0:
resolution: {integrity: sha512-JeDD0yiiSt80fXzAVa/crrS0JDPQljyBG/RpOtaSbyDq03VHa9szJWMaWOYU/bcTn412uMN2MxApXq8v79cUiQ==} resolution: {integrity: sha512-JeDD0yiiSt80fXzAVa/crrS0JDPQljyBG/RpOtaSbyDq03VHa9szJWMaWOYU/bcTn412uMN2MxApXq8v79cUiQ==}
engines: {node: ^10.14.2 || >=12.0.0} engines: {node: ^10.14.2 || >=12.0.0}
js-cookie@3.0.5:
resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
engines: {node: '>=14'}
js-tokens@4.0.0: js-tokens@4.0.0:
resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
@@ -3211,6 +3239,10 @@ packages:
resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==} resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
engines: {node: '>=10'} engines: {node: '>=10'}
minimatch@9.0.1:
resolution: {integrity: sha512-0jWhJpD/MdhPXwPuiRkCbfYfSKp2qnn2eOc279qI7f+osl/l+prKSrvhg157zSYvx/1nmgn2NqdT6k2Z7zSH9w==}
engines: {node: '>=16 || 14 >=14.17'}
minimatch@9.0.4: minimatch@9.0.4:
resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==} resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==}
engines: {node: '>=16 || 14 >=14.17'} engines: {node: '>=16 || 14 >=14.17'}
@@ -3294,6 +3326,11 @@ packages:
node-releases@2.0.18: node-releases@2.0.18:
resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==} resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
nopt@7.2.1:
resolution: {integrity: sha512-taM24ViiimT/XntxbPyJQzCG+p4EKOpgD3mxFwW38mGjVUrfERQOeY4EDHjdnptttfHuHQXFx+lTP08Q+mLa/w==}
engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
hasBin: true
normalize-package-data@2.5.0: normalize-package-data@2.5.0:
resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==} resolution: {integrity: sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==}
@@ -5787,6 +5824,8 @@ snapshots:
dependencies: dependencies:
'@octokit/openapi-types': 17.2.0 '@octokit/openapi-types': 17.2.0
'@one-ini/wasm@0.1.1': {}
'@orchidjs/sifter@1.1.0': '@orchidjs/sifter@1.1.0':
dependencies: dependencies:
'@orchidjs/unicode-variants': 1.1.2 '@orchidjs/unicode-variants': 1.1.2
@@ -5900,6 +5939,8 @@ snapshots:
'@yr/monotone-cubic-spline@1.0.3': {} '@yr/monotone-cubic-spline@1.0.3': {}
abbrev@2.0.0: {}
accepts@1.3.8: accepts@1.3.8:
dependencies: dependencies:
mime-types: 2.1.35 mime-types: 2.1.35
@@ -6565,6 +6606,8 @@ snapshots:
dependencies: dependencies:
delayed-stream: 1.0.0 delayed-stream: 1.0.0
commander@10.0.1: {}
commander@11.0.0: {} commander@11.0.0: {}
commander@2.20.3: {} commander@2.20.3: {}
@@ -6817,6 +6860,13 @@ snapshots:
jsbn: 0.1.1 jsbn: 0.1.1
safer-buffer: 2.1.2 safer-buffer: 2.1.2
editorconfig@1.0.4:
dependencies:
'@one-ini/wasm': 0.1.1
commander: 10.0.1
minimatch: 9.0.1
semver: 7.5.4
ee-first@1.1.1: {} ee-first@1.1.1: {}
electron-to-chromium@1.5.18: {} electron-to-chromium@1.5.18: {}
@@ -8063,12 +8113,22 @@ snapshots:
optionalDependencies: optionalDependencies:
'@pkgjs/parseargs': 0.11.0 '@pkgjs/parseargs': 0.11.0
js-beautify@1.15.1:
dependencies:
config-chain: 1.1.13
editorconfig: 1.0.4
glob: 10.4.5
js-cookie: 3.0.5
nopt: 7.2.1
js-cleanup@1.2.0: js-cleanup@1.2.0:
dependencies: dependencies:
magic-string: 0.25.9 magic-string: 0.25.9
perf-regexes: 1.0.1 perf-regexes: 1.0.1
skip-regex: 1.0.2 skip-regex: 1.0.2
js-cookie@3.0.5: {}
js-tokens@4.0.0: {} js-tokens@4.0.0: {}
js-yaml@3.14.1: js-yaml@3.14.1:
@@ -8370,6 +8430,10 @@ snapshots:
dependencies: dependencies:
brace-expansion: 2.0.1 brace-expansion: 2.0.1
minimatch@9.0.1:
dependencies:
brace-expansion: 2.0.1
minimatch@9.0.4: minimatch@9.0.4:
dependencies: dependencies:
brace-expansion: 2.0.1 brace-expansion: 2.0.1
@@ -8440,6 +8504,10 @@ snapshots:
node-releases@2.0.18: {} node-releases@2.0.18: {}
nopt@7.2.1:
dependencies:
abbrev: 2.0.0
normalize-package-data@2.5.0: normalize-package-data@2.5.0:
dependencies: dependencies:
hosted-git-info: 2.8.9 hosted-git-info: 2.8.9