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

$ jspm install npm:materialize-css@next

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:

     <body aurelia-app="main">
 ...

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

     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

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

    export function configure(aurelia) {
 return aurelia.loader.loadModule("materialize-css").then(() => {
   aurelia.use
     .standardConfiguration()
     .developmentLogging()
     // Install and configure the plugin
     .plugin('aurelia-materialize-bridge', bridge => bridge.useAll() );

   return aurelia.start().then(a => a.setRoot());
 }
}

    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:

    .plugin('aurelia-materialize-bridge', bridge => {
 bridge
   .useButton()
   .useCollapsible()
   .useModal()
   .useTabs();
});

    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:

PreviousWebpack, Aurelia-CLI (Webpack)NextAurelia-CLI (require)

Last updated