angular-material-npfixed/src/components/dialog/demoOpenFromCloseTo/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<div ng-controller="AppCtrl" layout="row" ng-cloak style="height: 300px">
  <style>
      .edgePadding {
        padding-left: 25px;
        padding-right: 25px;
      }

  </style>

  <div layout="column" layout-align="center center"
       style="background-color: #f2f2f2" class="md-padding">
    <span id="left">left</span>
  </div>

  <div layout="column" layout-align="center start" layout-padding flex>
    <p class="inset">
      A dialog can specify its origin and target with <code>openFrom</code> and
      <code>closeTo</code> properties.

      The options showFrom and closeTo can be specified as a string [where internally
      querySelector( ) is used to perform the DOM element lookup],
      element or an Rect object [with top, left, width, height fields].
    </p>

    <div class="dialog-demo-content" layout="column" layout-align="center center" style="width:100%">
      <md-button class="md-primary md-raised edgePadding" ng-click="openFromLeft()" >
        Open From Left - Close To Right
      </md-button>
      <md-button class="md-primary md-raised edgePadding" ng-click="openOffscreen()" >
        Open From Top Left - Close Slide Down
      </md-button>
    </div>

  </div>

  <div layout="column" layout-align="center center"
       style="background-color: #f2f2f2" class="md-padding">
    <span id="right">right</span>
  </div>
</div>