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.

Answer 1

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>