Basic Usage

AngularMaterialJSBasicUsage.md

Angular Material Basic Usage

A Pen by Captain Anonymous on CodePen.

License.

index.html

<div ng-controller="AppCtrl" layout="column" class="fabSpeedDialdemoBasicUsage" ng-app="MyApp">
<md-toolbar>
    <div class="md-toolbar-tools">
        <md-button aria-label="Main Menu" ng-click="app.toggleLeftNav()">
            <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
        </md-button>

        <md-button ng-link="/" aria-label="Home">
            <img src=" http://placehold.it/350x150" style="width: 135px; padding-top: 10px;">
        </md-button>
        <span flex=""></span>
    <div>
      <md-fab-speed-dial md-open="demo.isOpen" md-direction="down" ng-class="'md-fling'">
        <md-fab-trigger>
          <md-button aria-label="menu" class="md-fab md-warn">
            <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
          </md-button>
        </md-fab-trigger>

        <md-fab-actions>
          <md-button aria-label="twitter" class="md-fab md-raised md-mini">
            <md-icon md-svg-src="img/icons/twitter.svg"></md-icon>
          </md-button>
          <md-button aria-label="facebook" class="md-fab md-raised md-mini">
            <md-icon md-svg-src="img/icons/facebook.svg"></md-icon>
          </md-button>
          <md-button aria-label="Google hangout" class="md-fab md-raised md-mini">
            <md-icon md-svg-src="img/icons/hangout.svg"></md-icon>
          </md-button>
        </md-fab-actions>
      </md-fab-speed-dial>
    </div>
  </div>
  </md-toolbar>
</div>

script.js

(function() {
  'use strict';

  angular.module('MyApp')
    .controller('AppCtrl', function($scope) {
      $scope.demo = {
        topDirections: ['left', 'up'],
        bottomDirections: ['down', 'right'],

        isOpen: false,

        availableModes: ['md-fling', 'md-scale'],
        selectedMode: 'md-fling',

        availableDirections: ['up', 'down', 'left', 'right'],
        selectedDirection: 'up'
      };
    });
})();

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<script src="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>

style.css

.fabSpeedDialdemoBasicUsage .text-capitalize {
  text-transform: capitalize; }
.fabSpeedDialdemoBasicUsage .md-fab:hover, .fabSpeedDialdemoBasicUsage .md-fab.md-focused {
  background-color: #000 !important; }
.fabSpeedDialdemoBasicUsage p.note {
  font-size: 1.2rem; }
.fabSpeedDialdemoBasicUsage .lock-size {
  min-width: 300px;
  min-height: 300px;
  width: 300px;
  height: 300px;
  margin-left: auto;
  margin-right: auto; }

styles

<link href="http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.css" rel="stylesheet" />