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