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 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.
To display a normal floating action button the Fab component can be used.
The menu items of the SpeedDial component are defined using the SpeedDialItem component. It also requires a Fab component which represents the main button.
To define the position of the component the position property is used. 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 for the SpeedDial component to be fixed when scrolling the page, it needs to be put outside the page. This can be archived by rendering it in the renderFixed function of the Page component.
<Page
renderFixed={() => (
<SpeedDial position='bottom right'>
<Fab>A</Fab>
<SpeedDialItem onClick={this.doSomething}>B</SpeedDialItem>
<SpeedDialItem onClick={this.doSomethingElse}>C</SpeedDialItem>
</SpeedDial>
)} />
| 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. |
| 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. |
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.
| 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.