pomber / paper-fab-speed-dial

A floating action button flinging out related actions
https://pomber.github.io/paper-fab-speed-dial/
MIT License
15 stars 7 forks source link

Use with templates #4

Open NicolasRannou opened 7 years ago

NicolasRannou commented 7 years ago

Is there a good way to use this element with templates? The animation is broken when I do the following. (the fab button just appear, no animation)

<paper-fab-speed-dial>      
    <paper-fab icon="add"></paper-fab>
    <div class="dropdown-content">
      <template is="dom-repeat" items="{{apps}}">
        <paper-fab mini id="[[item.name]]" icon="[[item.icon]]"></paper-fab>
        <paper-tooltip for="[[item.name]]" position="left" animation-delay="0">[[item.label]]</paper-tooltip>
       </template>
    </div>
</paper-fab-speed-dial>
pomber commented 7 years ago

It's not working because the animation is configured before items are added: https://github.com/pomber/paper-fab-speed-dial/blob/master/paper-fab-speed-dial.html#L69

We will need to find the way to update the animation config after children are added.
I will take a look later.

pomber commented 7 years ago

Another demo:

<paper-fab-speed-dial class="three">
  <paper-fab></paper-fab>
  <div class="dropdown-content">
    <template is="dom-repeat" items="[1,2]">
      <paper-fab mini></paper-fab>
    </template>
  </div>
</paper-fab-speed-dial>
bennypowers commented 6 years ago

Is this still an issue after #8 ?