10

I would like to use materializecss without jQuery. For example, I want to do the following without the use of jQuery:

$('.chips-initial').material_chip({
    data: [{
      tag: 'Apple',
    }, {
      tag: 'Microsoft',
    }, {
      tag: 'Google',
    }],
  });

Thanks

technophobia
  • 2,644
  • 1
  • 20
  • 29
rjaraba
  • 103
  • 2
  • 10
  • 1
    http://materializecss.com/getting-started.html One last thing to note is that you have to import jQuery before importing materialize.js! – Gardelin Feb 20 '17 at 20:03
  • @tuna Which is a shame, since jQuery use seems to be slowing down nowadays. Every framework out there that relies on it has opened issues asking this very thing. – mkvlrn Apr 21 '17 at 19:55

3 Answers3

9

Starting with Materialize 1.0.0, jQuery is not a dependency anymore.

See https://medium.com/@materializecss/materialize-to-1-0-and-beyond-e0233b8ac15

Previous releases still rely on jQuery. Alternatively you can use Cash by Ken Wheeler.

  • 2
    jQuery seems to be going out of fashion a bit these days – Drenai Aug 08 '17 at 18:54
  • 2
    We plan to move to ES6 components and stop using jQuery. –  Aug 08 '17 at 18:57
  • I thought Web Component support was still pretty thin. Maybe it's ok though with the polyfill – Drenai Aug 08 '17 at 20:31
  • I do not mean webcomponents, just pure ES6 babelized for browsers. –  Aug 08 '17 at 20:32
  • Jquery was good when ReactJS and other Angular Vue etc doesn't exist. But now it looks like a legacy of the past that the utility's become more marginal each day, relatively to the need to download the library inside the code -hence the important size-wasting regarding to the part of the library really indispensable. – HoCo_ Oct 17 '18 at 17:59
  • 1
    Materialize 1 does not use jQuery –  Oct 17 '18 at 19:48
8

Since version 1.0.0 you can.

const elem = document.querySelector('.chips');
const instance = M.Chips.init(elem, options);

List of possible options for the chips.

For Angular2+ you'll need:

npm install materialize-css

In package.json

"dependencies": {
    "materialize-css": "^1.0.0-alpha.4",
}

or later version.

In .angular-cli.json

  "styles": [
    "../node_modules/materialize-css/dist/css/materialize.css"
  ],
  "scripts": [
    "../node_modules/materialize-css/dist/js/materialize.js"
  ],

And to be able to use M object in your components, simply add to the imports

declare const M: any;
Vadim Aidlin
  • 326
  • 4
  • 6
0

Yes, it is possible. Add this to the head section of each HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

Then you can add classes to tags to add styles. There are lots of useful tutorials that can be found on google search. My favorite one is right here:

https://www.youtube.com/watch?v=gCZ3y6mQpW0&list=PL4cUxeGkcC9gGrbtvASEZSlFEYBnPkmff&ab_channel=TheNetNinja

wbhill13
  • 75
  • 1
  • 8
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Tyler2P Jan 07 '21 at 18:19
  • Thank you. I will fix that. – wbhill13 Jan 08 '21 at 19:03