angular-material-expansion-panel

A module that implements design elements based on Material Design Expansion Panels. With additional features that are similar to Google Inbox style Expansion Panels.

To see Material Design Expansion Panels Specification go here.

The expansion panel component can be used with just html or you can use the Expansion Panel Group to control multiple panels through code

Demo

Demo Hosted on github.io
Click Here

Quick Links:
* Installation
* Building
* Run Tests
* Usage
* Documentation

Installation

#### Bower

Change to your project's root directory.

``bash


To install latest

bower install angular-material-expansion-panel

To install latest and update bower.json

bower install angular-material-expansion-panel --save
`

#### Npm

Change to your project's root directory.

`bash


To install latest

npm install angular-material-expansion-panel

To install latest and update package.json

npm install angular-material-expansion-panel --save
`

#### setup

install modules

`bash


install npm modules

npm install

install bower components

bower install
`

Include the material.components.expansionPanels module as a dependency in your application.

`javascript
angular.module('myApp', ['ngMaterial', 'material.components.expansionPanels']);
`




Building

You can easily build using gulp.

The built files will be created in the dist folder

Run the gulp tasks:

`bash


To run locally. This will kick of the watch process




navigate to localhost:8080

gulp

To build the js and css files to the /build directory


gulp build
`

Run Tests

Test using Karma
Run the gulp tasks:

`bash
gulp test
`




Usage

Example Template

`html





Summary

Expanded Title

Expanded Summary

Content

Put content in here

Collapse


`
`javascript
angular.module('app').controller('ctrl', function ($mdExpansionPanel) {
// async
$mdExpansionPanel().waitFor('panelOne').then(function (instance) {
instance.expand();
instance.collapse({animation: false});
instance.remove();
instance.isOpen();
});

// 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});
};
});
`




Documentation

To add Expansion Panels to you angular-material project, include the material.components.expansionPanels module as a dependency in your application.

`javascript
angular.module('myApp', ['ngMaterial', 'material.components.expansionPanels']);
`

* mdExpansionPanelGroup
* mdExpansionPanel
* mdExpansionPanelCollapsed
* mdExpansionPanelExpanded
* mdExpansionPanelHeader
* mdExpansionPanelFooter
* mdExpansionPanelIcon
* $mdExpansionPanel
* $mdExpansionPanelGroup


#### Directives

mdExpansionPanelGroup

mdExpansionPanelGroup is a container to manage multiple panels

`
[md-component-id=""]
[auto-expand=""]
[multiple=""]>
...

`

#### Attributes

| Param | Type | Details |
| :--: | :--: | :--: |
| md-component-id | string= |

add an id if you want to acces the panel via the $mdExpansionPanelGroup service

|
| auto-expand | string= |

panels expand when added to

|
| multiple | string= |

allows for more than one panel to be expanded at a time

|

mdExpansionPanel

mdExpansionPanel is the main container for panels

`
[md-component-id=""]>
...

`

#### Attributes

| Param | Type | Details |
| :--: | :--: | :--: |
| md-component-id | string= |

add an id if you want to acces the panel via the $mdExpansionPanel service

|

mdExpansionPanelCollapsed

mdExpansionPanelCollapsed is used to contain content when the panel is collapsed

`

...

`

mdExpansionPanelExpanded

mdExpansionPanelExpanded is used to contain content when the panel is expanded

`
[height=""]>
...

`xpansion-panel>
`

#### Attributes

| Param | Type | Details |
| :--: | :--: | :--: |
| height | number= |

add this attribute set the max height of the expanded content. The container will be set to scroll

|

mdExpansionPanelHeader

mdExpansionPanelHeader is nested inside of mdExpansionPanelExpanded and contains content you want in place of the collapsed content
this is optional

`
[md-no-sticky=""]>
...

`

#### Attributes

| Param | Type | Details |
| :--: | :--: | :--: |
| md-no-sticky | boolean= |

add this aatribute to disable sticky

|

mdExpansionPanelFooter

mdExpansionPanelFooter is nested inside of mdExpansionPanelExpanded and contains content you want at the bottom.
By default the Footer will stick to the bottom of the page if the panel expands past
this is optional

`
[md-no-sticky=""]>
...

`

#### Attributes

| Param | Type | Details |
| :--: | :--: | :--: |
| md-no-sticky | boolean= |

add this aatribute to disable sticky

|

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

`

`

$3

$mdExpansionPanel

Expand and collapse Expansion Panel using its md-component-id

`javascript
// sync
$mdExpansionPanel('theComponentId').expand();
$mdExpansionPanel('theComponentId').contract();
$mdExpansionPanel('theComponentId').remove({animation: false});
$mdExpansionPanel('theComponentId').onRemove(function () {});
$mdExpansionPanel('theComponentId').isOpen();

// Async
$mdExpansionPanel().waitFor('theComponentId').then(function (instance) {
instance.expand();
instance.contract();
instance.remove({animation: false});
instance.onRemove(function () {});
instance.isOpen();
});
`

#### Methods

$3

Get an instance of the expansion panel by its component id
You can use this in 2 ways

- 1. pass in a string id and get back the instance
- 2. call the service and get a service with 2 methods. Find witch will do the same as 1. waitFor that will return a promise, so you can call on directives before they are added to the dom.

Parameters

| Param | Type | Details |
| :--: | :--: | :--: |
| componentId | string= |

the component id used on the element

|

Returns

| Param | Details |
| :--: | :--: |
| promise/instance |

