From 24d79fe74c7c9a8800c94f209b09a0679989ffa5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 15 Jun 2022 07:41:39 -0700 Subject: [PATCH] Add example of dark navbar and offcanvas to docs (#36510) --- site/assets/js/snippets.js | 10 ++-- site/content/docs/5.2/components/navbar.md | 48 ++++++++++++++++++- site/content/docs/5.2/components/offcanvas.md | 16 +++++++ 3 files changed, 69 insertions(+), 5 deletions(-) diff --git a/site/assets/js/snippets.js b/site/assets/js/snippets.js index 5e58493de5d4..66ef949f7432 100644 --- a/site/assets/js/snippets.js +++ b/site/assets/js/snippets.js @@ -141,10 +141,12 @@ // Offcanvas // ------------------------------- // 'Offcanvas components' example in docs only - const myOffcanvas = document.querySelector('.bd-example-offcanvas #offcanvas') + const myOffcanvas = document.querySelectorAll('.bd-example-offcanvas .offcanvas') if (myOffcanvas) { - myOffcanvas.addEventListener('show.bs.offcanvas', event => { - event.preventDefault() - }, false) + myOffcanvas.forEach(offcanvas => { + offcanvas.addEventListener('show.bs.offcanvas', event => { + event.preventDefault() + }, false) + }) } })() diff --git a/site/content/docs/5.2/components/navbar.md b/site/content/docs/5.2/components/navbar.md index c5f1fa389e1b..a1d671a427a6 100644 --- a/site/content/docs/5.2/components/navbar.md +++ b/site/content/docs/5.2/components/navbar.md @@ -670,7 +670,7 @@ When you do this, we recommend including additional JavaScript to move the focus ### Offcanvas -Transform your expanding and collapsing navbar into an offcanvas drawer with the offcanvas plugin. We extend both the offcanvas default styles and use our `.navbar-expand-*` classes to create a dynamic and flexible navigation sidebar. +Transform your expanding and collapsing navbar into an offcanvas drawer with the [offcanvas component]({{< docsref "/components/offcanvas" >}}). We extend both the offcanvas default styles and use our `.navbar-expand-*` classes to create a dynamic and flexible navigation sidebar. In the example below, to create an offcanvas navbar that is always collapsed across all breakpoints, omit the `.navbar-expand-*` class entirely. @@ -732,6 +732,52 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br ``` +When using offcanvas in a dark navbar, be aware that you may need to have a dark background on the offcanvas content to avoid the text becoming illegible. In the example below, we add `.navbar-dark` and `.bg-dark` to the `.navbar`, `.text-bg-dark` to the `.offcanvas`, `.dropdown-menu-dark` to `.dropdown-menu`, and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. + +{{< example >}} + +{{< /example >}} + ## CSS ### Variables diff --git a/site/content/docs/5.2/components/offcanvas.md b/site/content/docs/5.2/components/offcanvas.md index cba75ac216fd..39a5fb826d13 100644 --- a/site/content/docs/5.2/components/offcanvas.md +++ b/site/content/docs/5.2/components/offcanvas.md @@ -79,6 +79,22 @@ You can use a link with the `href` attribute, or a button with the `data-bs-targ {{< /example >}} +### Dark offcanvas + +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" >}} +
+
+
Offcanvas
+ +
+
+

Place offcanvas content here.

+
+
+{{< /example >}} + ### Body scrolling Scrolling the `` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to enable `` scrolling.