diff --git a/build/reformat-mdx.mjs b/build/reformat-mdx.mjs index 1333a844b..8db8abb9c 100644 --- a/build/reformat-mdx.mjs +++ b/build/reformat-mdx.mjs @@ -6,33 +6,60 @@ import { readFileSync, writeFileSync } from 'node:fs'; import { join, dirname } from 'node:path'; import { fileURLToPath } from 'node:url' import { sync } from 'glob'; -import beautify from 'js-beautify'; +import * as prettier from "prettier"; const __dirname = dirname(fileURLToPath(import.meta.url)) const docs = sync(join(__dirname, '..', 'docs', '**', '*.mdx')) -docs.forEach((file, i) => { +async function formatHTML(htmlString) { + try { + const formattedHtml = await prettier.format(htmlString, { + parser: "html", + printWidth: 100, + }); + return formattedHtml; + } catch (error) { + console.error("Error formatting HTML:", error); + return htmlString; // Return original in case of an error + } +} + +async function replaceAsync(str, regex, asyncFn) { + const matches = [...str.matchAll(regex)]; + + const replacements = await Promise.all( + matches.map(async (match) => asyncFn(...match)) + ); + + let result = str; + matches.forEach((match, i) => { + result = result.replace(match[0], replacements[i]); + }); + + return result; +} + +for (const file of docs) { const oldContent = readFileSync(file, 'utf8') // get codeblocks from markdown - const content = oldContent.replace(/(```([a-z0-9]+).*?\n)(.*?)(```)/gs, (m, m1, m2, m3, m4) => { + const content = await replaceAsync(oldContent, /(```([a-z0-9]+).*?\n)(.*?)(```)/gs, async (m, m1, m2, m3, m4) => { if (m2 === 'html') { - // m3 = beautify.default.html(m3, { - // "indent_size": 2, - // "indent_char": " ", - // }).trim(); + m3 = await formatHTML(m3); + + console.log(m3); // remove empty lines m3 = m3.replace(/^\s*[\r\n]/gm, ''); - return m1 + m3 + "\n" + m4; + return m1 + m3.trim() + "\n" + m4; } - return m + return m.trim(); }) if (content !== oldContent) { writeFileSync(file, content, 'utf8') console.log(`Reformatted ${file}`) } -}) \ No newline at end of file +} \ No newline at end of file diff --git a/docs/icons/libraries/svelte.mdx b/docs/icons/libraries/svelte.mdx index fdb88dd26..471292f87 100644 --- a/docs/icons/libraries/svelte.mdx +++ b/docs/icons/libraries/svelte.mdx @@ -29,7 +29,7 @@ import { IconHeart } from '@tabler/icons-svelte'; You can pass additional props to adjust the icon. -```html +```sveltehtml ``` diff --git a/docs/icons/libraries/webfont.mdx b/docs/icons/libraries/webfont.mdx index eb70cc965..74f89c3a6 100644 --- a/docs/icons/libraries/webfont.mdx +++ b/docs/icons/libraries/webfont.mdx @@ -30,7 +30,10 @@ or just [download from Github](https://github.com/tabler/tabler-icons/releases). ### CDN ```html - + ``` Instead of a specific version, you can use `latest` to always get the newest icons. diff --git a/docs/icons/static-files/svg.mdx b/docs/icons/static-files/svg.mdx index bda653f2e..813010aa1 100644 --- a/docs/icons/static-files/svg.mdx +++ b/docs/icons/static-files/svg.mdx @@ -29,7 +29,18 @@ You can paste the content of the icon file into your HTML code to display it on ```html - + ... Click me diff --git a/docs/illustrations/introduction/customization.mdx b/docs/illustrations/introduction/customization.mdx index 2c97ced20..7d9480c26 100644 --- a/docs/illustrations/introduction/customization.mdx +++ b/docs/illustrations/introduction/customization.mdx @@ -6,37 +6,156 @@ summary: Learn how to tailor Tabler Illustrations by adjusting colors, sizes, an ```html example columns={1} centered vertical height="25rem" - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ``` @@ -45,7 +164,7 @@ summary: Learn how to tailor Tabler Illustrations by adjusting colors, sizes, an You can change the color of the illustration by setting the `--tblr-illustrations-primary` CSS variable to the desired color. This will change the color of the primary elements in the illustration. ```html -
+
...
``` @@ -59,39 +178,158 @@ body { ``` ```html example columns={1} centered vertical height="25rem" -
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
``` @@ -101,7 +339,7 @@ body { To change the color of the skin, use the `--tblr-illustrations-skin` CSS variable. ```html -
+
...
``` @@ -109,39 +347,158 @@ To change the color of the skin, use the `--tblr-illustrations-skin` CSS variabl Look at the example below to see how you can change the color of the skin. ```html example columns={1} centered vertical height="25rem" -
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
``` @@ -156,37 +513,171 @@ Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illust
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -200,9 +691,22 @@ Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illust
- + - +
@@ -269,9 +773,12 @@ Tabler Illustrations uses `--tblr-primary` as a fallback color if `--tblr-illust
@@ -285,38 +792,155 @@ Each illustration has a dark mode variant. To use it, copy the dark mode SVG cod ```html example columns={1} centered vertical separated height="25rem" background="dark"
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
``` ## Autodark mode @@ -327,9 +951,9 @@ Illustrations change theme based on the user's system preferences or `data-bs-th ```html - - ... - + + ... + ``` diff --git a/docs/ui/base/typography.mdx b/docs/ui/base/typography.mdx index 79857dbf4..ebe66ca84 100644 --- a/docs/ui/base/typography.mdx +++ b/docs/ui/base/typography.mdx @@ -42,7 +42,10 @@ If you use a second paragraph, it will be separated from the first one by a blan ```html example vertical centered columns={2}
-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt + ut labore et dolore magna aliquyam erat, sed diam voluptua. +

At vero eos et accusam et justo duo dolores et ea rebum.

``` @@ -65,8 +68,7 @@ Use a variety of semantic text elements, depending on how you want to display pa Highlighted Strikethrough Sample -Text Subscripted -Text Superscripted +Text Subscripted Text Superscripted Underline x = y + 2 @@ -109,19 +111,15 @@ Here are examples of semantic text elements:
Sample
-
Text Subscripted -
-
Text Superscripted -
+
Text Subscripted
+
Text Superscripted
Underline
-
- x = y + 2 -
+
x = y + 2
``` @@ -132,9 +130,17 @@ Use the `hr` tag to represent a thematic break between paragraphs within one sec ```html example vertical centered columns={2}
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita quibusdam veniam?

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam + reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita + quibusdam veniam? +

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita quibusdam veniam?

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam + reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita + quibusdam veniam? +

``` @@ -148,25 +154,29 @@ You can also add a label to a horizontal rule and align it as you see fit. ```html example vertical centered columns={2}

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua.

Rule text

- At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. + At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea + takimata sanctus est Lorem ipsum dolor sit amet.

Rule text

- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua.

Rule text

- At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. + At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea + takimata sanctus est Lorem ipsum dolor sit amet.

``` @@ -262,9 +272,7 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use Use the `` to indicate input that is typically entered via keyboard. ```html example vertical centered -
- To edit settings, press ctrl + , or ctrl + C. -
+
To edit settings, press ctrl + , or ctrl + C.
``` ```html @@ -278,9 +286,21 @@ If you can't use the CSS classes you want, or you just want to use HTML tags, us ```html example centered background="white" columns={2} height="30rem"

Hello World

-

Lorem ipsum[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Subscript works as well!

+

+ Lorem ipsum[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus + ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut + vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Subscript + works as well! +

Second level

-

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

+

+ Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum + maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. + Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. + Ut et neque nisl. +

@@ -201,10 +205,14 @@ Add an avatar to your alert modal to make it more personalized. @@ -214,27 +222,36 @@ Add an avatar to your alert modal to make it more personalized. JL
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, + consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
@@ -374,7 +391,10 @@ You're not limited to the 4 default alert colors. You can use any [base or socia @@ -295,7 +343,8 @@ Organize multiple cards into tabs to be able to display more content in a well-o
Content of tab #4

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid + distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.

@@ -327,7 +376,8 @@ Organize multiple cards into tabs to be able to display more content in a well-o
Content of tab #1

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid + distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.

@@ -336,7 +386,8 @@ Organize multiple cards into tabs to be able to display more content in a well-o
Content of tab #2

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid + distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.

@@ -345,7 +396,8 @@ Organize multiple cards into tabs to be able to display more content in a well-o
Content of tab #3

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid + distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.

@@ -354,7 +406,8 @@ Organize multiple cards into tabs to be able to display more content in a well-o
Content of tab #4

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid + distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.

diff --git a/docs/ui/components/carousel.mdx b/docs/ui/components/carousel.mdx index 46113b295..00b0fafc1 100644 --- a/docs/ui/components/carousel.mdx +++ b/docs/ui/components/carousel.mdx @@ -12,7 +12,12 @@ Use a carousel to make your website design more visually appealing for users. In ```html example centered columns={2} height="35rem" ``` @@ -208,97 +234,110 @@ Bar charts are highly effective for comparing data across different categories. ``` @@ -314,46 +353,52 @@ Pie charts are a simple and effective way to visualize proportions and ratios. T ``` @@ -369,46 +414,113 @@ Heatmaps provide a graphical representation of data where individual values are ``` @@ -424,88 +536,162 @@ For more complex data visualizations, you can create advanced charts with multip ``` diff --git a/docs/ui/components/datagrid.mdx b/docs/ui/components/datagrid.mdx index 4e7100f99..bc1a9f00d 100644 --- a/docs/ui/components/datagrid.mdx +++ b/docs/ui/components/datagrid.mdx @@ -26,7 +26,10 @@ description: Detailed product information in grids.
Creator
- + Paweł Kuna
@@ -38,20 +41,30 @@ description: Detailed product information in grids.
Edge network
- - Active - + Active
Avatars list
- + JL - - - + + + +3
@@ -68,7 +81,18 @@ description: Detailed product information in grids.
Icon
- + @@ -83,9 +107,7 @@ description: Detailed product information in grids.
Longer description
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. -
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
``` diff --git a/docs/ui/components/divider.mdx b/docs/ui/components/divider.mdx index d83e03813..12dab4d4e 100644 --- a/docs/ui/components/divider.mdx +++ b/docs/ui/components/divider.mdx @@ -14,7 +14,8 @@ Use dividers to visually separate content into parts. You can use a line only or

See also

- Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! + Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus + rerum, saepe sed, sit!

``` @@ -28,7 +29,8 @@ You can modify the position of the text which is to be included in a separator a

Start divider

- Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! + Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus + rerum, saepe sed, sit!

Centered divider

@@ -36,7 +38,8 @@ You can modify the position of the text which is to be included in a separator a

End divider

- Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! + Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus + rerum, saepe sed, sit!

``` @@ -50,7 +53,8 @@ Customize the color of dividers to make them go well with your design. Click [he

Green divider

- Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! + Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus + rerum, saepe sed, sit!

Red divider

@@ -58,6 +62,7 @@ Customize the color of dividers to make them go well with your design. Click [he

Primary divider

- Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit! + Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus + rerum, saepe sed, sit!

``` diff --git a/docs/ui/components/dropdowns.mdx b/docs/ui/components/dropdowns.mdx index d389945f9..ab9fa14db 100644 --- a/docs/ui/components/dropdowns.mdx +++ b/docs/ui/components/dropdowns.mdx @@ -28,12 +28,8 @@ Use dropdown dividers to separate groups of dropdown items for greater clarity.
Open dropdown
- - Action - - - Another action - + Action + Another action
Separated link
@@ -48,12 +44,8 @@ Make a dropdown item look active, so that it highlights when a user hovers over
Open dropdown
- - Action - - - Another action - + Action + Another action Active action
@@ -67,12 +59,8 @@ Make a dropdown item look disabled to display options which are currently not av
Open dropdown
- - Action - - - Another action - + Action + Another action Disabled action
@@ -87,12 +75,8 @@ Add a dropdown header to group dropdown items into sections and name them accord Open dropdown
Dropdown header - - Action - - - Another action - + Action + Another action
``` @@ -107,15 +91,39 @@ Use icons in your dropdowns to add more visual content and make the options easy
Dropdown header - + - + Action - + @@ -134,12 +142,8 @@ Add an arrow that points at the dropdown button.
Open dropdown
- - Action - - - Another action - + Action + Another action
``` @@ -195,15 +199,39 @@ Make your dropdown suit the dark mode of your website or software.
Dropdown header - + - + Action - + @@ -222,16 +250,23 @@ Use a dropdown with card content to make it easy for users to get more informati ```html example height="35rem"
Open dropdown -
+
- How do you know she is a witch? + How do you know she is a witch?

How do you know she is a witch?

-
Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a wart. You ...
+
+ Are you suggesting that coconuts migrate? No, no, no! Yes, yes. A bit. But she's got a + wart. You ... +
@@ -240,9 +275,22 @@ Use a dropdown with card content to make it easy for users to get more informati
- + - +
diff --git a/docs/ui/components/dropzone.mdx b/docs/ui/components/dropzone.mdx index b6aa60f6c..096018ba3 100644 --- a/docs/ui/components/dropzone.mdx +++ b/docs/ui/components/dropzone.mdx @@ -20,9 +20,9 @@ To initialize the Dropzone form, you need to create a new instance of the Dropzo ```html ``` @@ -35,9 +35,9 @@ The Dropzone form will now be active and ready to accept file uploads. When a us
``` @@ -58,9 +58,9 @@ By adding the `multiple` attribute to the input field, users can select multiple
``` @@ -79,9 +79,9 @@ You can further enhance the user experience by customizing the Dropzone interfac
``` diff --git a/docs/ui/components/empty.mdx b/docs/ui/components/empty.mdx index 945fcfa5c..72740d08e 100644 --- a/docs/ui/components/empty.mdx +++ b/docs/ui/components/empty.mdx @@ -11,7 +11,18 @@ Use the default empty state to engage users in the critical moments of their exp ```html example height="300px"
- + @@ -25,7 +36,18 @@ Use the default empty state to engage users in the critical moments of their exp

- + @@ -51,7 +73,18 @@ Make your empty state screen more attractive and engaging by adding an illustrat

- + @@ -75,7 +108,18 @@ Instead of adding an icon or illustration you can simply give the text:

- + diff --git a/docs/ui/components/icons.mdx b/docs/ui/components/icons.mdx index c2e26e4be..263c1564f 100644 --- a/docs/ui/components/icons.mdx +++ b/docs/ui/components/icons.mdx @@ -12,7 +12,18 @@ If you need to add icons to your website, you can use the Tabler Icons library. To add an icon to your code copy the SVG code from the Tabler Icons website and paste it into your HTML file. ```html - + @@ -21,25 +32,73 @@ To add an icon to your code copy the SVG code from the Tabler Icons website and Results can be seen in the example below. ```html example centered separated - + - + - + - + - + - + @@ -56,33 +115,120 @@ Results can be seen in the example below. To use filled icons, you need to copy the SVG code from the Tabler Icons website and paste it into your HTML file. ```html - + - + ``` Look at the example below to see the filled icons. ```html example centered separated - + - + - + - - - - + + + + - + - + - + - + ``` @@ -101,25 +247,77 @@ Look at the example below to see how the color of the icon changes. ```html example centered separated - + - + - + - + - + - + @@ -142,16 +340,51 @@ To add an animation to the icon, you need to add the `icon-pulse`, `icon-tada`, Look at the example below to see the animated icons. ```html example centered separated - + - + - + - + diff --git a/docs/ui/components/inline-player.mdx b/docs/ui/components/inline-player.mdx index 0f1bc20ac..781c1f12a 100644 --- a/docs/ui/components/inline-player.mdx +++ b/docs/ui/components/inline-player.mdx @@ -25,8 +25,8 @@ Integrating the Inline Player into your website is straightforward. Below is a s ```html
``` @@ -37,8 +37,8 @@ Look at the example below to see how the Inline Player works with a YouTube vide
``` @@ -51,8 +51,8 @@ Here’s how to embed a Vimeo video using the Inline Player:
``` diff --git a/docs/ui/components/modals.mdx b/docs/ui/components/modals.mdx index aa4edf667..f07b06ea3 100644 --- a/docs/ui/components/modals.mdx +++ b/docs/ui/components/modals.mdx @@ -14,15 +14,9 @@ To create a modal, you need to add a `.modal` element to the document. Inside th
-
- ... -
-
- ... -
-
- ... -
+
...
+
...
+
...
@@ -42,7 +36,9 @@ Look at the example below to see how the modal looks.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus + deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis + reprehenderit sit tempora totam unde.
@@ -64,26 +60,37 @@ You can use the modal to create a prompt or alert. Look at the example below to
- + - +

Are you sure?

-
Do you really want to remove 84 files? What you've done cannot be undone.
+
+ Do you really want to remove 84 files? What you've done cannot be undone. +
- - Cancel - + Cancel
- - Delete 84 items - + Delete 84 items
@@ -92,10 +99,10 @@ You can use the modal to create a prompt or alert. Look at the example below to
``` @@ -106,26 +113,36 @@ You can use the modal to create a prompt or alert. Look at the example below to
- +

Payment succeeded

-
Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.
+
+ Your payment of $290 has been successfully submitted. Your invoice has been sent to + support@tabler.io. +
- - Go to dashboard - + Go to dashboard
- - View invoice - + View invoice
@@ -134,10 +151,10 @@ You can use the modal to create a prompt or alert. Look at the example below to
``` @@ -159,20 +176,33 @@ You can use the modal to create a form. Look at the example below to see how the
- +
@@ -186,7 +216,10 @@ You can use the modal to create a form. Look at the example below to see how the Advanced - Insert charts and additional advanced analyses to be inserted in the report + Insert charts and additional advanced analyses to be inserted in the + report @@ -197,9 +230,7 @@ You can use the modal to create a form. Look at the example below to see how the
- - https://tabler.io/reports/ - + https://tabler.io/reports/
@@ -239,11 +270,20 @@ You can use the modal to create a form. Look at the example below to see how the
- - Cancel - + Cancel - + diff --git a/docs/ui/components/offcanvas.mdx b/docs/ui/components/offcanvas.mdx index 13812d603..871b4aea6 100644 --- a/docs/ui/components/offcanvas.mdx +++ b/docs/ui/components/offcanvas.mdx @@ -11,7 +11,8 @@ To create an offcanvas, add the `.offcanvas` class to a container element. You c ```html
- Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here. + Content for the offcanvas goes here. You can place just about any Tabler component or custom + elements here.
``` @@ -19,9 +20,15 @@ To create an offcanvas, add the `.offcanvas` class to a container element. You c Look at the example below to see how the offcanvas works. ```html example vendors height="25rem" -
+
- Content for the offcanvas goes here. You can place just about any Tabler component or custom elements here. + Content for the offcanvas goes here. You can place just about any Tabler component or custom + elements here.
``` @@ -31,12 +38,20 @@ Look at the example below to see how the offcanvas works. The offcanvas component is used to display a cookies banner. It is a great way to inform users about the use of cookies on your website and to get their consent. ```html example vendors height="25rem" -