Using materialize in aurelia

Question

I have been trying to get the materialize-css framework to work with Aurelia. I am using Typescript with the framework, and running the server on Windows 8 through the cmd with 'gulp watch'. So far I have attempted to use the aurelia-materialize bridge, following the instructions provided. However, after I have followed the steps, I get the following console output using chrome: console error

The cmd is clean of errors. These are the contents of the main.ts and index files which are the skeleton-typescript with the materialize bridge on top, without further modification: The image on the left is main.ts, the image on the right is index.html

There is the option of adding the materialize css and js imports to the index.html file, but I do not know how to then call the initializing functions on components that require them, such as sliders. Any help at all or alternatives would be appreciated.

stackoverflow.com/questions/33574208/… explains how to import it without a plugin. A plugin for this would be overkill imo. — Randy
@randy I have tried what the user in that question suggests, but this line: import {materialize} from 'materialize-css'; fails with error: TS2307: Cannot find module 'materialize-css' However, in the jspm_packages folder, materialize is installed properly (or so it seems), and in the package json I have the materialize dependency. — The lightbringer
You can use materialize the exact same way bootstrap is working. Scrutinize the skeleton, you will find that if you install materialize, it is in your config.js just like bootstrap. Replace everything bootstrap is providing with the materialize stuff. In reality that is only the import of the css and javascript library. Config will probably say 'dogfalo/materialize ', so import that package. — Randy
@randy Thank you for the help, I can so far see the materialize styles globally. However, I am still unable to initialize such elements as sliders or dropdowns, which is my main concern. — The lightbringer
Are you sure the js file is imported correctly? And maybe you need a .d.ts file? — Randy

Matthew James Davis Matthew James Davis · Accepted Answer · 2016-07-14T17:54:05

The best strategy for integrating a CSS framework with Aurelia is to create, where necessary, custom attributes. Here's an example of how to create a custom attribute for a collapsible:

collapsibleCustomAttribute.js

import 'materialize-css'; // the loads the materialize library

@inject(Element)
export class CollapsibleCustomAttribute {

    constructor(element) {
        this.element = $(element);
    }

    attached() {
        this.element.collapsible({
          accordion: false
        });
    }
}

app.html

<require from="./collapsibleCustomAttribute">
<ul class="collapsible" collapsible>
    <li>
        <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
    <li>
        <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
        <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
    </li>
</ul>

Using materialize in aurelia

1 Answers