This component displays the child elements of the Material Design Speed dial component.
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>
Attributes are added directly to the element. You can do this in HTML or JS.
HTML: <ons-speed-dial-item someAttribute="true" anotherAttribute><ons-speed-dial-item>
JS: document.querySelector('ons-speed-dial-item').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. |
Properties are accessed on the element through JS, and should be get and set directly. For example: document.querySelector('ons-speed-dial-item').ripple.
| Name | Description |
|---|---|
| ripple | If this property is defined, the button will have a ripple effect when tapped. |
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.