jindo.m.SlideReveal

slideout 거버넌스

전체화면의 좌,우,위에 슬라이드 메뉴를 구성하는 jindo.m.SlideReveal 컴포넌트는 slideout 오픈소스로 거버넌스를 대신한다.

상세한 가이드는 slideout 공식 홈페이지를 참조한다.

개요

• demo : https://mango.github.io/slideout/
• github : https://github.com/Mango/slideout
• 버전 : 0.0.11+
• 라이센스 : MIT

설치

공식 홈페이지에서 다운로드 링크와 다양한 의존성 라이브러리(npm, spm, bower, component)를 제공하고 있다.

• download url : https://github.com/mango/slideout/releases/
• 다양한 의존성 라이브러리를 지원한다.

$ npm install slideout
$ spm install slideout
$ bower install slideout.js
$ component install mango/slideout

고려할 사항

슬라이드 효과 및 방향

jindo.m.SlideRevel의 슬라이드 효과는 메인 컨텐츠와 메뉴 모두를 좌,우,아래로 미는 형태를 취하는 반면, slideout은 메인 컨텐츠만 좌,우영역으로 움직이면서, 메뉴가 노출되는 형태이다. 또한, slideout은 추가적으로 터치에 의해 슬라이드 제어가 가능하다.

slideout 슬라이드

jindo.m.SlideReveal 슬라이드

지원범위 고려

slideout은 다음 환경을 지원한다.

Chrome (IOS, Android, desktop)
Firefox (Android, desktop)
Safari (IOS, Android, desktop)
Opera (desktop)
IE 10+ (desktop)

posision:fixed 방식

• slideout은 position:fixed 방식으로 구현되어 있어서, position:fixed를 사용할 수 없는 환경에서는 적용이 불가하다.

andoroid는 3.0 이상부터, iOS는 5.0이상부터 사용이 가능하다. 자세한 내용은 caniuse를 참조한다. http://caniuse.com/#search=position%3Afixed

transform 이동 방식

• slideout은 슬라이드 이동시 transform3d로 이동되어 속도가 빠르다 하지만, transform3d 을 지원하지 않는 환경 (IE9 이하)에서는 지원이 안된다.

자세한 내용은 caniuse를 참조한다.
http://caniuse.com/#search=transform

• slideout은 메뉴가 노출될때 컨텐츠 영역이 하드웨어 가속이 적용된다. 따라서, 컨텐츠 영역이 굉장히 크거나 긴 영역으로 구성될 경우, 슬라이드시 성능 이슈가 발생할수 있다.