Блог

Поэтому я использую MDC (компоненты материального дизайна) без node.js , что означает, что я должен импортировать его следующим образом:

 <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">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  

Итак, CSS работает нормально, я могу использовать любой класс из MDC, и он работает безупречно.

Но есть некоторая частичная проблема с дополнительными эффектами JavaScript. Текстовое поле работает нормально — когда я нажимаю на него, текст сдвигается. Но любой другой эффект JS не работает.

 <label class="mdc-text-field mdc-text-field--outlined">
        <span class="mdc-notched-outline">
          <span class="mdc-notched-outline__leading"></span>
          <span class="mdc-notched-outline__notch">
            <span class="mdc-floating-label" id="my-label-id">OpenWeatherMap API key</span>
          </span>
          <span class="mdc-notched-outline__trailing"></span>
        </span>
        <input type="text" class="mdc-text-field__input" aria-labelledby="my-label-id" style="width: 512px;">
      </label>
      <br>
        <button class="mdc-button mdc-button--raised">
            <span class="mdc-button__label">Grant location permision</span>
          </button>
    <script>
            mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button')); <!-- This does not work>
            mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field')); <!-- This works fine>
        </script>
  

Кто-нибудь знает, как это исправить? Я перепробовал все, что нашел.

Вам нужно добавить mdc-button__ripple элемент внутри кнопки:

 <button class="mdc-button mdc-button--raised">
  <span class="mdc-button__ripple"></span>
  <span class="mdc-button__label">Grant location permision</span>
</button>