Name Last Update
..
demo Loading commit data...
test Loading commit data...
.bower.json Loading commit data...
.gitignore Loading commit data...
LICENSE Loading commit data...
README.md Loading commit data...
bower.json Loading commit data...
index.html Loading commit data...
paper-fab-morph.html Loading commit data...
paper-fab-speed-dial.html Loading commit data...
paper-fab-transitions.html Loading commit data...
paper-square-grow-animation.html Loading commit data...
preview.png Loading commit data...

README.md

paper-fab-transitions

Polymer elements for adding morphing and speed dial transitions to floating action buttons as defined by Material Design specifications.

Install

bower install paper-fab-transitions --save

Usage

Morphing

Add morphing transition from a fab with the class dropdown-trigger to an element with the class dropdown-content:

<link rel="import" href="bower_components/paper-fab-transitions/paper-fab-morph.html">

<paper-fab-morph>
  <paper-fab icon="menu" class="dropdown-trigger">
  <paper-material class="dropdown-content">
    <paper-menu>
      <paper-item>One</paper-item>
      <paper-item>Two</paper-item>
    </paper-menu>
  </paper-mterial>
</paper-fab-morph>

Speed Dial

When tapping a fab with the class dropdown-trigger, open a speed dial menu with the class dropdown-content:

<link rel="import" href="bower_components/paper-fab-transitions/paper-fab-speed-dial.html">

<paper-fab-speed-dial>
  <paper-fab icon="add" class="dropdown-trigger"></paper-fab>
  <div class="dropdown-content">
    <paper-fab mini icon="star-border"></paper-fab>
    <paper-fab mini icon="star-half"></paper-fab>
    <paper-fab mini icon="star"></paper-fab>
  </div>
</paper-fab-speed-dial>

Documentation

Demo

Material Design specifications