JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://jakiestfu.github.io/Snap.js/snap.js"></script>
<div class="list" data-snap-ignore="true">
<div class="item ion-item .snap-content ">
</div>
<img src="https://randomuser.me/api/portraits/thumb/men/27.jpg">
<p>
(555) 555-1212
</p>
<div class="item-options button item-right-editable button-positive">
Share
</div>
<div class="item-options button item-right-editable button-positive">
Edit
</div>
</div>
</div>
<div>
<h1 class='asdf'>
Hello
</h1>
<h2 class='asdf'>John Smith 1</h2>
</div>
CSS
.padded {
padding-top: 60px;
}
/* From snap.css */
.snap-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
z-index: 2;
overflow: auto;
-webkit-overflow-scrolling: touch;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.snap-drawers {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: auto;
}
.snap-drawer {
position: absolute;
top: 0;
right: auto;
bottom: 0;
left: auto;
width: 265px;
height: auto;
overflow: auto;
-webkit-overflow-scrolling: touch;
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-ms-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
transition: width 0.3s ease;
}
.snap-drawer-left {
left: 0;
z-index: 1;
}
.snap-drawer-right {
right: 0;
z-index: 1;
}
.snapjs-left .snap-drawer-right,
.snapjs-right .snap-drawer-left {
display: none;
}
.snapjs-expand-left .snap-drawer-left,
.snapjs-expand-right .snap-drawer-right {
width: 100%;
}
.list {
background: white;
border: 2px solid black;
}
JavaScript
var snapper = new Snap({
element: document.getElementsByClassName('item')[0]
});