search

Webpack, Aurelia-CLI (Webpack)

hashtag
Getting the plugin

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

npm install --save aurelia-validation aurelia-typed-observable-plugin tslib
npm install --save aurelia-materialize-bridge materialize-css@next @types/materialize-css

  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:

    import {PLATFORM} from 'aurelia-pal';  
import 'materialize-css';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    // Install and configure the plugin
    .plugin(PLATFORM.moduleName('aurelia-materialize-bridge'), b => b.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(PLATFORM.moduleName('aurelia-materialize-bridge'), bridge => {
 bridge
   .useButton()
   .useCollapsible()
   .useModal()
   .useTabs();
});

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

  3. Import css:

    <require from="materialize-css/dist/css/materialize.css"></require>

Look here for a working examplearrow-up-right. And the sourcearrow-up-right for it.

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.

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

Previous2. InstallationNextJSPM

Last updated