Material Design (via Materialize) for Ember.js Apps
Switch branches/tags
action-sheet ember-upgrade3 gh-pages greenkeeper-broccoli-asset-rev-2.4.6 greenkeeper-broccoli-asset-rev-2.5.0 greenkeeper-ember-ajax-2.5.2 greenkeeper-ember-ajax-2.5.3 greenkeeper-ember-ajax-2.5.4 greenkeeper-ember-ajax-2.5.5 greenkeeper-ember-ajax-2.5.6 greenkeeper-ember-ajax-3.0.0 greenkeeper-ember-anchor-0.1.1 greenkeeper-ember-anchor-0.1.2 greenkeeper-ember-anchor-0.1.8 greenkeeper-ember-array-helper-1.0.0 greenkeeper-ember-array-helper-1.0.1 greenkeeper-ember-array-helper-1.0.2 greenkeeper-ember-array-helper-2.0.0 greenkeeper-ember-array-helper-2.1.0 greenkeeper-ember-ci-0.1.3 greenkeeper-ember-cli-2.8.0 greenkeeper-ember-cli-2.9.0 greenkeeper-ember-cli-2.9.1 greenkeeper-ember-cli-2.10.0 greenkeeper-ember-cli-2.10.1 greenkeeper-ember-cli-2.11.0 greenkeeper-ember-cli-2.11.1 greenkeeper-ember-cli-2.12.0 greenkeeper-ember-cli-2.12.1 greenkeeper-ember-cli-2.12.2 greenkeeper-ember-cli-2.12.3 greenkeeper-ember-cli-2.13.0 greenkeeper-ember-cli-2.13.1 greenkeeper-ember-cli-2.13.2 greenkeeper-ember-cli-app-version-1.0.1 greenkeeper-ember-cli-app-version-2.0.1 greenkeeper-ember-cli-app-version-2.0.2 greenkeeper-ember-cli-app-version-3.0.0 greenkeeper-ember-cli-babel-5.1.8 greenkeeper-ember-cli-babel-5.1.9 greenkeeper-ember-cli-babel-5.1.10 greenkeeper-ember-cli-babel-5.2.0 greenkeeper-ember-cli-babel-5.2.1 greenkeeper-ember-cli-babel-5.2.2 greenkeeper-ember-cli-babel-5.2.3 greenkeeper-ember-cli-babel-5.2.4 greenkeeper-ember-cli-babel-6.0.0 greenkeeper-ember-cli-babel-6.1.0 greenkeeper-ember-cli-content-security-policy-0.6.0 greenkeeper-ember-cli-content-security-policy-0.6.1 greenkeeper-ember-cli-dependency-checker-1.4.0 greenkeeper-ember-cli-dependency-checker-2.0.0 greenkeeper-ember-cli-github-pages-0.1.1 greenkeeper-ember-cli-github-pages-0.1.2 greenkeeper-ember-cli-htmlbars-1.0.10 greenkeeper-ember-cli-htmlbars-1.0.11 greenkeeper-ember-cli-htmlbars-1.1.0 greenkeeper-ember-cli-htmlbars-1.1.1 greenkeeper-ember-cli-htmlbars-1.2.0 greenkeeper-ember-cli-htmlbars-1.3.0 greenkeeper-ember-cli-htmlbars-1.3.1 greenkeeper-ember-cli-htmlbars-1.3.2 greenkeeper-ember-cli-htmlbars-2.0.0 greenkeeper-ember-cli-htmlbars-2.0.1 greenkeeper-ember-cli-htmlbars-inline-precompile-0.3.3 greenkeeper-ember-cli-htmlbars-inline-precompile-0.3.4 greenkeeper-ember-cli-htmlbars-inline-precompile-0.3.5 greenkeeper-ember-cli-htmlbars-inline-precompile-0.3.6 greenkeeper-ember-cli-htmlbars-inline-precompile-0.4.0 greenkeeper-ember-cli-htmlbars-inline-precompile-0.4.1 greenkeeper-ember-cli-htmlbars-inline-precompile-0.4.2 greenkeeper-ember-cli-htmlbars-inline-precompile-0.4.3 greenkeeper-ember-cli-inject-live-reload-1.5.0 greenkeeper-ember-cli-inject-live-reload-1.6.0 greenkeeper-ember-cli-inject-live-reload-1.6.1 greenkeeper-ember-cli-jshint-1.0.5 greenkeeper-ember-cli-jshint-2.0.0 greenkeeper-ember-cli-jshint-2.0.1 greenkeeper-ember-cli-qunit-2.1.0 greenkeeper-ember-cli-qunit-2.2.0 greenkeeper-ember-cli-qunit-2.2.1 greenkeeper-ember-cli-qunit-2.2.2 greenkeeper-ember-cli-qunit-3.0.0 greenkeeper-ember-cli-qunit-3.0.1 greenkeeper-ember-cli-qunit-3.0.2 greenkeeper-ember-cli-qunit-3.0.3 greenkeeper-ember-cli-qunit-3.0.4 greenkeeper-ember-cli-qunit-3.1.0 greenkeeper-ember-cli-qunit-3.1.1 greenkeeper-ember-cli-qunit-3.1.2 greenkeeper-ember-cli-qunit-4.0.0 greenkeeper-ember-cli-sass-5.5.2 greenkeeper-ember-cli-sass-5.6.0 greenkeeper-ember-cli-sass-6.0.0 greenkeeper-ember-cli-sass-6.1.0 greenkeeper-ember-cli-sass-6.1.1 greenkeeper-ember-cli-sass-6.1.2 greenkeeper-ember-cli-sass-6.1.3 greenkeeper-ember-cli-sri-2.1.1 greenkeeper-ember-cli-test-loader-1.1.1 greenkeeper-ember-cli-test-loader-2.0.0 greenkeeper-ember-cli-test-loader-2.1.0 greenkeeper-ember-cli-version-checker-1.1.7 greenkeeper-ember-cli-version-checker-1.2.0 greenkeeper-ember-cli-version-checker-1.3.0 greenkeeper-ember-cli-version-checker-1.3.1 greenkeeper-ember-cli-version-checker-2.0.0 greenkeeper-ember-code-snippet-1.4.0 greenkeeper-ember-code-snippet-1.5.0 greenkeeper-ember-code-snippet-1.6.0 greenkeeper-ember-code-snippet-1.7.0 greenkeeper-ember-code-snippet-1.8.0 greenkeeper-ember-code-snippet-1.8.1 greenkeeper-ember-export-application-global-1.1.0 greenkeeper-ember-export-application-global-1.1.1 greenkeeper-ember-export-application-global-2.0.0 greenkeeper-ember-key-responder-0.4.2 greenkeeper-ember-keyboard-2.0.0 greenkeeper-ember-keyboard-2.0.1 greenkeeper-ember-keyboard-2.1.0 greenkeeper-ember-keyboard-2.1.1 greenkeeper-ember-keyboard-2.1.2 greenkeeper-ember-keyboard-2.1.3 greenkeeper-ember-keyboard-2.1.4 greenkeeper-ember-keyboard-2.1.5 greenkeeper-ember-keyboard-2.1.6 greenkeeper-ember-keyboard-2.1.7 greenkeeper-ember-keyboard-2.1.8 greenkeeper-ember-keyboard-2.1.9 greenkeeper-ember-keyboard-2.1.10 greenkeeper-ember-load-initializers-0.6.0 greenkeeper-ember-load-initializers-0.6.1 greenkeeper-ember-load-initializers-0.6.2 greenkeeper-ember-load-initializers-0.6.3 greenkeeper-ember-load-initializers-1.0.0 greenkeeper-ember-material-design-icons-shim-0.1.10 greenkeeper-ember-materialize-shim-0.2.3 greenkeeper-ember-materialize-shim-0.4.0 greenkeeper-ember-materialize-shim-0.4.1 greenkeeper-ember-modal-dialog-0.9.0 greenkeeper-ember-modal-dialog-0.9.1 greenkeeper-ember-modal-dialog-1.0.0 greenkeeper-ember-modal-dialog-2.0.0 greenkeeper-ember-modal-dialog-2.1.0 greenkeeper-ember-modal-dialog-2.2.0 greenkeeper-ember-new-computed-1.0.3 greenkeeper-ember-percy-1.1.7 greenkeeper-ember-percy-1.1.8 greenkeeper-ember-percy-1.1.9 greenkeeper-ember-percy-1.1.10 greenkeeper-ember-percy-1.2.0 greenkeeper-ember-percy-1.2.1 greenkeeper-ember-percy-1.2.3 greenkeeper-ember-percy-1.2.4 greenkeeper-ember-percy-1.2.5 greenkeeper-ember-percy-1.2.6 greenkeeper-ember-percy-1.2.7 greenkeeper-ember-percy-1.2.8 greenkeeper-ember-percy-1.2.9 greenkeeper-ember-percy-1.2.10 greenkeeper-ember-percy-1.2.11 greenkeeper-ember-radio-button-1.1.1 greenkeeper-ember-resolver-2.1.0 greenkeeper-ember-resolver-2.1.1 greenkeeper-ember-resolver-3.0.0 greenkeeper-ember-resolver-4.0.0 greenkeeper-ember-resolver-4.1.0 greenkeeper-ember-suave-4.0.1 greenkeeper-ember-truth-helpers-1.3.0 greenkeeper-ember-try-0.2.3 greenkeeper-loader.js-4.0.11 greenkeeper-loader.js-4.1.0 greenkeeper-loader.js-4.2.0 greenkeeper-loader.js-4.2.1 greenkeeper-loader.js-4.2.2 greenkeeper-loader.js-4.3.0 greenkeeper-loader.js-4.4.0 greenkeeper-rsvp-3.3.0 greenkeeper-rsvp-3.3.1 greenkeeper-rsvp-3.3.2 greenkeeper-rsvp-3.3.3 greenkeeper-rsvp-3.5.0 greenkeeper-update-all greenkeeper/ember-ajax-3.1.0 greenkeeper/ember-array-helper-4.0.0 greenkeeper/ember-cli-2.18.2 greenkeeper/ember-cli-3.0.0 greenkeeper/ember-cli-3.0.1 greenkeeper/ember-cli-3.0.2 greenkeeper/ember-cli-3.0.3 greenkeeper/ember-cli-3.1.0 greenkeeper/ember-cli-3.1.1 greenkeeper/ember-cli-3.1.2 greenkeeper/ember-cli-3.1.3 greenkeeper/ember-cli-3.1.4 greenkeeper/ember-cli-3.2.0 greenkeeper/ember-cli-3.3.0 greenkeeper/ember-cli-dependency-checker-3.0.0 greenkeeper/ember-cli-htmlbars-3.0.0 greenkeeper/ember-cli-sass-7.1.4 greenkeeper/ember-cli-sass-7.1.5 greenkeeper/ember-cli-sass-7.1.6 greenkeeper/ember-cli-sass-7.2.0 greenkeeper/ember-code-snippet-2.0.1 greenkeeper/ember-code-snippet-2.1.0 greenkeeper/ember-code-snippet-2.2.0 greenkeeper/ember-code-snippet-2.2.1 greenkeeper/ember-materialize-shim-0.5.1 greenkeeper/ember-percy-1.3.0 greenkeeper/ember-percy-1.3.1 greenkeeper/ember-percy-1.3.2 greenkeeper/ember-percy-1.3.3 greenkeeper/ember-percy-1.4.0 greenkeeper/ember-percy-1.4.1 greenkeeper/ember-percy-1.4.3 greenkeeper/ember-percy-1.4.4 greenkeeper/ember-radio-button-1.2.2 greenkeeper/ember-radio-button-1.2.3 greenkeeper/ember-radio-button-1.2.4 greenkeeper/ember-resolver-5.0.0 greenkeeper/ember-resolver-5.0.1 greenkeeper/ember-source-3.1.0 greenkeeper/ember-source-3.1.1 greenkeeper/ember-source-3.1.2 greenkeeper/ember-source-3.2.0 greenkeeper/ember-source-3.2.1 greenkeeper/ember-source-3.2.2 greenkeeper/ember-source-3.3.0 greenkeeper/ember-source-3.3.1 greenkeeper/eslint-plugin-node-6.0.0 greenkeeper/eslint-plugin-node-6.0.1 greenkeeper/eslint-plugin-node-7.0.0 greenkeeper/eslint-plugin-node-7.0.1 greenkeeper/loader.js-4.7.0 greenkeeper/remove-node-0.10 input_validation master materialize-v1.0 renovate/ambient-types renovate/husky-1.x renovate/major-stable-ember-infra renovate/stable-ember-infra test-beta travis-deploy-stage v1
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Fix broken tests Jan 4, 2018
addon feat: upgrade to ember 3 Nov 10, 2018
app Prettier Jan 4, 2018
blueprints chore: revert eslint changes Nov 10, 2018
config chore: revert eslint changes Nov 10, 2018
lib gh-pages demo in ember-1.12 Aug 17, 2015
tests chore: require jquery Nov 10, 2018
vendor Blanket coverage Aug 15, 2015
.bowerrc Initial Commit from Ember CLI v0.1.4 Dec 20, 2014
.editorconfig Ember 2.18 Jan 4, 2018
.ember-cli Initial Commit from Ember CLI v0.1.4 Dec 20, 2014
.eslintignore chore: update ember-try testing scenarios Nov 10, 2018
.eslintrc.js chore: revert eslint changes Nov 10, 2018
.gitignore chore: revert eslint changes Nov 10, 2018
.jscsrc Update dependencies (#322) Apr 22, 2016
.jshintrc Initial Commit from Ember CLI v0.1.4 Dec 20, 2014
.npmignore chore: revert eslint changes Nov 10, 2018
.prettierrc Fix broken tests Jan 4, 2018
.template-lintrc.js chore: revert eslint changes Nov 10, 2018
.travis.yml chore: replace travis-deploy-once with travis-ci stage Dec 5, 2018
.watchmanconfig update ember-cli Feb 1, 2016
CHANGELOG.md chore(release): 0.22.0 [skip ci] Nov 10, 2018
CONTRIBUTING.md Initial Commit Dec 22, 2014
LICENSE.md Revert to default node-sass Jul 31, 2016
README.md docs(readme): add Greenkeeper badge Jan 3, 2018
app.json Add Heroku generated app.json Jul 27, 2016
bower.json Ember 2.18 Jan 4, 2018
ember-cli-build.js Prettier Jan 4, 2018
index.js Ember 2.18 Jan 4, 2018
jsconfig.json Fix broken tests Jan 4, 2018
package.json chore(deps): ember-ajax Dec 10, 2018
renovate.json feat: upgrade to ember 3 Nov 10, 2018
testem.js chore: revert eslint changes Nov 10, 2018
yarn.lock chore(deps): ember-ajax Dec 10, 2018

README.md

ember-cli-materialize

Greenkeeper badge

Build Status npm version Code Climate Coverage Status Ember Observer Score Book session on Codementor

An ember-cli addon for using Materialize (CSS Framework based on Material Design) in Ember applications.

Ember 2.0 Friendly

Materialize Version ~0.97.0

NPM

Which version do I use?

Ember.js version ember-cli-materialize version
< 1.10.0 Not supported
1.10.0 <= x < 1.11.0 v0.16.4
1.11.0 <= x < 1.13.0 v0.18.6
x >= 1.13.0 npm version

Main features

  • Imports Materialize sass (via ember-cli-sass) and fonts into your app.
  • It's a components library for all Materialize components

Usage

The online demo demonstrates all components with all possible options.

Or you can download the demo:

$ sudo npm install -g ember-cli
$ git clone git@github.com:mike-north/ember-cli-materialize
$ cd ember-cli-materialize
# install dependencies
$ npm install && bower install
# fire up local server
$ ember serve

Configuration

Style

Using SASS makes configuring the color scheme simple. Just make sure you import components/color and components/variables before materialize like the example below.

// Example app.scss
@import 'components/color';

// Custom color settings go here
$primary-color: color("pink", "lighten-2");

@import 'components/variables';
@import 'materialize';
@import 'ember-cli-materialize';

See the materialize docs on sass variables here.

Defaults

Some of the library's defaults can be set via your config/environment.js file

module.exports = function(/* environment, appConfig */) {
  var ENV = {
    materializeDefaults: {
      modalIsFooterFixed:  false,
      buttonIconPosition:  'left',
      loaderSize:          'big',
      loaderMode:          'indeterminate',
      modalContainerId:    'materialize-modal-root-element',
      dropdownInDuration:  300,
      dropdownOutDuration: 300
    },
    ...
  };
}

Installation

$ ember install ember-cli-materialize

PhantomJS

If you are using PhantomJS version 1.9.x as a test runner then after installing this addon you may experience test failures when running tests via ember test that you do not see in a browser.

This is due to the known limitation in PhantomJS 1.9 not providing a .bind method. To continue using PhantomJS simply either install ember-cli-es5-shim, which provides a .bind method, or try PhantomJS 2.x.

Testing

This addon is continuiously integrated against the following framework versions

Version Failures Allowed
Ember ~1.10.0 No
Ember ~1.11.0 No
Ember ~1.12.0 No
components/ember#release No
components/ember#beta No
components/ember#canary No

Contributing

See CONTRIBUTING file.

Special Thanks

Special thanks to Stefan Gasser for creating and originally maintaining this great library

License

ember-cli-materialize is released under the MIT License. See the bundled LICENSE file for details.

Analytics