Reference > v-ons-speed-dial

v-ons-speed-dial

Element that displays a Material Design Speed Dialog component. It is useful when there are more than one primary action that can be performed in a page. The Speed dial looks like a <ons-fab> element but will expand a menu when tapped.

Tutorial

Speed dial

The speed dial component is a Material Design component that displays a floating action button that expands into a menu when tapped. It’s useful for situations where there are several actions needs to be displayed that are of equal importance.

The menu items of the SpeedDial component are defined using the VOnsSpeedDialItem component. It also requires a VOnsFab component which represents the main button.

To define the position of the component the position property can be specified. By default it is placed in the bottom right corner which can also be achieved by setting the property to the literal string "bottom right".

In order to show or hide VOnsSpeedDial, the visible prop must be used. The items will toggle by default when clicking on the button. However, the open prop can optionally be provided in order to programatically show or hide the items. In that case, the onClick prop must be set as well in order to change the value of the open prop and keep it updated:

<v-ons-speed-dial :open="isOpen" @click="() => isOpen = !isOpen">...</v-ons-speed-dial>

See also

Props

Name Type Description
direction String Specify the direction the items are displayed. Possible values are “up”, “down”, “left” and “right”. Optional.
disabled Boolean Specify if button should be disabled. Optional.
modifier String The appearance of the component. Optional.
open Boolean Returns whether the menu is open or not. Optional.
open Boolean If exists, the inner items will be shown accordingly. Must be modified on update:open event. Optional.
position String

Specify the vertical and horizontal position of the component. I.e. to display it in the top right corner specify “right top”. Choose from “right”, “left”, “top” and “bottom”.

Optional.
ripple Boolean If this attribute is defined, the button will have a ripple effect when tapped. Optional.
visible Boolean Specify the visibility of the component. Optional.

Events

Name Description
open Fired when the menu items are shown.
close Fired when the menu items are hidden.
update:open Fired right after user interaction. Useful to update open prop.
click Normal click event. Useful to modify the component default action (toggle items).
open

Fired when the menu items are shown.

Parameters
Name Type Description
close

Fired when the menu items are hidden.

Parameters
Name Type Description
update:open

Fired right after user interaction. Useful to update open prop.

Parameters
Name Type Description
event Number New value for open prop.
click

Normal click event. Useful to modify the component default action (toggle items).

Parameters
Name Type Description
event Object Event object.
event.preventDefault Function Avoids the default behavior.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.