flyouts

Easy customizable and reactive sidebar flyouts

Example

Step 1: Include FlyoutManager in your app layout or in body (in case you don't have layouts)

{{> FlyoutManager}}

Step 2: Create template that will be showed as flyout

<template name="myCustomTemplate">
 <div class="flyout-header">
    <button class="close-flyout-button"> x </button>
  </div>
  <div class="flyout-content">
    {{yourMessage}}
  </div>
</template>

• Note: close-flyout-button is predefined class for close flyout button. You don't need to add any event handlers for it.

Style it whatever you want (in example is used LESS):

@padding: 10px;
.flyout { // root node for each opened flyout
  background: #EEE;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);

  //some custom elements:
  .flyout-header {
    background: #CCC;
    padding: @padding;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5)
  }

  .flyout-content {
    padding: @padding;
  }
}

Step 3: Open your template in flayout window when you need it

//open flyout
var yourFlyout = FlyoutManager.open('myCustomTemplate', {yourMessage: 'Hello, Flyouts!'});

//close flyout
yourFlyout.close()

Step 4: Have fun!

Future work:

• Add some configuration abilities