Skip to main content

Extensions

Learn about bundled add-ons, how to write and contribute your own, and browse others' third-party extensions.

Snap

The navigation drawer is a panel that displays the app’s main navigation options on the left or right edge of the screen. It is hidden most of the time, but is revealed when the user swipes a finger from the left edge of the screen or, while at the top level of the app, the user touches the app icon in the action bar.

Name Version License Repository
Snap.js 1.9.3 MIT, dawg https://github.com/jakiestfu/Snap.js/

Contents

Usage

Extension Import

<link href="path/to/rc-snap.css" rel="stylesheet">
<script src="path/to/rc-snap.js"></script>

Create a Drawer Layout

<div class="snap-drawers">
  <div class="snap-drawer snap-drawer-left" id="myDrawer">
    ...
  </div>
</div>

<div class="snap-content" data-extension="drawer">
  <header class="bar bar-nav bar-light bg-faded">
    <a href="#myDrawer" data-toggle="drawer" class="icon icon-bars pull-left"></a>
    <h1 class="title">Title</h1>
  </header>
  <div class="content">
    ...
  </div>
</div>

Initialize

초기화 함수를 추가 합니다.

RC_initDrawer();

Via data attributes

Activate a drawer without writing JavaScript. Set data-toggle="drawer" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific drawer to toggle.

Button trigger type

<button type="button" data-toggle="drawer" target="#myDrawer">
    Launch drawer
</button>

Link trigger type

<a href="#myDrawer" data-toggle="drawer">
    Launch drawer
</a>

Via JavaScript

Call a drawer with id myDrawer with a single line of JavaScript:

$('.btn').tap(function() {
  $('#myDrawer').drawer('toggle');
});

Options

Name Type Default Description
showType default | expand default Drawer 가 오픈되는 타입을 설정합니다.
direction left | right left Drawer 가 오픈되는 방향을 설정합니다.
history boolean true window.history 객체에 적용되어 back 버튼을 사용해서 Drawer를 닫을 수 있게 해줍니다.
template string null Drawer 내부에 외부의 파일을 load 해야 할 경우 사용합니다.
backdrop boolean or string true Drawer 배경을 포함합니다. 그렇지 않으면, 탭 시 드로어를 닫지 않는 배경을 위해 static 를 명시하세요.
speed slow | nomal | fast normal Drawer가 열리는 속도를 설정합니다.
animation ease | linear | easeOutBack ease Drawer가 열리는 효과를 설정합니다.

Methods

.drawer(options)

$('#myDrawer').drawer({
  backdrop : false
})

.drawer('toggle')

수동적으로 드로어를 토글합니다. 팝업이 실제로 보여지거나 숨겨지기 전에 호출자에게 리턴합니다. (shown.rc.drawer 나 hidden.rc.drawer 가 발생하기 전에)

$('#myDrawer').drawer('toggle')

.drawer('show')

수동적으로 드로어를 엽니다. 드로어가 실제로 보여지기 전에 호출자에게 리턴합니다. (shown.rc.drawer 이벤트가 발생하기 전에)

$('#myDrawer').drawer('show')

.drawer('hide')

수동적으로 드로어를 닫습니다.. 드로어가 실제로 닫히기 전에 호출자에게 리턴합니다. (hidden.rc.drawer 이벤트가 발생하기 전에)

$('#myDrawer').drawer('hide')

Events

Name Description
show.rc.drawer 열기(show) 메소드가 호출되는 즉시 발생합니다.
shown.rc.drawer Drawer 가 오픈된 후 실행됩니다.
hide.rc.drawer 닫기(hide) 메소드가 호출되는 즉시 실행됩니다
hidden.rc.drawer Drawer가 닫히고 난 후 실행됩니다.
loaded.rc.drawer data-template 값으로 정해진 원격 마크업이 load 된 후 실행되는 이벤트

Examples

Dual side drawers

<div class="snap-drawers">
  <div class="snap-drawer snap-drawer-left" id="leftDrawer">
    ...
  </div>
  <div class="snap-drawer snap-drawer-right" id="rightDrawer">
    ...
  </div>
</div>

<div class="snap-content" data-extension="drawer">
  <header class="bar bar-nav bar-light bg-faded">
    <a href="#leftDrawer" data-toggle="drawer" class="icon icon-bars pull-left"></a>
    <a href="#rightDrawer" data-toggle="drawer" data-direction="right" class="icon icon-gear pull-right"></a>
    <h1 class="title">Title</h1>
  </header>
  <div class="content">
    ...
  </div>
</div>

Expand drawer

<div class="snap-drawers">
  <div class="snap-drawer snap-drawer-left" id="leftDrawer">

    <button data-toggle="drawer" data-target="#myDrawer" data-showType="expand" class="btn btn-primary btn-block" type="button">
      Expand
    </button>
    <button id="close" class="btn btn-secondary btn-block" type="button" >
      Close
    </button>

  </div>
</div>

<div class="snap-content" data-extension="drawer">
  <header class="bar bar-nav bar-light bg-faded">
    <a href="#leftDrawer" data-toggle="drawer" class="icon icon-bars pull-left"></a>
    <h1 class="title">Title</h1>
  </header>
  <div class="content">
    ...
  </div>
</div>
$('#close').tap(function() {
  $('#myDrawer').drawer('hide')
});

Backdrop option

Via data attributes

<button data-toggle="drawer" data-target="#myDrawer" data-backdrop="false" type="button" >
  Launch Drawer
</button>

or Via JavaScript

$('#myDrawer').drawer({
  backdrop : false
})

Material design style

.snap-drawer-left {
  position: fixed;
  top: 0;
  left: -1px;
  right: 0;
  bottom: 0;
  -webkit-transform: translate3d(-265px, 0, 0);
          transform: translate3d(-265px, 0, 0);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
          box-shadow: 0px 0px 10px rgba(0,0,0,0.9);
}
.snapjs-left .snap-drawer-left {
  z-index: 11;
}
snapper = new Snap({
  element: $("#myDrawer")[0],
  maxPosition: 1,
  minPosition: -1,
  transitionSpeed: 0.1,
})

// Initialize drawer
RC_initDrawer();