gabiaxel / paper-fab-transitions Goto Github PK

View Code? Open in Web Editor NEW

49.0 7.0 15.0 1.91 MB

Polymer elements for adding morphing and speed dial transitions to floating action buttons

Home Page: http://gabiaxel.github.io/paper-fab-transitions/components/paper-fab-transitions/demo/

License: MIT License

HTML 100.00%

paper-fab-transitions's Introduction

Looking for maintainers, please contact me if you are interested.

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

paper-fab-transitions's People

Contributors

Stargazers

Watchers

Forkers

bmccoy11 reinert maria-le mario-aleo t7tran keithhenry 2947721120 thingselements davidmartex lrnwebcomponents communitybuilders dcunit711 mrsideshowjack

paper-fab-transitions's Issues

Adding labels to speed dial options doesn't work

I want to add labels to the speed dial options similar to Google Inbox:

The layout of <paper-fab-speed-dial> doesn't adjust when adding a labels to the speed dial options:

Setting horizontal-align="right" on the <iron-dropdown> solves this issue:

Another issue is caused by paper-square-grow-animation as it grows not just the height but also the width. During the animation, the label and the FAB aren't on the same line because there isn't enough space for both in the beginning of the animation.

speed dial demo not working for me

the other demo elements work, but speed dial fails for me (in Chrome) and I see this error in dev tools:

Uncaught TypeError: Failed to execute 'animate' on 'Element': 'function (a){return a}' is not a valid value for easing

Polymer 2.0

Do you have plan to migrate this to Polymer 2.0
It would be great.

suggestion

don't know if it's worth, but direction="up" is more appropriated than "top"

New release for leaky styling fix.

I'm running into the leaky styling bug, the fix for which appears to be the last thing committed to this repository. Could a new release be made?

Issues on mobile.

Hey GabiAxel,

I'm trying to use this for a mobile site, and I'm running into an issue with speed dial.
Right now, just using chrome's dev tools to imitate mobile, when I click my dropdown trigger fab the children will appear then suddenly disappear. The transition doesn't even play (which I'm not sure if it's an issue with neon-animation, or what).

Have you run into this problem, or know if this is a known issue with any of the dependencies?

If you need any more information, let me know.
Thanks.