This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(mdDialog): added openFrom and closeTo properties
openFrom specifies the origin of the transition animation closeTo specifies the target of the transition animation both except string (query selector), element and rect closes #4228
- Loading branch information
1 parent
de32e5b
commit 2e89a85
Showing
4 changed files
with
134 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<div ng-controller="AppCtrl" layout="row" ng-cloak style="height: 300px"> | ||
<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"> | ||
<p class="inset"> | ||
A dialog can specify its origin and target with <code>showFrom</code> and <code>closeTo</code> properties, | ||
<code>showFrom</code> and <code>closeTo</code> both can get string(query selector), element or a rect. | ||
</p> | ||
|
||
<div class="dialog-demo-content" layout="row" layout-wrap> | ||
<md-button class="md-primary md-raised" ng-click="showFromLeft()" flex flex-md="100"> | ||
Open From Left Close To Right | ||
</md-button> | ||
<md-button class="md-primary md-raised" ng-click="showOffscreen()" flex flex-md="100"> | ||
From Offscreen | ||
</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
angular.module('dialogDemo2', ['ngMaterial']) | ||
|
||
.controller('AppCtrl', function($scope, $mdDialog) { | ||
$scope.showFromLeft = function() { | ||
$mdDialog.show( | ||
$mdDialog.alert() | ||
.clickOutsideToClose(true) | ||
.title('Opening from the left') | ||
.content('Closing to the right!') | ||
.ariaLabel('Left to right demo') | ||
.ok('Nice!') | ||
// You can specify either sting with query selector | ||
.openFrom('#left') | ||
// or an element | ||
.closeTo(angular.element(document.querySelector('#right'))) | ||
); | ||
}; | ||
|
||
$scope.showOffscreen = function() { | ||
$mdDialog.show( | ||
$mdDialog.alert() | ||
.clickOutsideToClose(true) | ||
.title('Opening from offscreen') | ||
.content('Closing to offscreen') | ||
.ariaLabel('Offscreen Demo') | ||
.ok('Amazing!') | ||
// Or you can specify the rect to do the transition from | ||
.openFrom({ | ||
top: -50, | ||
width: 30, | ||
height: 80 | ||
}) | ||
.closeTo({ | ||
left: 1500 | ||
}) | ||
); | ||
}; | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters