Метка текстового поля компонента Material Design не перемещается вверху слева

Я следую руководствам по материальному дизайну здесь. В руководстве используется подход Node JS и используется npm для установки компонентов материального дизайна. Это нормально, и у меня проект MDC 101 работает точно так же, как в учебнике. Ярлык текстового поля плавно перемещается в верхний левый угол, как только я начинаю вводить текст, как показано внизу страницы здесь.

Однако я хочу использовать компоненты Material Design в своем веб-сервисе Scala Play, поэтому я вставил ссылку CSS и сценарии JS на свою веб-страницу (код ниже), как описано здесь. HTML-код моей страницы выглядит как это:

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shrine (MDC Web Example App)</title>
    <link rel="shortcut icon" href="https://material.io/favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</head>
<body>

<form action="home.html">
    <div class="mdc-text-field mdc-text-field--box username">
        <input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
        <label class="mdc-floating-label" for="username-input">Username</label>
        <div class="mdc-line-ripple"></div>
    </div>
    <div class="mdc-text-field mdc-text-field--box password">
        <input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
        <label class="mdc-floating-label" for="password-input">Password</label>
        <div class="mdc-line-ripple"></div>
    </div>
    <div class="button-container">
        <button type="button" class="mdc-button cancel">
            Cancel
        </button>
        <button class="mdc-button mdc-button--raised next">
            Next
        </button>
    </div>
</form>

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

</body>
</html>

Если вы визуализируете это в браузере, можно увидеть, что пока отображаются текстовые поля MDC, метки не плавают, как в учебном примере, запущенном под Node.

Что мне здесь не хватает? Я подозреваю, что это как-то связано с тем, что какой-то Javascript не активируется (здесь Javascript noob)


javascript material-design html css material-components-web
person M.K.    schedule 27.06.2018    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Вам необходимо создать экземпляр компонента текстового поля MDC. Один из быстрых и грязных способов сделать это - просто добавить тег скрипта в ваш html с помощью следующего кода JavaScript.

<script>
  mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
</script>
person benvc    schedule 27.06.2018
comment
Я тоже наткнулся на это здесь, но не знал, как написать JS: github.com/material-components/material-components-web/blob/. - person M.K.; 28.06.2018

arrow_upward
1
arrow_downward

Для будущих посетителей, которые подписались на официальный руководство по началу работы для установки MDC с webpack, у меня сработало просто добавить инициализацию TextField в связанный файл JS (как упоминалось в документы):

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

const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
person Hakim    schedule 15.06.2019

arrow_upward
0
arrow_downward

Этот JQuery - ужасный кладж, которым я не горжусь, но он работает и не требует оператора импорта.

<script type="text/javascript">
 $(document).ready(function() { 
   $("#user-input").val("Player One");
   $("label[for='user-input']").addClass("mdc-floating-label--float-above");
   $("#user-input").focus();
   $("#user-input").blur();
 });
</script>

Он устанавливает значение, добавляет класс, необходимый для создания плавающей метки, а затем быстро добавляет и удаляет фокус с текстового поля, что запускает код структуры в MDC для удаления выемки в структуре.

person Keir Finlow-Bates    schedule 24.02.2021