returns a instance or a service with 2 methods

|

Returned Service

| Method | Details |
| :--: | :--: |
| find |

sync method for getting instance

|
| waitFor |

async method for getting instance. this returnes a promise

|

$3

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 |
| :--: | :--: |
| promise |

a promise that will resolve when panel is done animating

|

$3

Collapse Panel

Parameters

| Param | Type | Details |
| :--: | :--: | :--: |
| options | object= |

object with options

|
| options#animation | boolean= |

set to false if you want no animations

|

Returns

| Param | Details |
| :--: | :--: |
| promise |

a promise that will resolve when panel is done animating

|

$3

Remove panel from document

Parameters

| Param | Type | Details |
| :--: | :--: | :--: |
| options | object= |

object with options

|
| options#animation | boolean= |

set to false if you want no animations

|

Returns

| Type | Details |
| :--: | :--: |
| promise |

a promise that will resolve when panel is done animating

|

$3

Callback for panel when removed from dom

Parameters

| Param | Type | Details |
| :--: | :--: | :--: |
| callback | function |

function called when panel is removed from dom

|

$3

Add a click catcher that will call a given function when the page surrounding the panel is clicked

Parameters

| Param | Type | Details |
| :--: | :--: | :--: |
| callback | function |

function called on click

|

$3

Remove current click catcher

$3

Returns boolean

Returns

| Type | Details |
| :--: | :--: |
| boolean |

true if panel is expanded false if panel is collapsed

|

$mdExpansionPanelGroup

Control expansion panels and allow for adding and registering panels from code

`javascript
// sync
$mdExpansionPanelGroup('theComponentId').register('name', {
templateUrl: 'template.html',
controller: 'Controller'
});
$mdExpansionPanelGroup('theComponentId').add({
templateUrl: 'template.html',
controller: 'Controller'
}).then(function (panelCtrl) {
panelCtrl.expand();
});
$mdExpansionPanelGroup('theComponentId').remove('name');
$mdExpansionPanelGroup('theComponentId').removeAll();
$mdExpansionPanelGroup('theComponentId').collapseAll();
$mdExpansionPanelGroup('theComponentId').getAll();
$mdExpansionPanelGroup('theComponentId').getOpen();
$mdExpansionPanelGroup('theComponentId').count();
var killOnChange = $mdExpansionPanelGroup('theComponentId').onChange(function (count) {});


// async
$mdExpansionPanelGroup().waitFor('theComponentId').then(function (instance) {
instance.register('name', {
templateUrl: 'template.html',
controller: 'Controller'
});

instance.add({
templateUrl: 'template.html',
controller: 'Controller'
}).then(function (panelCtrl) {
panelCtrl.expand();
});

instance.add('name', {locals: 'data'});
instance.remove('name');
instance.removeAll({animation: false});
instance.count();
instance.collapseAll();
instance.getAll();
instance.getOpen();
var killOnChange = instance.onChange(function (count) {});
});
`

#### Methods

$3

Get an instance of the expansion panel group by its component id.
You can use this in 2 ways

- 1. pass in a string id and get back the instance
- 2. call the service and get a service with 2 methods. Find witch will do the same as 1. waitFor` that will return a promise, so you can call on directives before they are added to the dom.

Parameters

| Param | Type | Details |
| :--: | :--: | :--: |
| componentId | string= |

the component id used on the element

|

Returns

| Param | Details |
| :--: | :--: |
| promise/instance |

returns a instance or a service with 2 methods

|

Returned Service

| Method | Details |
| :--: | :--: |
| find |

sync method for getting instance

|
| waitFor |

async method for getting instance. this returnes a promise

|

$3

register panel that can be added by the given name

Parameters

| Param | Type | Details |
| :--: | :--: | :--: |
| name | string |

the name you can use to add the template

|
| options.template | string= |

template string

|
| options.templateUrl | string= |

template url

|
| options.controller | string= |

controller string or function

|
| options.controllerAs | string= |

controller as name

|
| options.locals | object= |

locals for injection

|

$3

add a panel by either passing in a registered name or object. You can also pass in locals

Parameters

| Param | Type | Details |
| :--: | :--: | :--: |
| options | string/object |

registered panel name or object with details

|
| locals | object= |

object of locals to inject intp controller

|

Options Object

| Param | Type | Details |
| :--: | :--: | :--: |
| options.template | string= |

template string

|
| options.templateUrl | string= |

template url

|
| options.controller | string= |

controller string or function

|
| options.controllerAs | string= |

controller as name

|
| options.locals | object= |

locals for injection

|

Returns

| Param | Details |
| :--: | :--: |
| promise |

a promise that will return the panel instance

|

$3

Remove a panel form the group

Parameters

| 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

| Type | Details |
| :--: | :--: |
| promise |

a promise that will resolve when panel is done animating

|

$3

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

|

$3

Return number of panels

Returns

| Type | Details |
| :--: | :--: |
| number |

number of panels in dom

|

$3

A function that is called whenever a panel is added or removed from dom. This will return the panel count

Parameters

| Param | Type | Details |
| :--: | :--: | :--: |
| callback | function |

|

Returns

| Type | Details |
| :--: | :--: |
| function |

a function you can call to stop listening

|

$3

Returns all panel instances from group

$3

Returns all open panel instances from group

$3

Collapse all panels in group

Parameters

| Param | Type | Details |
| :--: | :--: | :--: |
| noAnimation | boolean=false |

set to true if you want no animations

|