Components chevron_right Speed Dial

GitHub

Basic Usage

 
<PaperSpeedDial @animation={{this.animation}} @direction={{this.direction}} @open={{this.open}} @onToggle={{action (mut this.open)}} as |dial|>
  <dial.trigger>
    <PaperButton @fab={{true}}>
      {{paper-icon "menu"}}
    </PaperButton>
  </dial.trigger>

  <dial.actions as |actions|>
    <actions.action>
      <PaperButton @mini={{true}} @onClick={{action (mut this.showDialog) true}}>
        {{paper-icon "people"}}
      </PaperButton>
    </actions.action>

    <actions.action>
      <PaperButton @mini={{true}} @onClick={{action (mut this.showDialog) true}}>
        {{paper-icon "accessibility"}}
      </PaperButton>
    </actions.action>

    <actions.action>
      <PaperButton @mini={{true}} @onClick={{action (mut this.showDialog) true}}>
        {{paper-icon "check-circle"}}
      </PaperButton>
    </actions.action>
  </dial.actions>
</PaperSpeedDial>

Direction

Up
Down
Left
Right

Open/Closed

open

Animation

Fling
Scale

You may supply a direction of left, up, down, or right through the direction attribute. Default value is down.

There are also two available animations. Specify fling or scale strings through the animation attribute. Default value is fling.

The component can also take a open attribute and an onToggle pair, much like paper-sidenav. Use the pair to control the open status of the speed dial.

Advanced Usage

 
<PaperSpeedDial @onMouseEnter={{action (mut this.open2) true}} @onMouseLeave={{action (mut this.open2) false}} @open={{this.open2}} @onToggle={{action (mut this.open2)}} @hoverFull={{this.hoverFull}} as |dial|>
  <dial.trigger>
    <PaperButton @fab={{true}}>
      {{paper-icon "menu"}}
    </PaperButton>
  </dial.trigger>

  <dial.actions as |actions|>
    <actions.action>
      <PaperButton @mini={{true}} @onClick={{action (mut this.showDialog) true}}>
        {{paper-icon "people"}}
      </PaperButton>
    </actions.action>

    <actions.action>
      <PaperButton @mini={{true}} @onClick={{action (mut this.showDialog) true}}>
        {{paper-icon "accessibility"}}
      </PaperButton>
    </actions.action>

    <actions.action>
      <PaperButton @mini={{true}} @onClick={{action (mut this.showDialog) true}}>
        {{paper-icon "check-circle"}}
      </PaperButton>
    </actions.action>
  </dial.actions>
</PaperSpeedDial>

You can use the onMouseEnter and onMouseLeave actions to control the open attribute. This results in a speed dial that opens when you hover it.

By default, it only works when you hover the speed dial's trigger. However, if you want to open it by hovering the whole speed dial space including its actions, you can pass in hoverFull=true. Try it with the following checkbox:

hoverFull