Ribcage Switcher
A left and right swiping view switcher for ribcage-ui
.
Install
npm install ribcage-switcher
Use
var Switcher = ribcage = FirstView NextView = FirstView = ribcage var switcher = rootView: // See tests for a more complex example
Events
Triggering these events on a pane will cause the switcher to respond
push
- Pass a view as the first argument, and the switcher will push it onto the stack and move to the new viewpop
- Goes to the previous view and pops the last one off the stackgoToView
- Pass a view as the first argument, and the switcher will backtrack there, popping off views as it goesreplace
- Pass a view as the first argument, and the switcher will replace the current pane with that view
Legacy Use
var Switcher = var switcher = depth: 2 switcher switcher switcher switchernext switcherprevious
Transition Events
The switcher will send panes transition:start
and transition:end
events.
// Fires `transition:start` immediately, and `transition:end` approx. 270-300ms later. switchernext // You can disable these events on a per-call basis switcher switchernexttrue switcher
The switcher itself also emits transition:start
and transition:end
events.
switcher.on('transition:end', function (paneIndex, paneView) {
// Do something
})
Throttling Pane Renders
Rendering subviews in the middle of a transition can result in interface lag. Avoiding this issue is easy with panes that extend from ribcage-view
.
var myPane = switcher myPane // Will run immediately switchernext // Start moving to the next pane