rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Code Issues Actions 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 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. 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" >}} {{< 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"> <div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5> <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>