Home / Questions / 263576
Accepted
LauraZ
Asked: 2020-05-15 13:23:55 +0800 CST 2020-05-15 13:23:55 +0800 CST

Libraries for Material Components Web

  • 772

I am working with Material Design for Web from Google's own CDNs.

On their page they recommend using 1 style sheet, 1 script file and optional the icon style sheet:

<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>    

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

So far so good, but then when I try to implement a simple text input, it doesn't work as it should.

This is what I have

<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<body>

  <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
    <i class="material-icons mdc-text-field__icon">visibility_off</i>
    <input type="password" class="mdc-text-field__input">
    <div class="mdc-notched-outline">
      <div class="mdc-notched-outline__leading"></div>
      <div class="mdc-notched-outline__notch">
        <label class="mdc-floating-label">Ingresa tu contraseña</label>
      </div>
      <div class="mdc-notched-outline__trailing"></div>
    </div>
  </div>

  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</body>

You may notice that the error is that the password overlaps the label when the label should wrap to the top, just like on the material.io page where you can see the same code working without issue .

My Doubt is:

Am I missing any additional library to make these animations work?

Thank you very much.

javascript

2 Answers

  1. Best Answer

    I found a way that would work

    <head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>

<body>

  <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
    <i class="material-icons mdc-text-field__icon">visibility_off</i>
    <input type="password" class="mdc-text-field__input">
    <div class="mdc-notched-outline">
      <div class="mdc-notched-outline__leading"></div>
      <div class="mdc-notched-outline__notch">
        <label class="mdc-floating-label">Ingresa tu contraseña</label>
      </div>
      <div class="mdc-notched-outline__trailing"></div>
    </div>
  </div>

  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js">
  </script>
   <script>mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));</script>
</body>

    The following line was missing

    mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
    • 4

  2. I advise you not to use the CDN version, it is more of a test version than a production one; You can't customize it that much, @mixins don't work very well, it's more complex to implement JS classes, etc.

    Better use the version installable via npm, it doesn't matter if you are not using any framework, you can even use only Webpack 4.

    What happened to you was that you thought that the effect of the label in the textfield is only produced by CSS, but who is in charge of managing it is the JS controller, that's why it worked when attachTo, because MDC asks you to transform that HTML/CSS element to an MDC entity that inside has multiple properties, events, etc.

    Almost all the MDC library does not work 100% if drivers are not added, such as Chips, Snackbar, Ripple, etc.

    • 2