diff --git a/.changeset/smart-points-attack.md b/.changeset/smart-points-attack.md new file mode 100644 index 000000000..749c24d50 --- /dev/null +++ b/.changeset/smart-points-attack.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Update documentation for Tabler components diff --git a/docs/menu.json b/docs/menu.json index 43f92799b..95986e2a3 100644 --- a/docs/menu.json +++ b/docs/menu.json @@ -135,10 +135,6 @@ "title": "Progress", "href": "/docs/ui/components/progress" }, - { - "title": "Progress background", - "href": "/docs/ui/components/progressbg" - }, { "title": "Range slider", "href": "/docs/ui/components/range-slider" @@ -240,6 +236,10 @@ { "title": "Payments", "href": "/docs/ui/plugins/payments" + }, + { + "title": "Social icons", + "href": "/docs/ui/plugins/social-icons" } ] }, diff --git a/docs/ui/base/colors.mdx b/docs/ui/base/colors.mdx index df723c2e9..4b9727ec4 100644 --- a/docs/ui/base/colors.mdx +++ b/docs/ui/base/colors.mdx @@ -8,18 +8,75 @@ bootstrapLink: utilities/colors/ Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take. - + ## Light colors All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-catching designs. - + ## Gray palette - +The gray palette is a great choice for creating a neutral background for your design. It can be used to create a clean and professional look, and can be combined with other colors to create a harmonious design. + + ## Social colors - +Use the colors of popular social networks to create a recognizable design and make it easier for users to interact with your product. + + diff --git a/docs/ui/base/typography.mdx b/docs/ui/base/typography.mdx index 5c8788818..e6e0af39f 100644 --- a/docs/ui/base/typography.mdx +++ b/docs/ui/base/typography.mdx @@ -6,16 +6,8 @@ bootstrapLink: content/typography/ ## Headings -Use HTML headings to organize content on your website and make the structure clear and user-friendly. - -```html example vertical -

H1 Heading

-

H2 Heading

-

H3 Heading

-

H4 Heading

-
H5 Heading
-
H6 Heading
-``` +Use HTML headings to organize content on your website and make the structure clear and user-friendly. The `h1` to `h6` tags are used to define HTML headings. +The `h1` tag is the highest level and the `h6` tag is the lowest level. ```html

H1 Heading

@@ -23,12 +15,29 @@ Use HTML headings to organize content on your website and make the structure cle

H3 Heading

H4 Heading

H5 Heading
-
H6 Heading
+
H6 Heading
+``` + +There is example of headings with different levels: + +```html example vertical columns={1} +

H1 Heading

+

H2 Heading

+

H3 Heading

+

H4 Heading

+
H5 Heading
+
H6 Heading
``` ## Paragraphs -Organize longer pieces of text into paragraphs using the `p` tag. +Organize longer pieces of text into paragraphs using the `p` tag. It is the most common element for text content. + +```html +

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

+``` + +If you use second paragraph, it will be separated from the first one by a blank line. ```html example vertical centered columns={2}
@@ -37,14 +46,32 @@ Organize longer pieces of text into paragraphs using the `p` tag.
``` -```html -

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.

