{{page.title}} // {{page.subtitle}}

Basic Usage

Option {{item}}

You may supply a direction of left, up, down, or right through the md-direction attribute.

Direction {{direction}}
Open/Closed Open Closed
Animation Modes {{mode}}

Note that you can also hover over the directive's area or tab through each button to open and activate the speed dial menu.

More Options

Option {{item}}

The speed dial supports many advanced usage scenarios. This demo shows many of them mixed together.

Menu
{{item.name}}

ngRepeat

You can easily use ng-repeat with the speed dial, but it requires a slightly different HTML structure in order to support the necessary DOM changes/styling.

Simply ensure that your ng-repeat is on a div (or any other tag) that wraps your items.

$mdDialog

You can also use the buttons to open a dialog. When clicked, the buttons above will open a dialog showing a message which item was clicked.

ngHide

The speed dial also supports hiding using the standard ng-hide attribute. Hide the speed dial.

Tooltips

Each action item supports a tooltip using the standard approach as can be seen above.