🎨 bootstrap offcanvas 사용 팁

일하다가 쓰게 되었는데 헷갈려서 헤맸던 것들 정리함.

 

 

1. 기본 doc문서

https://getbootstrap.com/docs/5.0/components/offcanvas/#offcanvas-components

Offcanvas

기본적인건 여기서 다 찾아서 쓰면 됨.

 

2. offcanvas 열기/닫기를 제이쿼리로 나타내기

$('.offcanvas').offcanvas('show');
$('.offcanvas').offcanvas('hide');

이거 진짜 몰라서 뒤지고 난리났음...

 

 

3. offcanvas 열 때, 닫을 때 따로 이벤트 걸기

// 열었을 때 이벤트
$('.offcanvas').on('show.bs.offcanvas', function() {
    console.log(1)
});

// 닫았을 때 이벤트
$('.offcanvas').on('hide.bs.offcanvas', function() {
    console.log(1)
})

// 자바스크립트는 이런식으로 써야함
var allOffcanvas = document.querySelectorAll('.offcanvas');
for (var i = 0; i < allOffcanvas.length; i++) {
    allOffcanvas[i].addEventListener('hide.bs.offcanvas', function () {
        console.log(1);
    });
};

이것도 몰라서..참...ㅎㅎ

 

그리고 show, shown, hide, hidden뭐 이런 4가지 이벤트가 있는데 뭐 미묘한 차이가 있다는데 그냥 씀. 공식문서에는 제일 마지막 내용이 이 이벤트거는 내용임.