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:
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:
md-direction equals to bottom when using top position.The component can be displayed different animations for each scenario that you might want:
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:
| Name | Description | Default |
|---|---|---|
| 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. | - |
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:
This component does not have any extra option.
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...