-``` ## Semantic text elements -Use a variety of semantic text elements, depending of how you want to display particular fragments of content. +Use a variety of semantic text elements, depending of how you want to display particular fragments of content. + +```html +I18N +Bold +Citation +Hello World! +Deleted +Emphasis +Italic +Inserted +Ctrl + S +Highlighted +Strikethrough +Sample +Text Subscripted +Text Superscripted + +Underline +x = y + 2 +``` + +Here is an example of semantic text elements: ```html example vertical separated columns={1}
I1f8N
@@ -66,25 +93,7 @@ Use a variety of semantic text elements, depending of how you want to display pa
x = y + 2
``` -```html -I18N -Bold -Citation -Hello World! -Deleted -Emphasis -Italic -Inserted -Ctrl + S -Highlighted -Strikethrough -Sample -Text Subscripted -Text Superscripted - -Underline -x = y + 2 -``` + ## Horizontal rules @@ -146,40 +155,11 @@ Tabler has been optimized to correctly display content in any language. It suppo

อักษรไทย

``` -```html -
Chinese
-

汉字

- -
Japanese
-

日本語の表記体系

- -
Cyrillic
-

Кириллица

- -
Greek
-

Eλληνική

- -
Georgian
-

ქართული დამწერლობა

- -
Armenian
-

Հայերենի այբուբեն

- -
Arabic
-

الحروف العربية

- -
Hebrew
-

אלפבית עברי

- -
Thai
-

อักษรไทย

-``` - ## Text transform Transform the content of components with text capitalization classes. -```html example vertical +```html example vertical centered separated columns={1}
Lowercased text.
Uppercased text.
Capitalized text.
@@ -195,7 +175,7 @@ Transform the content of components with text capitalization classes. Control the tracking (letter spacing) of an element and make it tight, wide or normal. -```html example vertical +```html example vertical centered separated columns={1}
Lorem ipsum dolor sit amet. Tight letter spacing.
Lorem ipsum dolor sit amet. Normal letter spacing.
Lorem ipsum dolor sit amet. Wide letter spacing.
@@ -211,44 +191,28 @@ Control the tracking (letter spacing) of an element and make it tight, wide or n Control the leading (line height) of an element. -```html example -
-
-
-
-
Lorem ipsum dolor sit amet. Dolor sit amet.
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet. Dolor sit amet.
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet. Dolor sit amet.
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet. Dolor sit amet.
-
-
-
-
+```html example vertical centered separated columns={1} height="20rem" +

+ This is the long text with line height 1. Lorem ipsum dolor sit amet. Dolor sit amet. +

+

+ This is the long text with small line height. Lorem ipsum dolor sit amet. Dolor sit amet. +

+

+ This is the long text with base line height. Lorem ipsum dolor sit amet. Dolor sit amet. +

+

+ This is the long text with large line height. Lorem ipsum dolor sit amet. Dolor sit amet. +

``` +To control the line height of an element, use the following classes: + ```html -

Lorem ipsum dolor sit amet. Dolor sit amet.

-

Lorem ipsum dolor sit amet. Dolor sit amet.

-

Lorem ipsum dolor sit amet. Dolor sit amet.

-

Lorem ipsum dolor sit amet. Dolor sit amet.

+

...

+

...

+

...

+

...

