search

Webpack

hashtag
Getting the plugin

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

  $ npm install --save aurelia-materialize-bridge materialize-css

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:

    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());

  aurelia.start();
  // delay setting the root until document is fully loaded
  // this will allow materialize framework fully load before bridge elements start attaching themselves
  new Promise(resolve => $(document).ready(() => resolve())).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>

  4. Configure webpack:

    Change your ProvidePlugin configuration :

     new ProvidePlugin({
   '$': 'jquery',
   'jQuery': 'jquery',
   'window.jQuery': 'jquery',
 })

    This prevents jQuery from being added/initialized multiple times.

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