diff options
author | Mario <mario@mariovavti.com> | 2023-04-28 19:02:23 +0000 |
---|---|---|
committer | Mario <mario@mariovavti.com> | 2023-04-28 19:02:23 +0000 |
commit | 2a1341b910dfb1187dd9fceebd2b3be14e825e28 (patch) | |
tree | f2f5a26394d0a1a905823dd71b620e9c964fb155 /vendor/twbs/bootstrap/site/content/docs/5.3/components/progress.md | |
parent | 1ed8b9dd149b9d2cb2fe30dc56ddc24cc523255c (diff) | |
download | volse-hubzilla-2a1341b910dfb1187dd9fceebd2b3be14e825e28.tar.gz volse-hubzilla-2a1341b910dfb1187dd9fceebd2b3be14e825e28.tar.bz2 volse-hubzilla-2a1341b910dfb1187dd9fceebd2b3be14e825e28.zip |
update bootstrap
Diffstat (limited to 'vendor/twbs/bootstrap/site/content/docs/5.3/components/progress.md')
-rw-r--r-- | vendor/twbs/bootstrap/site/content/docs/5.3/components/progress.md | 37 |
1 files changed, 35 insertions, 2 deletions
diff --git a/vendor/twbs/bootstrap/site/content/docs/5.3/components/progress.md b/vendor/twbs/bootstrap/site/content/docs/5.3/components/progress.md index c441f13c8..73f131589 100644 --- a/vendor/twbs/bootstrap/site/content/docs/5.3/components/progress.md +++ b/vendor/twbs/bootstrap/site/content/docs/5.3/components/progress.md @@ -15,7 +15,7 @@ toc: true Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them. - We use the `.progress` as a wrapper to indicate the max value of the progress bar. -- The `.progress` wrapper also requires a `role="progress"` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar). +- The `.progress` wrapper also requires a `role="progressbar"` and `aria` attributes to make it accessible, including an accessible name (using `aria-label`, `aria-labelledby`, or similar). - We use the inner `.progress-bar` purely for the visual bar and label. - The `.progress-bar` requires an inline style, utility class, or custom CSS to set its width. - We provide a special `.progress-stacked` class to create multiple/stacked progress bars. @@ -57,7 +57,7 @@ Bootstrap provides a handful of [utilities for setting width]({{< docsref "/util You only set a `height` value on the `.progress` container, so if you change that value, the inner `.progress-bar` will automatically resize accordingly. {{< example >}} -<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px"> +<div class="progress" role="progressbar" aria-label="Example 1px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px"> <div class="progress-bar" style="width: 25%"></div> </div> <div class="progress" role="progressbar" aria-label="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px"> @@ -75,6 +75,14 @@ Add labels to your progress bars by placing text within the `.progress-bar`. </div> {{< /example >}} +Note that by default, the content inside the `.progress-bar` is controlled with `overflow: hidden`, so it doesn't bleed out of the bar. If your progress bar is shorter than its label, the content will be capped and may become unreadable. To change this behavior, you can use `.overflow-visible` from the [overflow utilities]({{< docsref "/utilities/overflow" >}}), but make sure to also define an explicit [text color]({{< docsref "/utilities/colors#colors" >}}) so the text remains readable. Be aware though that currently this approach does not take into account [color modes]({{< docsref "/customize/color-modes" >}}). + +{{< example >}} +<div class="progress" role="progressbar" aria-label="Example with label" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar overflow-visible text-dark" style="width: 10%">Long label text for the progress bar, set to a dark color</div> +</div> +{{< /example >}} + ## Backgrounds Use background utility classes to change the appearance of individual progress bars. @@ -98,6 +106,31 @@ Use background utility classes to change the appearance of individual progress b {{< partial "callouts/warning-color-assistive-technologies.md" >}} {{< /callout >}} +If you're adding labels to progress bars with a custom background color, make sure to also set an appropriate [text color]({{< docsref "/utilities/colors#colors" >}}), so the labels remain readable and have sufficient contrast. + +{{< example >}} +<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar bg-success" style="width: 25%">25%</div> +</div> +<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar bg-info text-dark" style="width: 50%">50%</div> +</div> +<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div> +</div> +<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar bg-danger" style="width: 100%">100%</div> +</div> +{{< /example >}} + +Alternatively, you can use the new combined [color and background]({{< docsref "/helpers/color-background" >}}) helper classes. + +{{< example >}} +<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"> + <div class="progress-bar text-bg-warning" style="width: 75%">75%</div> +</div> +{{< /example >}} + ## Multiple bars You can include multiple progress components inside a container with `.progress-stacked` to create a single stacked progress bar. Note that in this case, the styling to set the visual width of the progress bar *must* be applied to the `.progress` elements, rather than the `.progress-bar`s. |