diff options
| author | louismaximepiton <[email protected]> | 2022-08-30 17:20:59 +0200 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2022-08-31 18:03:08 -0700 |
| commit | 15318674fb086214e095c61af780a7d889f0f11e (patch) | |
| tree | 07dcb547f5015f65c40ad06428fe58d11621825e | |
| parent | 29332a954f86671d39f60007fb0c2ea633731e88 (diff) | |
| download | bootstrap-15318674fb086214e095c61af780a7d889f0f11e.tar.xz bootstrap-15318674fb086214e095c61af780a7d889f0f11e.zip | |
Change offcanvas to be more consistent with carousel and dropdown
| -rw-r--r-- | site/content/docs/5.2/components/offcanvas.md | 36 |
1 files changed, 18 insertions, 18 deletions
diff --git a/site/content/docs/5.2/components/offcanvas.md b/site/content/docs/5.2/components/offcanvas.md index a7384f978..c83e88716 100644 --- a/site/content/docs/5.2/components/offcanvas.md +++ b/site/content/docs/5.2/components/offcanvas.md @@ -79,24 +79,6 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ </div> {{< /example >}} -### Dark offcanvas - -{{< 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" >}} -<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> - <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button> - </div> - <div class="offcanvas-body"> - <p>Place offcanvas content here.</p> - </div> -</div> -{{< /example >}} - ### Body scrolling Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to enable `<body>` scrolling. @@ -155,6 +137,24 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi </div> {{< /example >}} +## Dark offcanvas + +{{< 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" >}} +<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> + <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button> + </div> + <div class="offcanvas-body"> + <p>Place offcanvas content here.</p> + </div> +</div> +{{< /example >}} + ## Responsive {{< added-in "5.2.0" >}} |