Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

angular-material

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-material

[Material Design](https://www.google.com/design/spec/material-design/) is a specification for a unified system of visual, motion, and interaction design that adapts across different devices. Our goal is to deliver a lean, lightweight set of AngularJS-nati

0.8.0
Source
npm

Version published: 10 years ago

Weekly downloads: 44K; decreased by-5.49%

Maintainers: 1

Weekly downloads

Created: 10 years ago

Source

Material Design for AngularJS Apps

Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices. Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design specification for use in Angular single-page applications (SPAs).

venn diagram

This project is in early pre-release. Angular Material is both a reference implementation of Material Design and a complementary effort to the Polymer project's Paper Elements collection.

Quick Links:

Please note that using Angular Material requires the use of Angular 1.3.x or higher. Angular Material is targeted for all browsers with versions n-1; where n is the current browser version.

Online Documentation (and Demos)

angularmaterial

Visit Material.AngularJS.org online to review the API, see the components in action with live Demos, and study the Layout system.
Or you can build the documentation and demos locally; see Build Docs & Demos for details.

Contributing

Developers interested in contributing should read the following guidelines:

Please do not ask general questions in an issue. Issues are only to report bugs, request enhancements, or request new features. For general questions and discussions, use the Angular Material Forum.

It is important to note that for each release, the ChangeLog is a resource that will itemize all:

Bug Fixes
New Features
Breaking Changes

Building

Developers can easily build Angular Material using NPM and gulp.

Builds - Under the Hood

First install or update your local project's npm tools:

# First install all the NPM tools:
npm install

# Or update
npm update

Then run the gulp tasks:

# To build `angular-material.js/.css` and `Theme` files in the `/dist` directory
gulp build

# To build the Angular Material Docs and Demos in `/dist/docs` directory
gulp docs

For more details on how the build process works and additional commands (available for testing and debugging) developers should read the Build Instructions.

Installing Build (Distribution Files)

Bower

For developers not interested in building the Angular Material library... use bower to install and use the Angular Material distribution files.

Change to your project's root directory.

# To get the latest stable version, use Bower from the command line.
bower install angular-material

# To get the most recent, latest committed-to-master version use:
bower install angular-material#master

Visit Bower-Material for more details on how to install and use the Angular Material distribution files within your own local project.

CDN

CDN versions of Angular Material are now available at Google Hosted Libraries.

With the Google CDN, you will not need to download local copies of the distribution files. Instead simply reference the CDN urls to easily use those remote library files. This is especially useful when using online tools such as CodePen, Plunkr, or JSFiddle.

  <head>

    <!-- Angulars Material CSS now available via Google CDN; version 0.7 used here -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.css">

  </head>
  <body>
  
    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
    
    
    <!-- Angular Material Javascript now available via Google CDN; version 0.7 used here -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.7.0/angular-material.min.js"></script>
  </body>

Note that the above sample references the 0.7.0 CDN release. Your version will change based on the latest stable release version.

Developers seeking the latest, most-current build versions can use RawGit.com to pull directly from the distribution GitHub Bower-Material repository:

  <head>

    <!-- Angulars Material CSS using RawGit to load directly from `bower-material/master` -->
    <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">

  </head>
  <body>

    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.js"></script>

    <!-- Angular Material Javascript using RawGit to load directly from `bower-material/master` -->
    <script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>

  </body>

Please note that the above RawGit access is intended ONLY for development purposes or sharing low-traffic, temporary examples or demos with small numbers of people.

0.8.0 (2015-02-23)

Features

select:
- add ng-change support (f4ce10ee)
- add select component and functionality (786cb3b1, closes #1562)
autocomplete: added initial files for autocomplete (0bd8cf1c, closes #1418)
dialog: add ability to specify theme on alert and confirm presets (c97f48b7)
gridlist: Initial gridList implementation (ef4aff00)
icon: implemented md-icon for font-faces and svgs (b7d09d7e, closes #1438)
input: adds no-float class to disable floating label animations (33f677e5, closes #201, #1392)
tabs: changes default state of tabs to be transparent. (732cbc9c, closes #1250, #1393)
toast:
- add ability to specify theme for simple preset (2fef2207)
- proper toast queing behavior (74fe8706)
- update toast content dynamicly using $mdToast.updateContent (0e161cb7)
tooltip: adds md-direction so that users can specify tooltip direction (9c69c5cd, closes #1220, #1410)

Bug Fixes

autocomplete:
- hitting Enter will now trigger the submit method on parent form tags (da084fc5, closes #1530)
- fixes issue with click events not firing (e088f6ac, closes #1513)
dialog: correct opening position for showing a dialog (150efe62)
docs: toolbar button overlap on mobile (7391cad4)
gridlist:
- Tile removal now supports ngAnimate (1d8e7832, closes #1559, #1560)
- add ngInject annotation support for GridLayoutFactory - $mdGridLayout (c045f542)
- Throws error on invalid or missing colCount to avoid infinite loops (39f4f26a)
- Adds grid height calculation (0196014d)
- Prevents media from being unwatched immediately (a4104215)
icon:
- improve error recovery and item caching (603e5d68, closes #1477)
- add support for themes with md-primary, etc. (cdea9a2d)
input:
- fix hidden textarea height issue (efbd414a, closes #1356)
- improve use of placeholder and floating label (f704dda6, closes #1409)
- hide input text character overflow (e290b536, closes #1461)
- improve error checking UX for required inputs (c1d59aba, closes #1491, #1485)
layout: fix responsive breakpoint dead-zones (ecf6edef)
mdButton: add default color, update docs (a80804b5, closes #1486)
select: fixes scrollbar and padding issues (5d7b63b0)
tooltip: content text was semi-opaque (42cff135, closes #1480, #1492)
autocomplete: selected item now properly updates (1307b945, closes #1468)
button: remove underline on href button hover (c19cd433)
card: fixes selector to be more specific (2f840b2a)
gesture: fix gesture event dispatching with jQuery (88813b78, closes #1367)
input: check invalid model immediately and setInvalid() if needed (e0f53ddd, closes #372)
mdIcon:
- support aria-label on mdRadioButton (bbbec18e)
- label docs, support from parent el (f764c049, closes #1458, #1460)
mdInput: css cascades from disabled fieldset (66fa1e3e, closes #895)
mdMedia: fix media listeners not firing on non-chrome browsers (0dfcaf55)
mdTabs: use md-icon for pagination arrows (517623e7, closes #1464, #1466)
sidenav: properly sets width of sidenav (0318ca44, closes #957)
slider:
- updates positioning method to prevent overflow issues (fb3623a1, closes #1343, #1431, #1391)
- BREAKING: change default color to accent (3ea349fc)
subheader: fix subheaders within dialogs (55084143)
theming: fix typo in warning message (8a6eb7e8)
toast: fix minified toast controller injections (5c5106e4)
tooltip: now works inside elements without pointer events (3d010cd8)

FAQs

What is angular-material?

Is angular-material popular?

Is angular-material well maintained?

Package last updated on 23 Feb 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install