rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-21 13:29:00 +01:00
Code Issues Actions 10 Packages Releases Activity

Add .show class to offcanvas example, and disable it's normal behavior in our JS

Browse Source
This commit is contained in:
Mark Otto 2022-04-21 10:05:14 -07:00 committed by Mark Otto
parent 554736834d
commit 9a614a7e1d
2 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
site/assets/js/application.js
View File

@ -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
site/content/docs/5.1/components/offcanvas.md
View File

@ -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>