angular-material-expansion-panel
v0.7.2
Published
Material Design Expansion Panels for angular material
Downloads
6,235
Maintainers
Readme
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
Bower
Change to your project's root directory.
# 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.
# 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
# install npm modules
npm install
# install bower components
bower install
Include the material.components.expansionPanels
module as a dependency in your application.
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:
# 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:
gulp test
Usage
Example Template
<md-expansion-panel md-component-id="panelOne">
<md-expansion-panel-collapsed>
<div class="md-title">Title</div>
<div class="md-summary">Summary</div>
<md-expansion-panel-icon></md-expansion-panel-icon>
</md-expansion-panel-collapsed>
<md-expansion-panel-expanded>
<md-expansion-panel-header>
<div class="md-title">Expanded Title</div>
<div class="md-summary">Expanded Summary</div>
<md-expansion-panel-icon></md-expansion-panel-icon>
</md-expansion-panel-header>
<md-expansion-panel-content>
<h4>Content</h4>
<p>Put content in here</p>
</md-expansion-panel-content>
<md-expansion-panel-footer>
<div flex></div>
<md-button class="md-warn" ng-click="$panel.collapse()">Collapse</md-button>
</md-expansion-panel-footer>
</md-expansion-panel-expanded>
</md-expansion-panel>
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
<md-expansion-panel-group md-component-id="panelGroup" multiple>
<md-expansion-panel md-component-id="panelOne">
<md-expansion-panel-collapsed></md-expansion-panel-collapsed>
<md-expansion-panel-expanded>
<md-expansion-panel-header></md-expansion-panel-header>
<md-expansion-panel-content></md-expansion-panel-content>
<md-expansion-panel-footer></md-expansion-panel-footer>
</md-expansion-panel-expanded>
</md-expansion-panel>
<md-expansion-panel md-component-id="panelTwo">
<md-expansion-panel-collapsed></md-expansion-panel-collapsed>
<md-expansion-panel-expanded>
<md-expansion-panel-header></md-expansion-panel-header>
<md-expansion-panel-content></md-expansion-panel-content>
<md-expansion-panel-footer></md-expansion-panel-footer>
</md-expansion-panel-expanded>
</md-expansion-panel>
</md-expansion-panel-group>
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
<md-expansion-panel-group md-component-id="panelGroup" multiple>
</md-expansion-panel-group>
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.
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-expansion-panel-group
[md-component-id=""]
[auto-expand=""]
[multiple=""]>
...
</md-expansion-panel-group>
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-expansion-panel
[md-component-id=""]>
...
</md-expansion-panel>
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
<md-expansion-panel-collapsed>
...
</md-expansion-panel-collapsed>
mdExpansionPanelExpanded
mdExpansionPanelExpanded
is used to contain content when the panel is expanded
<md-expansion-panel-expanded
[height=""]>
...
</md-expansion-panel-expanded>
```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-expansion-panel-header
[md-no-sticky=""]>
...
</md-expansion-panel-header>
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-expansion-panel-footer
[md-no-sticky=""]>
...
</md-expansion-panel-footer>
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
<md-expansion-panel-icon></md-expansion-panel-icon>
Services
$mdExpansionPanel
Expand and collapse Expansion Panel using its md-component-id
// 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
$mdExpansionPanel
Get an instance of the expansion panel by its component id You can use this in 2 ways
- pass in a string id and get back the instance
- 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.
- call the service and get a service with 2 methods.
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 |
$mdExpansionPanel#expand
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 |
$mdExpansionPanel#collapse
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 |
$mdExpansionPanel#remove
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 |
$mdExpansionPanel#onRemove
Callback for panel when removed from dom
Parameters
| Param | Type | Details | | :--: | :--: | :--: | | callback | function | function called when panel is removed from dom |
$mdExpansionPanel#addClickCatcher
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 |
$mdExpansionPanel#removeClickCatcher
Remove current click catcher
$mdExpansionPanel#isOpen
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
// 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
$mdExpansionPanelGroup
Get an instance of the expansion panel group by its component id. You can use this in 2 ways
- pass in a string id and get back the instance
- 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.
- call the service and get a service with 2 methods.
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 |
$mdExpansionPanelGroup#register
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 |
$mdExpansionPanelGroup#add
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 |
$mdExpansionPanelGroup#remove
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 |
$mdExpansionPanelGroup#removeAll
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
Return number of panels
Returns
| Type | Details | | :--: | :--: | | number | number of panels in dom |
$mdExpansionPanelGroup#onChange
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 |
$mdExpansionPanelGroup#getAll
Returns all panel instances from group
$mdExpansionPanelGroup#getOpen
Returns all open panel instances from group
$mdExpansionPanelGroup#collapseAll
Collapse all panels in group
Parameters
| Param | Type | Details | | :--: | :--: | :--: | | noAnimation | boolean=false | set to true if you want no animations |