Bootstrap 5 Offcanvas Usage Events
Bootstrap 5 Offcanvas Events fired when interacting with the Bootstrap 5 offcanvas. For example, these events are fired when an off-canvas element is toggled to be visible or hidden.
Bootstrap 5 Offcanvas Usage Events:
- show.bs.offcanvas: It is fired when the show instance method of the dropdown is called.
- shown.bs.offcanvas: It is fired when the offcanvas is completely visible to the user after all the CSS transitions are done.
- hide.bs.offcanvas: It is fired when the hide instance method of the dropdown is called.
- hidden.bs.offcanvas : It is fired when the offcanvas is completely hidden from the user after all the CSS transitions are done.
Syntax:
offcanvasEl.addEventListener(offcanvas_event, callbackFunction);
Let us understand more about this using some examples below.
Example 1: In this example, we will listen for the offcanvas events that get fired when the offcanvas is toggled to be visible.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< button data-bs-toggle = "offcanvas"
data-bs-target = "#myOffcanvas"
class = "btn btn-success"
type = "button" >
Toggle offcanvas
</ button >
< div class = "offcanvas offcanvas-start"
tabindex = "-1"
id = "myOffcanvas"
aria-labelledby = "offcanvasExampleLabel" >
< div class = "offcanvas-header" >
< h5 class = "offcanvas-title"
id = "offcanvasExampleLabel" >
GFG Offcanvas
</ h5 >
</ div >
< div class = "offcanvas-body" >
Welcome to offcanvas GFG!!
</ div >
< script >
const myOffcanvas =
document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('show.bs.offcanvas', () => {
console.log('show instance method fired!');
})
myOffcanvas.addEventListener('shown.bs.offcanvas', () => {
console.log('offcanvas element completely visible!');
})
</ script >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we will listen for the offcanvas events that get fired when the offcanvas is toggled to be hidden.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible"
content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< link href =
rel = "stylesheet"
integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< button data-bs-toggle = "offcanvas"
data-bs-target = "#myOffcanvas"
class = "btn btn-success"
type = "button" >
Toggle offcanvas
</ button >
< div class = "offcanvas offcanvas-start"
tabindex = "-1" id = "myOffcanvas"
aria-labelledby = "offcanvasExampleLabel" >
< div class = "offcanvas-header" >
< h5 class = "offcanvas-title"
id = "offcanvasExampleLabel" >
GFG Offcanvas
</ h5 >
</ div >
< div class = "offcanvas-body" >
Welcome to offcanvas GFG!!
</ div >
< script >
const myOffcanvas =
document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hide.bs.offcanvas', () => {
console.log('hide instance method fired!');
})
myOffcanvas.addEventListener('hidden.bs.offcanvas', () => {
console.log('offcanvas element completely hidden!');
})
</ script >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#events
Last Updated :
14 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...