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 is a Material Design component similar to the Floating action button. It is used to display a <ons-fab> element that when clicked displays a menu.

The component is defined using the <ons-speed-dial> element and the items with <ons-speed-dial-item>.

<ons-speed-dial>
  <ons-fab>
    A
  </ons-fab>
  <ons-speed-dial-item>
    B
  </ons-speed-dial-item>
  <ons-speed-dial-item>
    C
  </ons-speed-dial-item>
  <ons-speed-dial-item>
    D
  </ons-speed-dial-item>
</ons-speed-dial>

Changing the position and direction

Just like with the <ons-fab> element the position can be changed using the position attribute. Normally the value is bottom right.

It is also possible to configure the direction in which the menu is displayed with the direction attribute. Possible values are up, down, left and right.

<ons-speed-dial
  position="bottom right"
  direction="up">
  ...
</ons-speed-dial>

See also

Attributes

Attributes are added directly to the element. You can do this in HTML or JS.

HTML: <ons-speed-dial someAttribute="true" anotherAttribute><ons-speed-dial>
JS: document.querySelector('ons-speed-dial').setAttribute('someAttribute', 'true')

Name Type Description
modifier String The appearance of the component. Optional.
ripple If this attribute is defined, the button will have a ripple effect when tapped. 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.
direction String Specify the direction the items are displayed. Possible values are “up”, “down”, “left” and “right”. Optional.
disabled Specify if button should be disabled. Optional.

Properties

Properties are accessed on the element through JS, and should be get and set directly. For example: document.querySelector('ons-speed-dial').disabled.

Name Description
disabled Whether the element is disabled or not.
inline Whether the element is inline or not.
visible Whether the element is visible or not.

Methods

These methods are called directly on the DOM element. Get a reference to the element in JS, and the methods below will be available to call on it. For example: document.querySelector('ons-speed-dial').someMethod().

Signature Description
show() Show the speed dial.
hide() Hide the speed dial.
showItems() Show the speed dial items.
hideItems() Hide the speed dial items.
isOpen() Returns whether the menu is open or not.
toggle() Toggle visibility.
toggleItems() Toggle item visibility.
show()

Show the speed dial.

hide()

Hide the speed dial.

showItems()

Show the speed dial items.

hideItems()

Hide the speed dial items.

isOpen()

Returns whether the menu is open or not.

toggle()

Toggle visibility.

toggleItems()

Toggle item visibility.

Events

To use these events, add event listeners to the elements as you would for native events, like click. For example: document.querySelector('ons-speed-dial').addEventListener('open', function() { ... }).

Name Description
open Fired when the menu items are shown.
close Fired when the menu items are hidden.
open

Fired when the menu items are shown.

Parameters
Name Type Description
close

Fired when the menu items are hidden.

Parameters
Name Type Description

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.