Skip to content
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
example
README.md
index.js
package.json
style.css

README.md

Sioux UISegue

npm install sioux-ui-segue

Push and modal segue for sioux. demo

Inherits from

Create

var UISegue = require('sioux-ui-segue');
var segue = new UISegue('push', document.querySelector('.screen'));
// first argument: type of segue
// second argument: the element segue is performed in

segue.wind()
  .then(function () {
    console.log('Winded!')  
  });

HTML

push
<div class="screen">
  <div class="ui-window foo" data-segue="active"></div>
  <div class="ui-window bar" data-segue="left"></div>
  <div class="ui-window baz" data-segue="right"></div>
</div>
modal
<div class="screen">
  <div class="ui-window mod" data-segue="modal"></div>
</div>

Properties

  • state: UNAVAILABLE if the animation is going on, or AVAILABLE
  • DURATION: the duration of the transition
  • type: the type of the segue, push or modal

Methods

.wind()

If the segue is push, the current window in the middle will go to the left and the one on the right will go to the middle. If the segue is modal, the modal goes up.

.unwind()

If the segue is push, the current window in the middle will go to the right and the one on the left will go to the middle. If the segue is modal, the modal goes down.

.then(callback)

Chain it to a .wind() or .unwind(), and it will fire the callback function argument when those finish.

Events

  • .on('rightWillAppear', function(rightElement) {})
  • .on('leftWillAppear', function(leftElement) {})
  • .on('leftPopped', function(leftElement, event) {})
  • .on('rightPopped', function(rightElement, event) {})
  • .on('rightDidAppear', function(rightElement, event) {})
  • .on('leftDidAppear', function(leftElement, event) {})
  • .on('modalDidDisappear', function(modalElement, event) {})
Something went wrong with that request. Please try again.