diff --git a/README.md b/README.md index aa0b08e..da2b96b 100644 --- a/README.md +++ b/README.md @@ -106,11 +106,12 @@ gulp test **Example Template** ```html - +
Title
Summary
+
@@ -119,6 +120,7 @@ gulp test
Expanded Title
Expanded Summary
+
@@ -135,6 +137,98 @@ gulp test
``` +```javascript +angular.module('app').controller('ctrl', function ($mdExpansionPanel) { + // async + $mdExpansionPanel().waitFor('panelOne').then(function (instance) { + instance.expand(); + instance.collapse({animation: false}); + instance.remove(); + }); + + // sync + $mdExpansionPanel('panelOne').expand(); +}); +``` + + +**Example Group** +```html + + + + + + + + + + + + + + + + + + + +``` +```javascript +angular.module('app').controller('ctrl', function ($mdExpansionPanelGroup) { + // async + $mdExpansionPanelGroup().waitFor('panelGroup').then(function (instance) { + instance.remove('panelOne'); + instance.remove('panelTwo', {animation: false}); + }); + + // sync + $mdExpansionPanelGroup('panelOne').removeAll({animation: false}); +}); +``` + + + +**Example Register Panels to group** +```html + + +``` +```javascript +angular.module('app').controller('ctrl', function ($scope, $mdExpansionPanelGroup) { + + $mdExpansionPanelGroup().waitFor('panelGroup').then(function (instance) { + instance.register('panelOne', { + templateUrl: 'templateOne.html', + controller: 'TemplateOneController', + controllerAs: 'vm' + }); + + instance.register('panelTwo', { + templateUrl: 'templateTwo.html', + controller: 'TemplateTwoController', + controllerAs: 'vm' + }); + }); + + + $scope.addPanelOne = function () { + $mdExpansionPanelGroup('panelGroup').add('panelOne', {localParam: 'some data'}); + }; + + $scope.addPanelTwo = function () { + $mdExpansionPanelGroup('panelGroup').add('panelTwo'); + }; + + $scope.removePanelOne = function () { + $mdExpansionPanelGroup('panelGroup').remove('panelOne'); + }; + + $scope.removeAll = function () { + $mdExpansionPanelGroup('panelGroup').removeAll({animation: false}); + }; +}); +``` @@ -153,6 +247,7 @@ angular.module('myApp', ['ngMaterial', 'material.components.expansionPanels']); * [mdExpansionPanelExpanded](#mdExpansionPanelExpanded) * [mdExpansionPanelHeader](#mdExpansionPanelHeader) * [mdExpansionPanelFooter](#mdExpansionPanelFooter) +* [mdExpansionPanelIcon](#mdExpansionPanelIcon) * [$mdExpansionPanel](#$mdExpansionPanel) * [$mdExpansionPanelGroup](#$mdExpansionPanelGroup) @@ -211,7 +306,7 @@ angular.module('myApp', ['ngMaterial', 'material.components.expansionPanels']); ``` ... -
+ ``` @@ -282,6 +377,16 @@ this is optional +## mdExpansionPanelIcon + +`mdExpansionPanelIcon` can be used in both `md-expansion-panel-collapsed` and `md-expansion-panel-header` as the first or last element. Adding this will provide a animated arrow for expanded and collapsed states + +``` + +``` + + + ### Services @@ -294,14 +399,14 @@ Expand and collapse Expansion Panel using its `md-component-id` // sync $mdExpansionPanel('theComponentId').expand(); $mdExpansionPanel('theComponentId').contract(); -$mdExpansionPanel('theComponentId').remove(); +$mdExpansionPanel('theComponentId').remove({animation: false}); $mdExpansionPanel('theComponentId').onRemove(function () {}); // Async $mdExpansionPanel().waitFor('theComponentId').then(function (instance) { instance.expand(); instance.contract(); - instance.remove(); + instance.remove({animation: false}); instance.onRemove(function () {}); }); ``` @@ -341,6 +446,13 @@ You can use this in 2 ways Exapnd Panel +**Parameters** + +| Param | Type | Details | +| :--: | :--: | :--: | +| options | object= |

object with options

| +| options#animation | boolean= |

set to false if you want no animations

| + **Returns** | Param | Details | @@ -352,6 +464,13 @@ Exapnd Panel Collapse Panle +**Parameters** + +| Param | Type | Details | +| :--: | :--: | :--: | +| options | object= |

object with options

| +| options#animation | boolean= |

set to false if you want no animations

| + **Returns** | Param | Details | @@ -367,7 +486,8 @@ Remove panel from document | Param | Type | Details | | :--: | :--: | :--: | -| noAnimation | boolean= |

remove without closeing animation

| +| options | object= |

object with options

| +| options#animation | boolean= |

set to false if you want no animations

| **Returns** @@ -445,7 +565,7 @@ $mdExpansionPanelGroup().waitFor('theComponentId').then(function (instance) { instance.add('name', {locals: 'data'}); instance.remove('name'); - instance.removeAll(); + instance.removeAll({animation: false}); instance.count(); var killOnChange = instance.onChange(function (count) {}); }); @@ -537,6 +657,8 @@ Remove a panel form the group | Param | Type | Details | | :--: | :--: | :--: | | componentId | string |

component id on panel

| +| options | object= |

object with options

| +| options#animation | boolean= |

set to false if you want no animations

| **Returns** @@ -549,6 +671,13 @@ Remove a panel form the group Remove all panels form the group +**Parameters** + +| Param | Type | Details | +| :--: | :--: | :--: | +| options | object= |

object with options

| +| options#animation | boolean= |

set to false if you want no animations

| + ### $mdExpansionPanelGroup#count