root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 13 Packages Projects Releases Wiki Activity

Mention deprecated classes for color mode on offcanvas

This commit is contained in:
Mark Otto 2023-01-11 20:56:23 -08:00 committed by Mark Otto
parent 2d57b88902
commit f23e203bd0
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
site/content/docs/5.3/components/offcanvas.md
View File

@ -139,10 +139,14 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi
## Dark offcanvas ## 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`. 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`.
{{< 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" >}} {{< 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 offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
<div class="offcanvas-header"> <div class="offcanvas-header">