Vue Material -

Speed Dial

Floating Action Buttons can show related actions upon hovering or pressing. The button should remain on screen after the menu is invoked.

Speed dial component is pretty flexible and have many options to make it easy to suit all your needs. You can apply different positions, work with a couple of events to trigger the content and also have a awesome morph effect on your main action.

The component is divided in 3 parts: The md-speed-dial, which is the container that control all children, md-speed-dial-content which is the content to be displayed (a.k.a buttons) and md-speed-dial-trigger who is responsible for triggering the content exhibition. Take a look at this following example:

Speed Dial positions

You can specify any position that you want for you Speed Dial component. They can be top and bottom, and combined with left, center or right:

Positions and directions
Prefer the FAB on bottom left position for your main action on scrollable contents. Always use a md-direction equals to bottom when using top position.

Effects

The component can be displayed different animations for each scenario that you might want:

Animations types

Triggers

You can trigger the speed dial content using hover or click. Using this allows you to have a open/close feature or to hold a main action:

Event triggers
For desktop environments it's better to have a hover effect. On mobile you can toggle the property to use click instead.

API - md-speed-dial

NameDescriptionDefault
md-direction String Applies the style to show the content below or above the trigger top
md-direction="top" String Sets the direction of the animation effect to top. This is the default value of md-direction. You don't have to pass it unless you want to reset it's default value -
md-direction="bottom" String Sets the direction of the animation effect to bottom. -
md-effect Boolean Enables/Disables the ripple effect. fling
md-effect="fling" String Applies a reveal effect combining both opacity and scale. This is the default behaviour in most of applications using FAB. -
md-effect="scale" String Applies a reveal effect using scale only. -
md-effect="opacity" String Applies a reveal effect using opacity only. -
md-event String Specifies the event who triggers the content hover
md-event="hover" String Opens the content on hover. -
md-event="click" String Opens the content on click. -

Icon Morph

Sometimes you want the speed dial to have a cross icon to represent your close action after showing the content. This can be easily achieved with the morph icons.

To create that, create two md-icon components inside the trigger and add a md-morph-initial in the one you would like it to be the initial state (or an open state) and a md-morph-final on the close state:

Morphing Icons

Components

API - md-speed-dial-content

This component does not have any extra option.

API - md-speed-dial-trigger

This component is just an alias of md-button with md-fab class. So every option of Buttons can be applied here, even the Vue Router options...