diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/components/offcanvas.md (renamed from site/content/docs/5.2/components/offcanvas.md) | 16 |
1 files changed, 10 insertions, 6 deletions
diff --git a/site/content/docs/5.2/components/offcanvas.md b/site/content/docs/5.3/components/offcanvas.md index c4290ad..7c4c862 100644 --- a/site/content/docs/5.2/components/offcanvas.md +++ b/site/content/docs/5.3/components/offcanvas.md @@ -11,14 +11,14 @@ toc: true Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript. - Offcanvas shares some of the same JavaScript code as modals. Conceptually, they are quite similar, but they are separate plugins. -- Similarly, some [source Sass](#sass) variables for offcanvas's styles and dimensions are inherited from the modal's variables. +- Similarly, some [source Sass](#sass-variables) variables for offcanvas's styles and dimensions are inherited from the modal's variables. - When shown, offcanvas includes a default backdrop that can be clicked to hide the offcanvas. - Similar to modals, only one offcanvas can be shown at a time. **Heads up!** Given how CSS handles animations, you cannot use `margin` or `translate` on an `.offcanvas` element. Instead, use the class as an independent wrapping element. {{< callout info >}} -{{< partial "callout-info-prefersreducedmotion.md" >}} +{{< partial "callouts/info-prefersreducedmotion.md" >}} {{< /callout >}} ## Examples @@ -27,7 +27,7 @@ Offcanvas is a sidebar component that can be toggled via JavaScript to appear fr Below is an offcanvas example that is shown by default (via `.show` on `.offcanvas`). Offcanvas includes support for a header with a close button and an optional body class for some initial `padding`. We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action. -{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}} +{{< example class="bd-example-offcanvas p-0 bg-body-tertiary overflow-hidden" >}} <div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5> @@ -139,11 +139,15 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi ## Dark offcanvas -{{< added-in "5.2.0" >}} +{{< deprecated-in "5.3.0" >}} {{< added-in "5.2.0" >}} Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`. -{{< example class="bd-example-offcanvas p-0 bg-light overflow-hidden" >}} +{{< callout warning >}} +Heads up! Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself. +{{< /callout >}} + +{{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}} <div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5> @@ -310,7 +314,7 @@ const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap ### Methods {{< callout danger >}} -{{< partial "callout-danger-async-methods.md" >}} +{{< partial "callouts/danger-async-methods.md" >}} {{< /callout >}} Activates your content as an offcanvas element. Accepts an optional options `object`. |