search

JSPM

hashtag
Getting the plugin

Important: Make sure you run jspm version 0.16.15.

In your project install the plugin via jspm with the following command:

  $ jspm install aurelia-materialize-bridge

Make sure you also install Materializearrow-up-right. There are several options available. Not concerning forks, these are available:

npm

$ jspm install materialize-css

github

$ jspm install materialize=github:Dogfalo/materialize

hashtag
Materialize >= 0.98.0

Add this override to package.json (as a child of the jspm property) if you're using the npm version:

"overrides": {
  "npm:materialize-css@0.98.0": {
    "main": "dist/js/materialize",
    "format": "global",
    "shim": {
      "dist/js/materialize": {
        "deps": [
          "jquery",
          "../css/materialize.css!"
        ]
      }
    }
  }
}

Add this override to package.json(as a child of the jspm property) if you're using the GitHub version:

hashtag
Configure your app

  1. Make sure you use manual bootstrappingarrow-up-right. In order to do so open your index.html and locate the element with the attribute aurelia-app:

    For Material Design icons include this in your index.html head section:

  2. Update main.js in your src folder with following content:

    Please make sure that you use only one of the imports shown above.

    Note: You could just import 'materialize' into your app but since Materialize is not a direct dependency of this bridge anymore, it may get loaded asynchronously. This may lead to Materialize being initialized after components are attached() which essentally applies Materialize twice.

    Note: The above shows how to use all available controls at once. If you choose to pick which you'd like to use, you can use single components like this:

    At the end of this page is a full list of currently available options.

hashtag
You are done!

It is now possible to drop some custom-elements into your DOM. See the other pages on this website for detailed information on how to do this.

Now you might want to do our app developers tutorialarrow-up-right, based on Aurelia Skeleton navigation. Before doing this, make sure you set up your environment appropriatelyarrow-up-right.

As described above, here is a full list of currently available options:

PreviousWebpackNextAurelia-CLI

Last updated