4

Estoy trabajando con Material Desing para Web desde las CDNs propias de Google.

En su página recomiendan usar 1 hoja de estilos, 1 archivo de scripts y opcional la hoja de estilos de los íconos:

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

Hasta ahí todo bien, pero luego cuando trato de implementar un simple input de texto, no funciona como debería.

Esto es lo que tengo

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

Pueden notar que el error es que la contraseña se superpone al label cuando el label debería ajustarse en la parte superior, tal cual como sucede en la página de material.io donde pueden ver el mismo código funcionando sin problema.

Mi duda es:

¿Me falta alguna librería adicional para que funcionen estas animaciones?

Muchas gracias.

2 respuestas 2

4

Encontre la forma que funcionara

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

Hacia falta la siguiente linea

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

Te aconsejo que no utilices la versión del CDN, es más una versión para testing que una de producción; no la puedes personalizar tanto, no funcionan muy bien los @mixins, es más complejo implementar las clases JS, etc.

Usa mejor la versión instalable mediante npm, no importa si no estás usando ningún framework, se puede hasta usando solo Webpack 4.

Lo que te pasó fue que pensaste que el efecto del label en el textfield solo se produce mediante CSS, pero quien se encarga de administrarla es el controlador JS, por eso funcionó al hacerle el attachTo, porque MDC te pide transformar ese elemento HTML/CSS a una entidad MDC que dentro tiene multiples propiedades, eventos, etc.

Casi toda la librería MDC no funciona a su 100% si no se le añaden los controladores, como las Chips, los Snackbar, Ripple, etc.

2
  • Sí, es correcto. Uso bastante MDC pero no sabía lo que me comentas. Ya sé para consultarte más adelante, a lo mejor por el chat :)
    – LauraZ
    Commented el 5 ago. 2019 a las 15:05
  • Genial, yo encantado de ayudarte, saludos:) Commented el 5 ago. 2019 a las 20:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.