Off Canvas

일반적 Workflow

• off-canvas component를 적절한 요소내 삽입
• Primary > Click selector : 기본적으로 Oxy Burger Trigger의 클래스로 설정되어 있음. 다른 것으로 하고 싶으면 다른 커스텀 클래스로 변경해야 함.
• Primary > In-builder visibility 설정을 통해 off-canvas가 빌더내에서 보여지게 하거나 감출 수 있음.

Offcanvas Type

Slide : 오프캔버스는 페이지 로딩시 보이지 않는 요소이므로 Structure Panel에서 가장 아래쪽에 위치시켜 부모요소로부터 속성을 영향받지 않도록 하는 것이 좋음.

Push : Primary > Offcanvas Type을 Push로 설정할 경우, Container selector to push를 설정해야 하는데, 기본적으로 .site-container로 설정되어 있음. 페이지 전체가 Push 되는 효과를 위해서는 헤더, 이너컨텐트, 푸터를 담는 div를 생성하고 클래스 이름을 .site-container로 설정함. 그리고 offcanvas는 이 .site-container 바깥쪽에 위치시키고 Container selector to push: 를 .site-container로 세팅하면 됨.

만약, Sticky Header를 사용한다거나 하는 경우, Header 또한 Site Container 바깥쪽에 위치시켜서 헤더가 Push되는 것을 피할 수 있음.

Site Scrolling When Open

Primary > Config

기본값으로 Enabled로 되어있음. 만약, Disabled로 설정될 경우, Offcanvas가 오픈상태에서는 사이트를 스크롤 할 수 없도록 함. 이 옵션은 State on page load 옵션이 "Closed"로 설정되어 있을때만 사용이 가능함.

기타 참고사항

• 오프 캔버스 내부에 컨테이너 div를 추가하는 경우 오프 캔버스의 전체 공간을 차지해야 합니다. flex-shrink를 0으로 설정하고 flex growth를 1로 설정해야 합니다. 이렇게 하면 콘텐츠가 화면을 넘을 때 발생할 수 있는 Safari 문제를 방지할 수 있습니다. (사용자 정의 컨테이너를 추가하는 경우에만 해당)
• 페이지 로드 시 오프캔버스가 표시되지 않도록 하려면 Oxygen의 설정 페이지에서 Oxygen CSS를 활성화했는지 확인하세요.
• Offcanvas가 모바일에서 열리지 않습니까? – 실제로 버거 트리거를 사용하지 않는 한 oxy-burger-trigger 클래스를 사용하고 있지 않은지 확인하세요. 이 클래스는 기본 클래스로 사용됩니다.