Skip to content

Latest commit

 

History

History
753 lines (490 loc) · 18 KB

File metadata and controls

753 lines (490 loc) · 18 KB

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

Angular Material docs website

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']);

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

    1. pass in a string id and get back the instance
    1. 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

$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

    1. pass in a string id and get back the instance
    1. 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

$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