diff options
author | Mark Otto <markd.otto@gmail.com> | 2022-06-15 17:41:39 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-06-15 17:41:39 +0300 |
commit | 24d79fe74c7c9a8800c94f209b09a0679989ffa5 (patch) | |
tree | 478f0f282abee6571d9c02ecfbe71db55e13d717 /site | |
parent | ac0b87b2071ed5bedeaad47f2a909640c85323bc (diff) |
Add example of dark navbar and offcanvas to docs (#36510)
Diffstat (limited to 'site')
-rw-r--r-- | site/assets/js/snippets.js | 10 | ||||
-rw-r--r-- | site/content/docs/5.2/components/navbar.md | 48 | ||||
-rw-r--r-- | 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 5e58493de5..66ef949f74 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 c5f1fa389e..a1d671a427 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 </nav> ``` +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 >}} +<nav class="navbar navbar-dark bg-dark fixed-top"> + <div class="container-fluid"> + <a class="navbar-brand" href="#">Offcanvas dark navbar</a> + <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDarkNavbar" aria-controls="offcanvasDarkNavbar"> + <span class="navbar-toggler-icon"></span> + </button> + <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasDarkNavbar" aria-labelledby="offcanvasDarkNavbarLabel"> + <div class="offcanvas-header"> + <h5 class="offcanvas-title" id="offcanvasDarkNavbarLabel">Dark offcanvas</h5> + <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button> + </div> + <div class="offcanvas-body"> + <ul class="navbar-nav justify-content-end flex-grow-1 pe-3"> + <li class="nav-item"> + <a class="nav-link active" aria-current="page" href="#">Home</a> + </li> + <li class="nav-item"> + <a class="nav-link" href="#">Link</a> + </li> + <li class="nav-item dropdown"> + <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> + Dropdown + </a> + <ul class="dropdown-menu dropdown-menu-dark"> + <li><a class="dropdown-item" href="#">Action</a></li> + <li><a class="dropdown-item" href="#">Another action</a></li> + <li> + <hr class="dropdown-divider"> + </li> + <li><a class="dropdown-item" href="#">Something else here</a></li> + </ul> + </li> + </ul> + <form class="d-flex" role="search"> + <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> + <button class="btn btn-success" type="submit">Search</button> + </form> + </div> + </div> + </div> +</nav> +{{< /example >}} + ## CSS ### Variables diff --git a/site/content/docs/5.2/components/offcanvas.md b/site/content/docs/5.2/components/offcanvas.md index cba75ac216..39a5fb826d 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 </div> {{< /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" >}} +<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. |