diff --git a/.changeset/progress-variants-docs.md b/.changeset/progress-variants-docs.md new file mode 100644 index 000000000..5a4d12892 --- /dev/null +++ b/.changeset/progress-variants-docs.md @@ -0,0 +1,5 @@ +--- +"@tabler/docs": patch +--- + +Updated `Progress Bar` documentation with new variants and improved `docs/example.html` layout support for full-width stacked previews. diff --git a/docs/content/ui/components/progress.md b/docs/content/ui/components/progress.md index a2bfd4c3e..cd0567b09 100644 --- a/docs/content/ui/components/progress.md +++ b/docs/content/ui/components/progress.md @@ -10,6 +10,7 @@ description: Track and display progress with a progress bar. To create a default progress bar, add a `.progress` class to a `
` element. Thanks to that, you will be able to notify users how long they have to wait for a process to complete. {% capture html -%} +
@@ -27,6 +28,7 @@ Using Bootstrap’s typical naming structure, you can create a standard progress Look at the example below to see how it works: {% capture html -%} +
57% Complete
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +{%- endcapture %} {% include "docs/example.html" html=html column-full-width %} + +## Progress with value + +If you want to display the numeric value inside the bar, place the percentage text directly in the `.progress-bar`. + +{% capture html -%} + +
+
+ 10% +
+
+
+
+ 35% +
+
+
+
+ 90% +
+
{%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html column-full-width %} ## Indeterminate progress You can create a progress bar which shows indeterminate progress by adding `.progress-bar-indeterminate` to the `.progress-bar` element. {% capture html -%} +
@@ -58,10 +100,7 @@ You can create a progress bar which shows indeterminate progress by adding `.pro You can also use the native HTML5 `` element. It is a great way to create a progress bar without the need for additional HTML elements. This is what it looks like: -{% capture html -%} - -{%- endcapture %} -{% include "docs/example.html" html=html %} +{% capture html -%} {%- endcapture %} {% include "docs/example.html" html=html %} ## Progress color @@ -70,6 +109,7 @@ You can change the color of the progress bar by adding a color class to the `.pr See the [full list of available colors](/ui/base/colors) for more details. {% capture html -%} +
{%- endcapture %} -{% include "docs/example.html" html=html %} +{% include "docs/example.html" html=html column-full-width %} ## Multiple progress bars @@ -138,6 +178,7 @@ You can stack multiple progress bars on top of each other to create a visually a This is how it looks: {% capture html -%} +
@@ -157,23 +198,61 @@ This is how it looks: You can create a striped progress bar by adding the `.progress-bar-striped` class to the `.progress-bar` element. {% capture html -%} +
-
+
{%- endcapture %} {% include "docs/example.html" html=html %} +## Animated progress + +To animate stripes, add the `.progress-bar-animated` class to a striped progress bar. + +{% capture html -%} + +
+
+
+{%- endcapture %} +{% include "docs/example.html" html=html column-full-width %} + +## Separated progress + +Use `.progress-separated` to make stacked segments easier to read when values are close to each other. + +{% capture html -%} + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+{%- endcapture %} +{% include "docs/example.html" html=html vertical column %} + ## 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. +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. Thanks to this you can create a nice looking statistics section: -{% capture html -%} -{% include "ui/progressbg.html" value="65" text="Poland" show-value=true %} -{% include "ui/progressbg.html" value="35" text="Germany" show-value=true %} -{% include "ui/progressbg.html" value="28" text="United Stated" show-value=true %} -{% include "ui/progressbg.html" value="20" text="United Kingdom" show-value=true %} -{% include "ui/progressbg.html" value="15" text="France" show-value=true %} -{%- endcapture %} -{% include "docs/example.html" html=html vertical card %} \ No newline at end of file +{% capture html -%} {% include "ui/progressbg.html" value="65" text="Poland" show-value=true %} {% include "ui/progressbg.html" value="35" text="Germany" show-value=true %} {% include "ui/progressbg.html" value="28" text="United States" show-value=true %} +{% include "ui/progressbg.html" value="20" text="United Kingdom" show-value=true %} {% include "ui/progressbg.html" value="15" text="France" show-value=true %} {%- endcapture %} {% include "docs/example.html" html=html column-full-width %} + +## Progress background colors + +You can combine progress background with contextual light colors to better separate categories. + +{% capture html -%} {% include "ui/progressbg.html" value="75" text="Success" color="success-lt" show-value=true %} {% include "ui/progressbg.html" value="60" text="Warning" color="warning-lt" show-value=true %} {% include "ui/progressbg.html" value="40" text="Danger" color="danger-lt" show-value=true %} +{% include "ui/progressbg.html" value="90" text="Info" color="info-lt" show-value=true %} {%- endcapture %} {% include "docs/example.html" html=html column-full-width %} diff --git a/shared/includes/docs/example.html b/shared/includes/docs/example.html index f006288d4..6ae1a75c0 100644 --- a/shared/includes/docs/example.html +++ b/shared/includes/docs/example.html @@ -1,7 +1,7 @@
- {%- unless include.raw -%}
{%- endunless -%} + {%- unless include.raw -%}
{%- endunless -%} {{ include.html | remove-href }} {%- unless include.raw -%}
{%- endunless -%}