Skip to content

Commit

Permalink
Add .show class to offcanvas example, and disable it's normal behavio…
Browse files Browse the repository at this point in the history
…r in our JS
  • Loading branch information
mdo committed Apr 22, 2022
1 parent 5547368 commit 9a614a7
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 1 deletion.
8 changes: 8 additions & 0 deletions site/assets/js/application.js
Original file line number Diff line number Diff line change
Expand Up @@ -131,4 +131,12 @@
modalBodyInput.value = recipient
})
}

// Offcanvas demo
const myOffcanvas = document.querySelector('.bd-example-offcanvas #offcanvas')
if (myOffcanvas) {
myOffcanvas.addEventListener('show.bs.offcanvas', event => {
event.preventDefault()
}, false)
}
})()
2 changes: 1 addition & 1 deletion site/content/docs/5.1/components/offcanvas.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,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" >}}
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
<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>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
Expand Down

0 comments on commit 9a614a7

Please sign in to comment.