CODEWITHSUNDEEP
user-interfacemeteormaterialize
user2856066
user2856066

Reputation: 831

Meteor with framework materialize

I planned to use materialize:materialize package to a meteor app. As I can understand materialize use a lot of javascript for effects, collapsing and so on. Meteor has its own event handling but I suppose materialize will use jquery (I suppose I don't need to add jquery, it's included, or?) and will be running outside meteor events.

Is it enough to just add the package and everything will work, not just the look but also the javascript (feel)? I am trying to get it to work with a materialize template I bought and its not optimezed for meteor so I have problems to make it work.

Has anyone try this setup and is there any suggestions for good sources.

Upvotes: 2

Views: 2673

Answers (1)

saimeunt
saimeunt

Reputation: 22696

Using materializecss with Meteor works great, but you will have to initialize jQuery plugins yourself (just like in a regular HTML5 app without Meteor, as Materialize docs hints at).

Meteor templating system includes automatically jQuery, and you will have to use template.onRendered to correctly initialize the plugins, as opposed to initializing them in a $(document).ready callback.

For example, here is a simple Materialize dropdown markup inside a Meteor template :

<template name="myDropdown">
  <a class="dropdown-button" data-activates="my-dropdown">
    My Dropdown <i class="mdi-navigation-arrow-drop-down right"></i>
  </a>
  <ul id="my-dropdown" class="dropdown-content">
    <li class="js-first-item"><a>First item</a></li>
    <li class="js-second-item"><a>Second item</a></li>
    <li class="divider"></li>
    <li class="js-third-item"><a>Third item</a></li>
  </ul>
</template>

And here is the according plugin initialization :

Template.myDropdown.onRendered(function(){
  this.$(".dropdown-button").dropdown({
    hover:false
  });
});

You should use standard Meteor events to handle user interaction :

Template.myDropdown.events({
  "click .js-first-item": function(event, template){
    console.log("clicked on the first item !");
  },
  [..]
});

Overall, your Materialize theme integration into your Meteor app is not something as trivial as droping the theme inside your source files and meteor adding materialize:materialize, but it should not be something overly difficult.

Sometimes you'll hit Meteor related issues when trying to initialize Materialize plugins but the corresponding markup is not yet rendered into the DOM, see this question for a possible solution : Meteor + Materialize: collapsable in for each doesn't work

Upvotes: 8

Related Questions