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.

This module is In Progress currently and should not be used in production. You can expect a tested and documented version in the near future.

Quick Links:

• Installation
• Building
• Run Tests
• Usage
• Documentation

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-expansion-panel-collapsed>
    <div class="md-title">Title</div>
    <div class="md-summary">Summary</div>
  </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-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>

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

• mdExpansionPanel
• mdExpansionPanelCollapsed
• mdExpansionPanelExpanded
• mdExpansionPanelHeader
• mdExpansionPanelFooter
• $mdExpansionPanel

Directives

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>

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

Services

$mdExpansionPanel

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

$mdExpansionPanel('theComponentId').then(function (instance) {
  instance.expand();
  instance.contract();
});