``` ## Antialiasing @@ -257,7 +221,7 @@ Control the font smoothing of an element. Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` utility to remove antialiasing. -```html example +```html example vertical centered separated columns={1}
Text with antialiasing
Text without antialiasing
``` @@ -266,7 +230,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 centered +```html example vertical centered
To edit settings, press ctrl + , or ctrl + C.
@@ -278,7 +242,7 @@ To edit settings, press ctrl + , or ctrl + diff --git a/docs/ui/components/autosize.mdx b/docs/ui/components/autosize.mdx index 69e118624..d9d854123 100644 --- a/docs/ui/components/autosize.mdx +++ b/docs/ui/components/autosize.mdx @@ -8,9 +8,17 @@ To be able to use the autosize in your application you will need to install the ## Default markup -Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it. +Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it. -```html example centered columns={1} scrollable +To create autosize textarea, add the `data-bs-toggle="autosize"` attribute to the textarea element: + +```html + +``` + +Look at the example below to see how the autosize element works: + +```html example centered columns={1} scrollable background="bg-light" height="20rem" ``` diff --git a/docs/ui/components/progress.mdx b/docs/ui/components/progress.mdx index 117ce9cb9..d24dcbd9c 100644 --- a/docs/ui/components/progress.mdx +++ b/docs/ui/components/progress.mdx @@ -26,6 +26,12 @@ To create a default progress bar, add a `.progress` class to a `
` element. Using Bootstrap’s typical naming structure, you can create a standard progress bar or scale it up or down to different sizes based on what’s needed. +```html +
...
+``` + +Look at the example below to see how it works: + ```html example columns={1} centered
@@ -34,18 +40,6 @@ Using Bootstrap’s typical naming structure, you can create a standard progress
``` -## Progress without value - -Remove the displayed value by adding the `.visually-hidden` class. - -```html example columns={1} centered -
-
- -
-
-``` - ## Indeterminate progress You can create a progress bar which shows indeterminate progress by adding `.progress-bar-indeterminate` to the `.progress-bar` element. @@ -58,7 +52,13 @@ You can create a progress bar which shows indeterminate progress by adding `.pro ## Native progress element -You can also use native HTML5 `` element. +You can also use native HTML5 `` element. It is a great way to create a progress bar without the need for additional HTML elements. + +```html + +``` + +This is how it looks like: ```html example columns={1} centered @@ -66,7 +66,9 @@ You can also use native HTML5 `` element. ## Progress color -Customize the color of the progress bar to suit your design. Click [here](/docs/ui/colors) to see the list of available colors. +You can change the color of the progress bar by adding a color class to the `.progress-bar` element. You can use the color classes like `.bg-primary`, `.bg-success`, etc. to change the color of the progress bar. + +Full list of available colors can be found [here](/docs/ui/colors). ```html example columns={1} centered separated
@@ -90,3 +92,101 @@ Customize the color of the progress bar to suit your design. Click [here](/docs/
``` + +## Multiple progress bars + +You can stack multiple progress bars on top of each other to create a visually appealing design. This can be done by adding multiple `.progress` elements inside a `.progress-stacked` container. + +```html +
+
...
+
+``` + +This is how it looks like: + +```html example columns={2} centered +
+
+
+
+
+
+
+
+
+
+
+``` + +## Striped progress + +You can create a striped progress bar by adding the `.progress-bar-striped` class to the `.progress-bar` element. + +```html +
+
+
+``` + +This is how it looks like: + +```html example columns={1} centered separated +
+
+
+``` + +## Progress background + +By using a progress bar component as a background element, designers can create a dynamic and engaging visual experience for users. For example, the progress bar could be used to represent the completion of a long-term goal or project, such as a fundraising campaign or construction project. As users interact with the page, the progress bar could gradually fill up, creating a sense of momentum and progress. + +```html +
+
+
+
+
Poland
+
65%
+
+``` + +Thanks to this you can create a nice looking statistics section: + +```html example vertical separated centered columns={1} plugins="flags" height="20rem" +
+
+
+
+
Poland
+
65%
+
+
+
+
+
+
Germany
+
35%
+
+
+
+
+
+
United Stated
+
28%
+
+
+
+
+
+
United Kingdom
+
20%
+
+
+
+
+
+
France
+
15%
+
+``` \ No newline at end of file diff --git a/docs/ui/components/progressbg.mdx b/docs/ui/components/progressbg.mdx deleted file mode 100644 index 89a839278..000000000 --- a/docs/ui/components/progressbg.mdx +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Progress background -description: By using a progress bar component as a background element, designers can create a dynamic and engaging visual experience for users. For example, the progress bar could be used to represent the completion of a long-term goal or project, such as a fundraising campaign or construction project. As users interact with the page, the progress bar could gradually fill up, creating a sense of momentum and progress. ---- - -```html example vertical centered columns={1} -
-
-
- -
-
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eos ullam ut. Doloribus est in laborum, ratione recusandae reprehenderit tenetur. Accusantium consectetur ea enim facere ipsam praesentium quas soluta tenetur?
-
35%
-
-``` diff --git a/docs/ui/components/spinners.mdx b/docs/ui/components/spinners.mdx index a743ac931..70c91ec3c 100644 --- a/docs/ui/components/spinners.mdx +++ b/docs/ui/components/spinners.mdx @@ -8,13 +8,19 @@ bootstrapLink: components/spinners/ Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion. +```html + +``` + +Look at the example below to see how the spinner works: + ```html example centered ``` ## Colors -Choose one of the available colors to customize the spinner and make it suit your design. +Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section. ```html example centered separated @@ -75,11 +81,20 @@ Growing spinners also come in a variety of colors to choose from. ``` -### Button with spinner +## Button with spinner Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up. -```html example centered separated code +```html + + + Button + +``` + +Look at the example below to see how the button with a spinner works: + +```html example centered separated code background="bg-light" Button @@ -104,11 +119,15 @@ Use buttons with spinners to notify users that an action they have taken by clic ## Animated dots -```html example centered code +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"

Loading

``` -```html example centered separated +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. + +```html example centered separated background="bg-light" Loading diff --git a/docs/ui/components/statuses.mdx b/docs/ui/components/statuses.mdx index a2474567d..8df3ce97f 100644 --- a/docs/ui/components/statuses.mdx +++ b/docs/ui/components/statuses.mdx @@ -5,7 +5,17 @@ description: Status dots are particularly useful if you want to make an interfac ## Default markup -```html example vertical height="7rem" +Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section. + +```html +Blue +Azure +... +``` + +Look at the example below to see how the status works: + +```html example centered separated columns={2} Blue Azure Indigo @@ -20,15 +30,21 @@ description: Status dots are particularly useful if you want to make an interfac Cyan ``` -```html -Blue -Azure -... -``` ## Status with dot -```html example vertical height="7rem" +You can add a dot to the status to make it more noticeable. To do this, use the `.status-dot` element inside the `.status` element. + +```html + + + Blue + +``` + +Look at the example below to see how the status with a dot works: + +```html example centered separated columns={2} Blue @@ -81,7 +97,9 @@ description: Status dots are particularly useful if you want to make an interfac ### Animated dot -```html example vertical height="7rem" +You can also animate the dot to make it more noticeable. To do this, use the `.status-dot-animated` class inside the `.status-dot` element. + +```html example centered separated columns={2} Blue @@ -134,7 +152,9 @@ description: Status dots are particularly useful if you want to make an interfac ## Lite status -```html example vertical height="7rem" +Use the lite status to make the status less noticeable. To do this, use the `.status-lite` class inside the `.status` element. + +```html example centered separated columns={2} Blue @@ -187,7 +207,9 @@ description: Status dots are particularly useful if you want to make an interfac ## Status dots -```html example centered separated height="7rem" +If you need only dot status, you can use the `.status-dot` class. + +```html example centered separated @@ -202,9 +224,9 @@ description: Status dots are particularly useful if you want to make an interfac ``` -### Animated dots +The dots can also be animated. To do this, use the `.status-dot-animated` class. -```html example centered separated height="7rem" +```html example centered separated @@ -221,7 +243,9 @@ description: Status dots are particularly useful if you want to make an interfac ## Status indicator -```html example vertical centered height="7rem" +Use the status indicator to show the status of a component or page. The status indicator can be animated. To do this, use the `.status-indicator-animated` class. + +```html example centered separated columns={1} centered diff --git a/docs/ui/forms/form-color-check.mdx b/docs/ui/forms/form-color-check.mdx index 06c988bcd..edc1ed5bb 100644 --- a/docs/ui/forms/form-color-check.mdx +++ b/docs/ui/forms/form-color-check.mdx @@ -1,10 +1,20 @@ --- title: Color check +description: The color check is a great way to make your form more user-friendly and engaging. You can use the color check to create a visually appealing form that will help users make decisions quickly and easily. --- -Your input controls can come in a variety of colors, depending on your preferences. Click [here](/docs/getting-started/colors) to see the list of available colors. +Your input controls can come in a variety of colors, depending on your preferences. Click [here](/docs/ui/base/colors) to see the list of available colors. -```html example centered +```html + +``` + +There is also an example of a color input: + +```html example centered background="bg-light"
@@ -73,19 +83,21 @@ Your input controls can come in a variety of colors, depending on your preferenc +
+
+
``` -```html - -``` +If you need to select only one color, you can use the radio input type: -```html example centered + +```html example centered background="bg-light"
@@ -154,6 +166,12 @@ Your input controls can come in a variety of colors, depending on your preferenc +
+
+
@@ -161,7 +179,7 @@ Your input controls can come in a variety of colors, depending on your preferenc ```html ``` @@ -170,6 +188,12 @@ Your input controls can come in a variety of colors, depending on your preferenc Add an color picker to your form to let users customise it according to their preferences. +```html + +``` + +There is also an example of a color picker input: + ```html example centered
diff --git a/docs/ui/forms/form-elements.mdx b/docs/ui/forms/form-elements.mdx index 606160eb0..86bcb06d8 100644 --- a/docs/ui/forms/form-elements.mdx +++ b/docs/ui/forms/form-elements.mdx @@ -7,16 +7,30 @@ libs: nouislider ## Classic inputs -Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form. +Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form. Add the `form-control` class to style your input controls. -```html example centered columns={1} height="20rem" +```html + +``` + +All variants of the input control are available in the examples below: + +```html example columns={1} height="25rem"
- + +
+
+ + +
+
+ +
``` diff --git a/docs/ui/forms/form-helpers.mdx b/docs/ui/forms/form-helpers.mdx index 896a8f401..fc1c087c6 100644 --- a/docs/ui/forms/form-helpers.mdx +++ b/docs/ui/forms/form-helpers.mdx @@ -1,12 +1,76 @@ --- title: Form helpers -description: A form helper can be used to provide users with additional information about the elements of a form that may be unclear. +description: Use form helpers to provide additional information about a form element. You can use input help, required field, form hint, and additional info inside the label. --- ## Input help -Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper. +Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper. To add an input helper, use the `.form-help` class. -```html example centered -? +```html +? ``` + +Look at the example below to see how the input help works: + +```html example centered height="25rem" columns={1} +
+ + +
+``` + +## Required field + +Use the `.required` class to indicate that a field is required. It will add a red asterisk to the label. + +```html + +``` + +Look at the example below to see how the required field works: + +```html example centered columns={1} +
+ + +
+``` + +## Form hint + +Use a form hint to provide users with additional information about a form element. The text will appear below the input field. To add a form hint, use the `.form-hint` class. + +```html +
We'll never share your email with anyone else.
+``` + +Look at the example below to see how the form hint works: + +```html example centered columns={1} +
+ + +
We'll never share your email with anyone else.
+
+``` + +## Additional info inside label + +Use the `.form-label-description` class to add additional information to the label. The text will appear next to the label. You can use it to add for example a character counter. + +```html + +``` + +This example shows how to use the additional info inside the label: + +```html example centered columns={1} height="15rem" +
+ + +
+``` \ No newline at end of file diff --git a/docs/ui/forms/form-image-check.mdx b/docs/ui/forms/form-image-check.mdx index 107828241..478f0aff5 100644 --- a/docs/ui/forms/form-image-check.mdx +++ b/docs/ui/forms/form-image-check.mdx @@ -1,8 +1,22 @@ --- title: Image check +description: The image check is a great way to make your form more user-friendly and engaging. You can use the image check to create a visually appealing form that will help users make decisions quickly and easily. --- -Add an image check to your form and give users visually attractive options to choose from. +## Default markup + +To build an image check, you need to use the `.form-imagecheck` class and the `.form-imagecheck-input` class for the input element. You can also use the `.form-imagecheck-figure` class to style the image and the `.form-imagecheck-image` class to style the image itself. + +```html + +``` + +Look at the examples below to see how the image check works: ```html example centered columns="2" height="15rem"
@@ -10,7 +24,7 @@ Add an image check to your form and give users visually attractive options to ch
``` -```html - -``` +## Radio buttons + +If you want to use the image check as a radio button, you can change the input type to `radio`. ```html example centered columns="2" height="15rem"
@@ -59,7 +68,7 @@ Add an image check to your form and give users visually attractive options to ch