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
• 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

# update after install
bower update

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

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.

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

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

Documentation Coming Soon :)

If you can't wait then just give it a try.

md-expansion-panel-expanded can have a height attribute added to it that will cause it to scroll if the content is longer that what you specified

By default both md-expansion-panel-header and md-expansion-panel-footer are sticky. If you want to disable that, then just add the md-no-sticky attribute on either element