CODEWITHSUNDEEP
javascriptmaterial-designcdn
Vraja
Vraja

Reputation: 131

How to activate Material Design JS?

import {MDCTextField} from '@material/textfield';

const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
@import "@material/textfield/mdc-text-field";
<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<div class="mdc-text-field">
  <input type="text" id="my-text-field" class="mdc-text-field__input">
  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
  <div class="mdc-line-ripple"></div>
</div>

I'm learning to work with Material Design. I thought it worked like bootstrap, meaning there is a CDN and then you just add the classes you need, so I got the CDN from this link: https://material.io/develop/web/docs/getting-started/

After I added the CDN I got the css working, but not JavaScript. In the instructions it says:

…and instantiate JavaScript:

mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));

How do I instantiate Javascript?

I tried to put this code between script tags, but that didn't work. I think I'm missing some code here.

Update: The JS CDN seem to work but in each compenente I get an instruction for JavaScript Instantiation for example in this link: https://material.io/develop/web/components/input-controls/text-field/

import {MDCTextField} from '@material/textfield'; const textField = new MDCTextField(document.querySelector('.mdc-text-field'))

My question is where do i insert this code for the component to work.

Upvotes: 7

Views: 3624

Answers (5)

shen
shen

Reputation: 1051

For React users, make sure that you put the instantiate code in the Mounting phase, which means put new MDCTextField(Element) in the componentDidMount() function.

import './textfield.scss';
import React from 'react';
import { MDCTextField } from '@material/textfield';

export default class TextField extends React.Component {
  // initialize the component after all DOM elements are well rendered
  componentDidMount() {
    const textfield = new MDCTextField(document.querySelector('.mdc-text-field'));
  }

  render() {
    return (
      <label className="mdc-text-field mdc-text-field--outlined">
        <span className="mdc-notched-outline">
          <span className="mdc-notched-outline__leading"></span>
          <span className="mdc-notched-outline__notch">
            <span className="mdc-floating-label" id="my-label-id">Your Name</span>
          </span>
          <span className="mdc-notched-outline__trailing"></span>
        </span>
        <input type="text" className="mdc-text-field__input" aria-labelledby="my-label-id"/>
      </label>
    );
  }
}

Upvotes: 0

Arnooo
Arnooo

Reputation: 244

you need to add mdc.{component}.MDC{component} instead if you use cdn

const textField = new mdc.textField.MDCTextField(document.querySelector('.mdc-text-field'));
<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<label class="mdc-text-field mdc-text-field--filled">
  <span class="mdc-text-field__ripple"></span>
  <span class="mdc-floating-label" id="my-label-id">Hint text</span>
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
  <span class="mdc-line-ripple"></span>
</label>

Upvotes: 7

parag patel
parag patel

Reputation: 3283

Because the browser doesn’t understand ES6 modules just yet, we need tools to make them work today. A JavaScript bundler takes in our Modules and compiles them into a single JavaScript file or multiple bundles for different parts of your application.

There are few popular bundlers like webpack, Browserify, Rollup, JSPM etc.

In your case, you are just starting off on how to use modules, you may face difficulties implementing boilerplate for importing modules ES2015 way.

However, you may want to clone Material Design repo because it gives you boilerplate that enables to you to use import module function right away, this will be straight forward and clear to you

https://codelabs.developers.google.com/codelabs/mdc-101-web/#1

Prior to get started on this, you need to install GIT, Node, and NPM on your machine.

  • Clone their starter repo and cd into cloned directory

    git clone https://github.com/material-components/material-components-web-codelabs

    cd material-components-web-codelabs/mdc-101/starter

  • Now, install all the dependancies listed in package.json with following command

    npm install

and then run

npm start

it should start up development server. Now you can change index.html and create or change existing js files according to your requirement

Upvotes: 0

parag patel
parag patel

Reputation: 3283

Please also mention how your code looks like right now.

Based on your question, it seems like you may have missed to mention script tag with material design URL in your HTML head tag. Add following code and see if it helps.

<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

Upvotes: 0

Michael Sagnes
Michael Sagnes

Reputation: 109

I think the CDN JavaScript source might rely on jQuery in order to run. If my assumptions are correct, you will need to add a script tag referencing jquery before you load the material.io scripts.

jQuery CDN

Upvotes: -1

Related Questions