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.
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>
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>
| 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. | |
| open | Boolean | Returns whether the menu is open or not. Optional. |
| var | String | Variable name to refer the speed dial. Optional. Works only during initialization. |
| ons-open | Expression | Allows you to specify custom behavior when the “open” event is fired. Optional. Works only during initialization. |
| ons-close | Expression | Allows you to specify custom behavior when the “close” event is fired. Optional. Works only during initialization. |
| Name | Description |
|---|---|
| ripple | If this property is defined, the button will have a ripple effect when tapped. |
| disabled | Whether the element is disabled or not. |
| inline | Whether the element is inline or not. |
| visible | Whether the element is visible or not. |
| open | Returns whether the menu is open or not. |
| 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. |
| once(eventName, listener) | Add an event listener that’s only triggered once. |
| off(eventName, [listener]) | Remove an event listener. If the listener is not specified all listeners for the event type will be removed. |
| on(eventName, listener) | Add an event listener. |
Show the speed dial.
Hide the speed dial.
Show the speed dial items.
Hide the speed dial items.
Returns whether the menu is open or not.
Toggle visibility.
Toggle item visibility.
Add an event listener that’s only triggered once.
| Name | Type | Description |
|---|---|---|
| eventName | String | Name of the event. |
| listener | Function | Function to execute when the event is triggered. |
Remove an event listener. If the listener is not specified all listeners for the event type will be removed.
| Name | Type | Description |
|---|---|---|
| eventName | String | Name of the event. |
| listener | Function | Function to execute when the event is triggered. |
Add an event listener.
| Name | Type | Description |
|---|---|---|
| eventName | String | Name of the event. |
| listener | Function | Function to execute when the event is triggered. |
Some Onsen UI components have overlapping event names. For example, ons-carousel and ons-navigator both emit postchange events. Stop overlapping events from propagating to avoid conflicts: document.querySelector('ons-carousel').on('postchange', e => e.stopPropagation()).
| Name | Description |
|---|---|
| open | Fired when the menu items are shown. |
| close | Fired when the menu items are hidden. |
Fired when the menu items are shown.
| Name | Type | Description |
|---|
Fired when the menu items are hidden.
| Name | Type | Description |
|---|
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.